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

Question

在http://learn.knockoutjs.com/上有一个关于单页应用程序的教程.在第二步,将项目符号列表转换为水平菜单.有人知道如何渲染吗？(也就是说,它是一个纯粹的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; }    ?

你可以看到这个工作在这个小提琴:http://jsfiddle.net/jearles/UcwC7/

Answer 2

Ryan Neimeyer在http://jsfiddle.net/rniemeyer/PKDdG/上的示例包含对webmail.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来查看内容.