0

我在我的页面中使用了很多 jquery ui：自动完成、对话框、日期选择器等。我为这些元素设置了主题样式，没关系。

我还有一个标签导航，我想将它从主题中排除。我从我的主题中删除了所有与选项卡相关的（仅以选项卡开头的）css，但它仍然充满了我无法更改的 jquery ui css（小部件、标题、内容等），因为其他元素也会改变，我不想那样。我知道如何应用 css 范围，但这对我不利（很难使用范围主题设置自动完成和对话框的样式）。

有没有办法只从样式中排除选项卡？

谢谢

4

1 回答 1

0

出于这个原因，jQueryUI CSS 中的所有内容都是可重写的。您缺少的关键是您正在应用您直接覆盖。或者我假设。就像是：

.ui-widget { font-size: 42px; }

我知道这就是他们在文档中显示的内容，但是当您希望“特定元素”生效时，这是完全错误的。为此，您需要依赖Name Spacing。这意味着在要编辑的 UI 类名称之前使用您创建的 ID 或类名称。如：

#myEleID .ui-widget { font-size: 84px; }

这样，只有在ui-widget具有 ID 的 Element 中使用的子元素myEleId会受到影响。页面上的任何其他内容都不会受到任何影响。

为了得到一个更好的主意，我用 2 组标签为你做了一个小技巧。第一组被编辑为垂直的，但使用我的命名空间进行更改。这样，无论 UI 主题如何，都不会影响第二组（设置为默认值）！您还会在小提琴底部找到一个主题切换器。试试看！

jsFiddle

#tabs { 
    width: 55em; 
}
#tabs .ui-tabs-nav { 
    padding: .2em .4em .2em .2em; float: left; width: 12em; 
}
#tabs .ui-tabs-nav li { 
    clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; 
}
#tabs .ui-tabs-nav li a { 
    display:block;
    padding: .5em 0;
    text-align: center;
    width: 100%;
}
#tabs .ui-tabs-nav li.ui-tabs-active { 
    padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; 
}
#tabs .ui-tabs-panel { 
    padding: 1em; float: right; width: 40em;
}

很久以前，我还写了一篇关于在 jQueryUI 中获取当前选项卡的博客。它谈到了一些关于名称间距的内容，也可能对您未来的吞食有所帮助。
http://spyk3lc.blogspot.com/2012/08/jqueryjqueryui-help-tabs-get-currently.html

于 2013-06-07T13:06:06.913 回答