5

http://learn.knockoutjs.com/には、シングルページアプリケーションに関するチュートリアルがあります。2番目のステップの前後で、箇条書きは水平メニューに変換されます。それはどのようにレンダリングされますか？

（つまり、それを引き起こすのは純粋なCSSソリューションですか、それともjQuery UIを使用していますか？）

ページのソースを確認しましたが、デモのコードを実行するために多くの自動化が行われているようです。それがどのように機能しているかは私にはわかりません。私は自分のテストアプリでそのアプローチを再現しようとしているので、本当に知りたいです。

4

2 に答える 2

7

それは純粋なCSSです。

HTML

<ul class="folders">
    <li>Inbox</li>
    <li>Archive</li>
    <li class="selected">Sent</li>
    <li>Spam</li>
</ul>​

CSS

.folders { background-color: #bbb; list-style-type: none; padding: 0; margin: 0; border-radius: 7px; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4)); 
    margin: 10px 0 16px 0;
    font-size: 0px;
}
.folders li:hover { background-color: #ddd; }    
.folders li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
.folders li { font-size: 16px; font-weight: bold; display: inline-block; padding: 0.5em 1.5em; cursor: pointer; color: #444; text-shadow: #f7f7f7 0 1px 1px; border-left: 1px solid #ddd; border-right: 1px solid #888; }
.folders li { *display: inline !important; } /* IE7 only */
.folders .selected { background-color: #444 !important; color: white; text-shadow:none; border-right-color: #aaa; border-left: none; box-shadow:inset 1px 2px 6px #070707; }    ​

これがこのフィドルで機能していることを確認できます：http：//jsfiddle.net/jearles/UcwC7/

于 2012-09-24T10:07:15.803 に答える
6

http://jsfiddle.net/rniemeyer/PKDdG/にあるRyanNeimeyerのサンプルには、http：//learn.knockoutjs.com/Content/TutorialSpecific/webmail.cssを指すwebmail.cssへの外部参照が含まれています。チュートリアルページでソースを表示しようとすると、webmail.cssが使用されていないので、このようにしてチュートリアルがどのように機能しているかを確認しました。

私が含める場合

<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css" />

ローカルテストアプリファイルのタグの間に、チュートリアルと同じ更新されたcssビューが表示されます。/Content/TutorialSpecific/webmail.cssを開いてコンテンツを表示することもできます。

于 2014-07-10T17:28:15.883 に答える