我正在编写一个jQuery UI小部件,并尽可能坚持使用内置样式,以允许主题滚动皮肤。我的结构看起来(简化)大致如下:
<div class='ui-state-active'>
<div class='ui-state-default'>
<div class='ui-icon ui-icon-triangle-1-e'/>
</div>
</div>
问题在于ui-icon
根据其祖先的ui-state
切换其图标集。但是,层次结构上的元素上的ui-state-active
似乎优先于其直接父级上的ui-state-default
,从而产生通常与其背景混合的图标。
我可以手动覆盖ui-icon
元素的背景,但随后窗口小部件不再是可主题化的。还有另一种方法可以阻止ui-state-active
影响该图标吗?
答案 0 :(得分:2)
相关的ui css就是这个,
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
在保持兼容性的同时,看起来没有什么可以做的。除了重新思考DOM的布局。
<div class='ui-state-active'>
</div>
<div class='ui-state-default'>
<div class='ui-icon ui-icon-triangle-1-e'/>
</div>
答案 1 :(得分:1)
您将不得不对css进行一些小的修改,将活动匹配到默认图标颜色,或重新考虑为什么在“活动项目”中有“非活动”项目。
我会建议第三种选择;)但感兴趣的行是:
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
正如您所看到的,默认状态和活动状态具有相同的特异性,但活动状态稍后出现,因此无需更改其代码或您的代码(或亵渎jQuery over-ride),您就会陷入困境。