Appy different themes to jQuery-dialog?

StackOverflow https://stackoverflow.com/questions/11514495

Pregunta

I have a page with the following jQuery scripts/theme included. The default theme I want is 'ui-lightness' for all applicable elements, but I would like the jQuery dialog boxes to be styled according to the 'cupertino' theme. How would I implement this requirement in my page?

<!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>
¿Fue útil?

Solución

If you look at a dialog element. Look at the classes that are added when you create one. Then look in the respective css files and copy the cupertino theme classes into the lightness css file replacing the classes in the lightness file. It's all styled with css and all the classes are named the same (I believe) so it will work fine if you just make the semi-custom css file.

Otros consejos

I think all jquery ui classes starts with ui- so you could find the dialog widget and change all the styles in it that starts with ui- to say Xui- and have the other theme have classes with the Xui- instead of the 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);
        }
    });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top