jsFiddle

Question

我在我的页面中使用了很多jquery ui：autocomplete，dialog，datepicker等。我为这些元素设计了主题并且没关系。

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

有没有办法只从样式中排除标签？

谢谢

Answer 1

由于这个原因，jQueryUI CSS中的所有东西都是可写的。你缺少的关键是你直接申请你的覆盖。或者我假设。类似的东西：

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

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

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

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

为了获得一个更好的主意，我让你成了一套有两套标签的小提琴。第一组被编辑为垂直，但使用我的名称空间进行更改。这样，无论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

jquery ui主题所有元素，但一个

1 个答案:

jsFiddle