Question

我无法用我的代码理解jQuery UI标签。

这是我的HTML：

<div id="main">
    <div>
        <div class="ui-widget">
            <div class="ui-widget-header ui-corner-top tabs3">
                <span><a href="">My Databases</a></span>
                <span class="selected ui-corner-top"><a href="">Databases Stats</a></span>
            </div>
            <div class="ui-widget-content ui-corner-bottom">
                <div id="info-box">
                    <div class="info-box-left">
                        <h4 style="margin:0;">My Databases</h4>
                        <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>                   
                    </div>
                </div>
                <div class="list_content_holder" id="tbl"></div>
            </div>

            <div class="ui-widget-content ui-corner-bottom">
                <div id="info-box">
                    <div class="info-box-left">
                        <h4 style="margin:0;">Databases Stats</h4>
                        <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>                   
                    </div>
                </div>
                <div class="list_content_holder" id="tbl"></div>
            </div>

        </div>
    </div>
</div>

这是CSS：

.tabs3 {
   white-space: nowrap;
}
.tabs3 {
   border-bottom: medium none;
   padding: 6px;
}

.tabs3 span {
    margin: 0 5px;
    padding: 9px 20px 7px;
}

.tabs3 span.selected {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9;
    border-color: #CCCCCC;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 0;
    color: #222222;
    position: relative;
    z-index: 5;
}

这是Fiddle

我的问题是使用jquery在html上面添加标签。我导入了jquery-ui-1.10.3并尝试制作标签。但它很难用这个HTML。

谢谢。

Answer 1

Jquery选项卡就像this (look at jsfiddle).

一样简单

如果我想在标签页（或任何其他ui）上使用自定义样式，我会为它添加自己的css文件，并且＆＃34;覆盖＆＃34; jquery样式。您可以使用任何浏览器开发人员工具（chrome或firebug for ff）轻松获取应用于选项卡任何元素的类

如果您需要更多解释，请告诉我

编辑： this is how you override the jquery ui styles

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab 1</a></li>
    <li><a href="#tabs-2">tab 2</a></li>
    <li><a href="#tabs-3">tab 3</a></li>
  </ul>
  <div id="tabs-1">
    tab 1
  </div>
  <div id="tabs-2">
    tab 2
  </div>
  <div id="tabs-3">
    tab 3
  </div>
</div>


$('#tabs').tabs();


.ui-widget-header {
    background: #111 !important;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    background-color: #ccc;
}

Answer 2

以下是您所需风格的完整版本：http://jsfiddle.net/qP8DY/3/

您必须将样式应用于jQuery UI生成的HTML。您不能强制它使用您的自定义HTML结构，而无需重新编写库的整个部分。

HTML：

<div id="main">
    <ul>
        <li><a href="#tabs-1">My Databases</a>
        </li>
        <li><a href="#tabs-2">Database Stats</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Database stats</p>
    </div>
    <div id="tabs-2">
        <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>
    </div>
</div>

CSS：

body {
    margin: 0;
}
#main {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}
#main .ui-widget-header, #main.ui-widget-content, #main .ui-state-default, #main .ui-state-hover {
    background: none;
    border: none
}
#main .ui-state-default a {
    outline: none
}
#main .ui-tabs-active a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9;
    border-color: #CCCCCC;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 0;
    color: #222222;
    position: relative;
    z-index: 5;
}

和$("#main").tabs();初始化标签。

供将来参考：http://jqueryui.com/tabs/

jQuery UI - 添加标签

2 个答案: