【问题标题】:jQuery UI tabs aligned and sharing bar with a titlejQuery UI 选项卡对齐并带有标题的共享栏
【发布时间】:2011-12-14 19:32:47
【问题描述】:

我想使用 jQuery UI 选项卡,但我需要正确对齐选项卡……这很“简单”,因为我可以修改选项卡容器类并对其进行扩展。

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

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

(一种肮脏的方式可能是在标签标签前添加/附加一个 div,动态添加 DOM ......我正在寻找一种更清洁的方式 :)

提前谢谢你

【问题讨论】:

    标签: jquery-ui


    【解决方案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 来说明


    编辑:

    正如你所指出的,&lt;li&gt; 向右浮动会颠倒它们的顺序。

    您可以在标记本身中颠倒列表项的顺序,但这会打乱整个逻辑。

    这里有一段 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; }
    

    我已经相应地改变了小提琴。

    【讨论】:

    • 我与一位开发人员进行了讨论,因为他告诉我颠倒标签的顺序是不对的,因为“语义”。在我们的例子中,我们在 BACKOFFICE 工作(它永远不会公开,因此它不需要 SEO)......如果它们正在生成并发送到浏览器,您是否认为反转选项卡的顺序非常重要?一次(没有 ajax)作为一个大的 HTML 块?
    • 确实如此。使用float: right 在视觉上颠倒选项卡的顺序。快速解决方案是在标记中反转&lt;li&gt; 它也会反转标签的index:“Aenean lacinia”将成为第一个标签。您可以在初始化插件时设置活动选项卡,但这可能会有点混乱。我会想另一种方法来右对齐标签。
    • 我不能认为内容的“反转”是一个问题......你能告诉我在哪些情况下你(作为开发人员)需要以相同的顺序拥有标签的 HTML 块标签标签?我的意思是,使用您的解决方案(在 HTML 源代码中),li 将是 tab3、tab2、tab1,也许选项卡内容 div 将是 tab1、tab2、tab3 ......那又怎样? ;) (这是我的问题)......真的很重要吗? (同样,您不需要 SEO 功能,它是一个内部后台)。
    • 注意:我们使用的是 Yii 框架模块,它自动构建 jqueryUI-Tabs 的 HTML,所以在我们的例子中,li 的顺序是倒置的(对于 float:right 功能),但内容是 div 顺序是正常的......但是......再次......那又怎样? :)
    • 感谢您的编辑!!!但是...我仍在考虑将源代码中的内容倒置的“问题”:P(仅用于我在办公室进行的讨论:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多