jQuery UI 选项卡对齐并带有标题的共享栏

Question

我想使用 jQuery UI 选项卡，但我需要正确对齐选项卡……这很“简单”，因为我可以修改选项卡容器类并对其进行扩展。

但问题是我想在左侧添加一个“标题”，如下截图所示： http://cl.ly/400D0E3z0f272h1B3x3R

我怎样才能以干净的方式做到这一点？

（一种肮脏的方式可能是在标签标签前添加/附加一个 div，动态添加 DOM ......我正在寻找一种更清洁的方式 :)

提前谢谢你

Answer 1

首先，动态向 dom 添加元素并没有什么脏东西 :-)

其次，您可以简单地在标记中添加一个元素，例如 <h3>（让我们成为语义（假设您之前有其他标题））：

<div id="tabs">
    <h3 class="ui-tab-title">My Title</h3>
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
    ...
</div>

并用 css 定位它：

/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }

/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }

/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }

这里有一个jsfiddle 来说明

---

编辑：

正如你所指出的，<li> 向右浮动会颠倒它们的顺序。

您可以在标记本身中颠倒列表项的顺序，但这会打乱整个逻辑。

这里有一段 css 用于右对齐标签按钮，同时保持标记和视觉顺序到位：

/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }

/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }

我已经相应地改变了小提琴。