Question

我有一个包含以下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>

Answer 1

如果你看一个对话框元素。查看创建一个类时添加的类。然后查看相应的css文件并将cupertino主题类复制到lightness css文件中，替换lightness文件中的类。它都是用css设计的，并且所有的类都被命名为相同（我相信）所以如果你只是制作半自定义的css文件它会正常工作。

Answer 2

我认为所有jquery ui类都以ui-开头，因此您可以找到对话框小部件并更改其中以ui-开头的所有样式来说Xui-并具有其他主题使用Xui-而不是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);
        }
    });
});

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

2 个答案: