将不同的主题应用于 jQuery 对话框？答案

【问题标题】：Appy different themes to jQuery-dialog?将不同的主题应用于 jQuery 对话框？
【发布时间】：2012-07-17 09:25:13
【问题描述】：

我有一个包含以下 jQuery 脚本/主题的页面。我想要的默认主题是所有适用元素的“ui-lightness”，但我希望 jQuery 对话框根据“cupertino”主题设置样式。我将如何在我的页面中实现此要求？

<!doctype html>
<html>
 <head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
  <link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-theme

【解决方案1】：

如果您查看对话框元素。查看创建类时添加的类。然后查看各自的 css 文件并将 cupertino 主题类复制到 lightness css 文件中，替换 lightness 文件中的类。它全部采用 css 样式，并且所有类的名称都相同（我相信），因此如果您只制作半自定义 css 文件，它将正常工作。

【讨论】：

我认为这并不像在 2 个主题之间交换 CSS 样式那么简单。我这样做了，但没有任何区别。什么决定了对话框标题栏的背景颜色，什么决定了对话框按钮的外观？
你是对的。我认为，根据您的建议，需要替换 /* Component containers */ 下的 CSS，并将所有必要的图像文件复制到 images 文件夹以创建混合主题。但是，必须注意对话框控件以外的其他元素的 CSS 样式不会发生变化。

【解决方案2】：

我认为所有 jquery ui 类都以 ui- 开头，因此您可以找到对话框小部件并将其中以 ui- 开头的所有样式更改为 Xui- 并让其他主题具有带有 @987654324 的类@ 而不是 ui-

var widget = $('#dialog').dialog('widget');
widget.find('[class^=ui-]').add(widget).each(function(){
    $this = $(this);
    var classes = $this.attr('class');
    $.each(classes.split(' '), function(i, v){
        if (v.indexOf('ui-') == 0){
            this.removeClass(v);
            this.addClass('X'+v);
        }
    });
});

【讨论】：

我会试试你的建议。似乎是个好主意。谢谢
@Musa- 感谢您的努力。我想调整 CSS 是最好和最直接的方法。