我在我的页面中使用了很多jquery ui :自动完成、对话框、日期选择器等。我为这些元素设计了主题,这没问题。
我也有一个选项卡导航,我想把它排除在主题之外。我从我的主题中删除了所有与选项卡相关的css (只有那些以选项卡开头的css ),但它仍然充满了我无法更改的jquery ui css(小部件、标题、内容等),因为这样其他元素也会更改,我不希望这样。我知道如何应用css作用域,但它对我不好(很难设置自动完成和带有作用域主题的对话框的样式)。
有没有一种方法可以只从样式中排除选项卡?
谢谢
发布于 2013-06-07 21:06:07
正是由于这个原因,jQueryUI CSS中的所有内容都是可重写的。你遗漏的关键是你是直接应用你的覆盖。至少我是这么想的。类似于:
.ui-widget { font-size: 42px; }我知道这就是他们在他们的文档中显示的,但当你想要“特定元素”生效时,这是完全错误的。为此,您需要依赖于Name Spacing。这意味着在要编辑的UI类名之前使用创建的ID或类名。例如:
#myEleID .ui-widget { font-size: 84px; }这样,只有ID为myEleId的元素中使用ui-widget的子元素才会受到影响。页面上的任何其他内容都不会受到任何影响。
为了得到一个更好的想法,我给你做了两套标签。第一个集合被编辑为垂直的,但使用my Name Space进行更改。这样,无论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
https://stackoverflow.com/questions/16983885
复制相似问题