jQuery UI 站点上的垂直“选项卡”组件答案

【问题标题】：Vertical "tab" component on jQuery UI sitejQuery UI 站点上的垂直“选项卡”组件
【发布时间】：2011-01-31 20:35:00
【问题描述】：

jQuery UI 有一个漂亮的“垂直标签”小部件可以在章节之间切换on its own website.

有谁知道这是否基于某种标准小部件（您会期望 UI 自己的“标签”组件正在用于此，但没有骰子！），或者它是否是定制的东西？粗略地看一下代码让我怀疑是后者.....这在我正在从事的项目中非常方便。

【问题讨论】：

查看 demos.js，它似乎只是添加和删除类 demo-config-on onClick 的自定义内容。 click 事件从 demos.js 文件的第 66 行开始，这让我相信你的结论是定制的，这是真的。

标签： jquery jquery-ui

【解决方案1】：

这是 UI 选项卡小部件：http://jqueryui.com/demos/tabs/

您可以轻松地使用 css 为您的垂直选项卡设置样式，因为您可以定义一个无序列表，根据您的需要设置样式并添加 UI 选项卡的魔力。这是一些非常基本的样式...http://jsfiddle.net/CR6Eg/

<li class="ui-tabs-nav-item">
    <a href="#fragment-slide-1"><span>Volutpat ut wisi enim</a>
</li>
<li class="ui-tabs-nav-item">
    <a href="#fragment-slide-2"><span>Volutpat ut wisi enim</a>
</li>

<div class="ui-tabs-panel" id="fragment-slide-1" style="">
    <p>content</p>
</div>
<div class="ui-tabs-panel" id="fragment-slide-2" style="">
    <p>content</p>
</div>

【讨论】：

啊哈！有一个“垂直标签”子项目here。我会检查一下，我可能已经可以使用它了。如果您对在包装中从何处获得这种特定样式有任何提示，我仍然有兴趣看到它。
你真的不需要垂直标签子项目。很容易做到……你只需要一些基本的css和html知识。
@gears 谢谢！我让它与垂直标签一起工作，我需要内容区域旁边的标签。无论如何，这是要走的路。
@gears 是的，这基本上也是垂直标签的作用（只是从那里偷走了 CSS）。不过你的更好，我发现自己在处理它时正在接近它