Question

在我的代码段中，我演示了如何使用accordion将不同的类应用于两个不同的#divId .class小部件。这很好用，但是当我尝试将样式应用于dialog窗口小部件时，它的执行效果不同。我无法弄清楚。为什么同样的规则不适用？我是jQuery的新手。

$(function() {
  $("#dialog").dialog();
});

$(function() {
  $("#dialog2").dialog();
});

$(function() {
  $("#accordion").accordion();
});

$(function() {
  $("#accordion2").accordion();
});

#dialog .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}
#dialog2 .ui-dialog-titlebar {
  background-image: none;
  background-color: green;
}
#accordion .ui-accordion-header {
  background-image: none;
  background-color: red;
}
#accordion2 .ui-accordion-header {
  background-image: none;
  background-color: green;
}

<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">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="dialog2" title="Dialog 2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

Answer 1

jQuery UI仅包含提供的id中的对话框内容。您不能使用id来设置对话框标题的样式。

您可以使用aria-describedby属性来选择和设置特定对话框的样式。此属性的值设置为对话框元素的id。

＆＃13;

$(function() {
  $("#dialog, #dialog2").dialog();

  $("#accordion, #accordion2").accordion();
});

＆＃13;

[aria-describedby="dialog"] .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}
[aria-describedby="dialog2"] .ui-dialog-titlebar {
  background-image: none;
  background-color: green;
}
#accordion .ui-accordion-header {
  background-image: none;
  background-color: red;
}
#accordion2 .ui-accordion-header {
  background-image: none;
  background-color: green;
}

＆＃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">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="dialog2" title="Dialog 2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

＆＃13;

Answer 2

你调用dialog()的元素不是标题栏所在的外包装...标题是兄弟，因为插件用一个包含两者的外部元素包装你的元素。

可以选择在此外部包装器上设置类：

$("#dialog").dialog({dialogClass: "dialog-red"});

然后在css：

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

＆＃13;

$(function() {
  $("#dialog").dialog({
    dialogClass: "dialog-red"
  });
});

＆＃13;

.dialog-red .ui-dialog-titlebar {
  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">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

＆＃13;

样式小部件在jQuery中的应用似乎有所不同

2 个答案: