knockout.js - Knockout.js 教程使用什么 UI 库？

Question

在 http://learn.knockoutjs.com/有关于single-page applications的教程.在第二步左右，项目符号列表转换为水平菜单。它是如何渲染的？

(即，它是导致这种情况的纯 CSS 解决方案，还是使用 jQuery UI 或什么？)

我查看了页面的源代码，看起来有很多自动化正在运行演示中的代码。我不清楚这是如何工作的，我真的很想知道，因为我正试图在我自己的测试应用程序中重现这种方法。

Answer 1

它是纯 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; }    ​

你可以在这个 fiddle 中看到这个工作: http://jsfiddle.net/jearles/UcwC7/