jQuery UI 选项卡最小样式

发布于 2024-09-12 09:15:12 字数 282 浏览 12 评论 0原文

在我的应用程序中，到目前为止，我根本不需要加载任何 jQuery 样式表，但 UI-tabs 插件似乎需要一些 CSS 才能工作。好吧，很好，但是这些示例让您加载了所有 UI 样式，也许更重要的是，选项卡样式完全破坏了我自己的外观和感觉。

有没有地方可以学习如何为选项卡提供足够的 CSS，以便保留我自己的样式？

我不介意少量的样式有助于很好地排列选项卡或其他东西，但背景图像、颜色......它们与我自己的样式冲突非常严重。

哦，不用谢主题滚轮，我确信这对某些人来说很好。只是不是在这种情况下，谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不会写诗 2024-09-19 09:15:12

如果您查看选项卡演示页面，您可以单击 Themig 选项卡来查看正在使用的样式，目前看起来像这样：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <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>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

然后您可以使用 jQuery UI CSS 框架文档查找每个常规类的描述。未列出小部件特定的类，因为它们很好......每个小部件。

了解这些类的作用的最佳方法是使用 ThemeRoller，或者查看默认主题 (例如此处），只需查看这些类的 CSS，您可以使用它并根据自己的需要进行调整，这是当前的基本主题 CSS .ui-tabs-* 类：

.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

If you look at the Tabs Demo Page you can click on the Themig tab to view which styles are in use, currently it looks like this:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <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>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Then you can use the jQuery UI CSS Framework documentation to find a description of each general class. The widget specific classes aren't listed, as they're well...per-widget.

The best way to get an idea of what those classes do is to use ThemeRoller, or look at the default theme (for example here) and just look at the CSS for those classes, you can use just that and adjust for your own needs, here's the current base theme CSS for .ui-tabs-* classes:

.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

回复收藏 0 原文

~没有更多了~