jQuery UI - 添加选项卡

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

这是您想要的风格的完整工作版本: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/