Question

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

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

我怎样才能干净利落？

（一种肮脏的方式可能是将一个div添加/附加到tabs标签，动态添加DOM ......我看起来更清洁：）

提前谢谢

Answer 1

首先，在动态上没有任何脏的添加元素： - ）

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

我相应地改变了小提琴。

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

1 个答案: