如何应用多个jQuery UI主题

Question

有没有人有任何技巧/提示/技巧来帮助我在一个应用程序中组织和实现多个jQuery UI主题？

我已经导致使用,!important因为它似乎是强制样式覆盖的最可靠的方法 - 但这种方法不是很理想.

Answer 1

是的,但这取决于你的意思.

假设您希望元素A使用Theme X设置样式,元素B使用Theme Y设置样式.jQuery Theme Roller内置此功能.当您下载主题(此处)时,请单击右侧的"高级主题设置".在这里,您可以设置"CSS范围".这将允许您应用ui-corners-all特定主题的jQuery UI类(即等).以下是他们为此选项提供的说明:

此字段允许您指定CSS范围以将主题限制为页面的特定部分.在页面上使用多个主题时,这很有用.如果您未提供CSS范围,则您的主题将应用于页面上的所有UI元素.

在大多数情况下,您不需要指定CSS范围.请注意:如果您提供CSS范围,则不会在下载中包含示例页面.

您还可以更改主题文件夹名称:

此字段允许您在下载中指定主题文件夹的名称.如果您计划在页面上使用多个主题,这将非常有用.它默认为"主题".

但是,如果你想创建一个全新的主题,借用几个主题中的点点滴滴,你有两个选择:自己编辑CSS和图像文件(不推荐),或者使用Theme Roller工具创建自己的主题.

如何使用:

CSS Scope只是一个CSS选择器.假设主题X应该只适用于所有带有类的元素aClass.在这种情况下,您的CSS范围将是.aClass.因此,如果您想要从主题X向元素添加圆角(假设您的CSS范围已设置为.aClass),您的HTML将需要如下所示:

<div class='ui-rounded-corners aClass'>
    Content    
</div>

Answer 2

如果你将这种技术应用于覆盖并附加到主体的ui小部件,你会遇到一些问题 - 对话框,日期选择器,自动完成....

在自动完成的情况下,您可以执行以下操作来获取带有范围类的父元素 - 将scopped类添加到自动完成本身的UL是不够的.

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});

Answer 3

嘿 - 搜索了几个小时,终于找到了从FilamentGroup做到这一点的方法,完成了教程和工作示例.
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/