jQuery UI选项卡对齐和共享栏与标题

Question

我想使用jQuery UI标签，但我需要标签对齐的权利…这是"容易"，因为我可以修改标签的容器类和扩展它。

但是我想在左边添加一个"title"，如下图所示:http://cl.ly/400D0E3z0f272h1B3x3R

我怎样才能用一种干净的方式来做呢?

(一种肮脏的方式可能是在tab标签前/追加一个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; }

这里有一个示例来说明

---

编辑:

正如你所指出的，右移<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; }

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