1

我无法用我的代码理解 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;
}

这是小提琴

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

谢谢你。

4

2 回答 2

2

Jquery tabs 就是这么简单（看看 jsfiddle）。

当我想要在选项卡（或任何其他 ui）上自定义样式时，我会为其添加自己的 css 文件并“覆盖”jquery 样式。您可以使用任何浏览器开发工具（用于 ff 的 chrome 或 firebug）轻松将类应用于选项卡的任何元素

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

编辑： 这是您覆盖 jquery ui 样式的方式

<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;
}
于 2013-06-09T11:05:57.500 回答
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/

于 2013-06-09T11:13:23.367 回答