什麼UI庫做knockout.js教程使用？

在http://learn.knockoutjs.com/有一個關於單頁面應用程序的教程。在第二步中，將項目符號列表轉換爲水平菜單。有人知道如何呈現？（也就是說，它是一個純粹的CSS解決方案，導致這種情況，還是使用jQuery UI，或者是什麼？）我查看了頁面的源代碼，看起來有很多自動化運行在演示。我不清楚這是如何工作的，我真的很想知道，因爲我試圖在我自己的測試應用程序中重現該方法。對不起，如果這是一個全新的問題，但任何幫助表示讚賞。 thx什麼UI庫做knockout.js教程使用？

來源

2012-09-24 David Barrows

這是純粹的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-24 10:07:15

謝謝John，非常感謝！ –

不客氣。如果我的回答有幫助，應考慮將其標記爲已接受。 –

瑞安Neimeyer的在http://jsfiddle.net/rniemeyer/PKDdG/樣本包括一個外部參考網絡郵箱。 css，它指向http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css。這就是我發現教程如何工作的原因，因爲當我嘗試在教程頁面上查看源代碼時，我沒有看到使用webmail.css。

如果我有

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

標籤之間

在我的本地測試的應用程序文件，我得到了相同的更新CSS視圖的教程。您也可以打開/Content/TutorialSpecific/webmail.css查看內容。

來源

2014-07-10 17:28:15 sfors

右鍵單擊，選擇視圖框架源，您將看到對/Content/TutorialSpecific/webmail.css的引用。沒有意識到html結果是在一個框架中。 – sfors

感謝您的更新！ –

什麼UI庫做knockout.js教程使用？

回答

相關問題