jQuery UI选项卡对齐并与标题共享栏 [英] jQuery UI tabs aligned and sharing bar with a title

问题描述

我想使用jQuery UI选项卡，但我需要将这些选项卡正确对齐……这很容易，因为我可以修改选项卡容器类并对其进行扩展.

I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.

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

But the thing is I want to add a "title" on the left, as shown in this screenshot: http://cl.ly/400D0E3z0f272h1B3x3R

我如何以一种干净的方式来做它?

How can I do it in a clean way ?

(一种肮脏的方法可能是在div标签前添加/添加一个div，然后动态添加DOM…我正在寻找一种更简洁的方法:)

(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)

提前谢谢

推荐答案

首先，在向dom中动态添加元素没有什么脏:-)

First there is nothing dirty adding elements to the dom on the fly :-)

第二，您可以简单地在标记中添加一个元素，例如<h3>(让我们保持语义(假设您之前有其他标题)):

Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):

<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>会颠倒它们的顺序.

As you pointed out, floating right the <li> inverts their order.

您可以反转标记本身中列表项的顺序，但这会弄乱整个逻辑.

You could invert the order of the list items in the markup itself but this will mess up the whole logic.

在保持标记和视觉顺序不变的情况下，有一段CSS可以使Tab键右对齐:

Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:

/* 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; }

我相应地更改了小提琴.

I've changed the fiddle accordingly.

这篇关于jQuery UI选项卡对齐并与标题共享栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！