jQuery对话的主题和风格
-
22-08-2019 - |
题
我如何变化的背景颜色的标题栏jQuery的对话?
我已经看过的themeroller但它似乎不会为我工作。
感谢
解决方案
我做这种方式(加入 “UI-状态误差” 样式报头):
<script type="text/javascript">
$(function () {
$("#msg").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
});
</script>
其他提示
有与在对话框中的每个元素相关联的类。
使用Firebug检查元素和使用CSS样式。例如,标题栏具有类“UI-对话框的标题栏”。
(假定正在使用的jQuery的用户界面对话框)
使用dialogClass
属性。您可以应用到任何CSS jQuery的对话框。
下面我们将要格式化报头和内容块。
<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
$('#jq_dialog').dialog({
title: 'Detalhes do produto',
modal: true,
resizable: false,
width: 500,
maxHeight: 400,
closeText: 'fechar',
draggable: true,
show: 'fade',
hide: 'fade',
dialogClass: 'main-dialog-class'
});
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>
在前面的例子中工作得很好,但只有红色错误的主题。
下面只在CSS改变头部图像的简单的解决方案:
的CSS:
.ui-widget-header-custom{
background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;
}
的javascript:
$('#my_dialog').dialog({
open: function(event, ui){
$(this).parents(".ui-dialog:first").find(".ui-widget-header")
.removeClass("ui-widget-header").addClass("ui-widget-header-custom");
}
});
请注意,与以前的例子中,我除去:
removeClass("ui-widget-header")
,而不是只添加对类:
find(".ui-dialog-titlebar")
要注意的是这个实施例的工作原理与没有它的链路对话框标题。
有时你不能编辑CSS文件。所以,你可以试试这个:
dialog = $('<div/>').dialog({
title: 'Dialog with css for title bar',
open: function() {
$(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
}
});
不隶属于 StackOverflow