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

Question

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

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

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

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

我相应地改变了 fiddle 。