样式化jQuery小部件div

Question

当我尝试修改类#dialog .ui-dialog-titlebar时，没有视觉上的变化。

$(function() {
  $("#dialog").dialog();
});

#dialog .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Dialog"></div>

Answer 1

因为.ui-dialog-titlebar不在#dialog。 你应该发送int dialogClass并在课堂上使用。

的javascript：

$(function() {
    $("#dialog").dialog({dialogClass: 'test'});
});

的CSS：

.test .ui-dialog-titlebar {
    background-image: none;
    background-color: red;
}

或者您可以更改所有.ui-dialog-titlebar（但我认为您不想这样做）

Answer 2

尝试 <!-- Remove the added ones --> <action method="removeItem"><type>js</type><name>prototype/window.js</name></action> <action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name></action> ... <!-- Add yours --> <action method="addJs"><script>path/to/javascript.js</script></action> <!-- Add the removed ones after --> <action method="addJs"><script>prototype/window.js</script></action> <action method="addJs"><script>scriptaculous/builder.js</script></action> ... 定位标题栏。 .ui-dialog .ui-widget-header类附加到对话框的标题中。查看jQuery文档以获取更多详细信息：https://api.jqueryui.com/theming/css-framework/

＆＃13;

＆＃13;

.ui-widget-header

＆＃13;

$(function() {
  $("#dialog").dialog();
});

＆＃13;

.ui-dialog > .ui-widget-header {
  background-image: none;
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

调用打开对话框时，您可以为.ui-dialog-titlebar添加类。

＆＃13;

＆＃13;

$(function() {
  $("#dialog").dialog({
    open: function(event, ui) {
      $(this).parent().find('.ui-dialog-titlebar').addClass('ui-dialog-modified');
    }
  });
});

＆＃13;

.ui-dialog-titlebar.ui-dialog-modified {
  background-image: none;
  background-color: red;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Dialog"></div>

＆＃13;

＆＃13;

＆＃13;