将文本添加到 jquery UI 选项卡控件的标题答案

【问题标题】：add text to header of jquery UI tab control将文本添加到 jquery UI 选项卡控件的标题
【发布时间】：2012-08-30 13:35:15
【问题描述】：

我想在 jquery UI 选项卡控件的标题中添加一些文本（见图）。如果能在右边对齐就好了。

【问题讨论】：

在我看来，这是一个公平的问题。我猜您必须将其添加为选项卡，然后以不同的方式设置该选项卡的样式（并禁用它）。

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案1】：

类似的东西

$("#id_of_tab_element").tabs(); //init of your tabs element
var textElement = $("<span></span>");
textElement.text("text here...");

应用样式并追加

textElement.css('position', 'absolute');
textElement.css('right', '20px');
$("#id_of_tab_element").append(textElement);

您还可以在 css 中定义样式并将类应用于元素

见this小提琴

【讨论】：

好的，这很容易。真尴尬，没想到。作品！谢谢
我需要添加 textElement.css('top', '10px');让它工作。

【解决方案2】：

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
       <span style="float: right;">hello</span>
</ul>

【讨论】：

虽然您可以像我一样执行此操作（即使只有 li 元素进入 ul 元素内部），但它在 IE7 中无法正常运行并呈现 span 元素（或 @ 987654325@ 在我的例子中）作为前一个 li 的一部分。