jQueryUI.dialog：覆盖单个 css 样式属性？

发布于 2024-12-09 22:06:09 字数 934 浏览 0 评论 0原文

jQuery UI 主题很好，它们适用于整个文档，但是在某些情况下，必须更改对话框的样式（例如标题栏颜色）。

在我的 jQuery UI css 中，标题栏的编码为：

.ui-dialog .ui-dialog-titlebar { padding: .4em 1em;位置：相对；这

是我的 javascript：

var $AlertDialog = $('<div"></div>')
.dialog({
  autoOpen: false,
  title: 'Alert Message',
  buttons: {Ok: function() {$( this ).dialog( "close" );}}
});     

function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.css('ui-dialog-titlebar','color: red');
  $AlertDialog.dialog('open');
};

然后调用 Alerter() 作为alert() 的替代品。

访问和更改“ui-dialog-titlebar”的颜色属性没有任何效果。

在提出这个问题之前，已经阅读了大量的资料。似乎其他人也有类似的问题，但不是特定于 jQuery UI。

这怎么能做到呢？

更新：

感谢一个很好的提示，我这样做了：

$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');

有效。但可以接受的做法吗？

原文

jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.

In my jQuery UI css, the titlebar is coded:

.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }

Here's my javascript:

var $AlertDialog = $('<div"></div>')
.dialog({
  autoOpen: false,
  title: 'Alert Message',
  buttons: {Ok: function() {$( this ).dialog( "close" );}}
});     

function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.css('ui-dialog-titlebar','color: red');
  $AlertDialog.dialog('open');
};

Alerter() is then called as a substitute for alert().

Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.

Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.

How can this be done?

Update:

Thanks to a good hint, I did this:

$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');

Works. But acceptable practice?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

毁我热情 2024-12-16 22:06:09

我的建议是不要使用 .ui-dialog 选择器，因为页面上可能有多个对话框。您可以遍历到标题栏。

    ...
    $AlertDialog.html(cTxt);
    // might as well use the theme since its part of jquery ui
    $AlertDialog.prev().addClass("ui-state-error");
    $AlertDialog.dialog('open');

My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.

    ...
    $AlertDialog.html(cTxt);
    // might as well use the theme since its part of jquery ui
    $AlertDialog.prev().addClass("ui-state-error");
    $AlertDialog.dialog('open');

回复收藏 0 原文

旧城空念 2024-12-16 22:06:09

首先，

根据文档 .css() 将属性作为参数。
您似乎正在尝试更改 ui-dialog-titlebar。而是尝试这个：

...
function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.dialog('open');
  $(".ui-dialog .ui-dialog-title").css('color','red'); 
  $(".ui-dialog .ui-dialog-title").css('background-color','orange'); 
  //Assuming you want to change header color only
  //see the theming structure at http://jqueryui.com/demos/dialog/#theming
};

Firstly,

According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:

...
function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.dialog('open');
  $(".ui-dialog .ui-dialog-title").css('color','red'); 
  $(".ui-dialog .ui-dialog-title").css('background-color','orange'); 
  //Assuming you want to change header color only
  //see the theming structure at http://jqueryui.com/demos/dialog/#theming
};

回复收藏 0 原文

~没有更多了~