5

在http://learn.knockoutjs.com/有一个关于单页应用程序的教程。在第二步附近，项目符号列表被转换为水平菜单。那是如何渲染的？

（即，它是一个纯粹的 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

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 来查看内容。

于 2014-07-10T17:28:15.883 回答