jQuery UI标签对齐并与标题共享栏

Question

我想使用jQuery UI选项卡,但我需要对齐右边的选项卡...这很"简单",因为我可以修改选项卡容器类并扩展它.

但问题是我想在左边添加一个"标题",如截图所示:http: //cl.ly/400D0E3z0f272h1B3x3R

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

(一种肮脏的方式可能是将一个div添加/附加到tabs标签,动态添加DOM ......我看起来更干净:)

先感谢您

Answer 1

首先,在飞行中没有任何脏的添加元素:-)

其次,你可以简单地在标记中添加一个元素,例如a <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; }

我相应地改变了小提琴.