自定义jQuery UI对话框
[英]Customizing jQuery UI dialog
问题描述
为了学习jQuery UI对话框，我有下面定义的代码。
我需要做三件事
1）使用我的图像作为“确定”按钮和“取消”按钮
2）使用我的自定义图像作为对话框右上端的关闭按钮
3）整个对话框的背景应为“灰色”（包括标题和OK按钮的位置。）
重点是样式应该只应用于我的对话框。 所有其他小部件应该具有默认行为。 对于内容区域，我可以使用＃myDiv.ui-widget-content来实现它。
你可以为此建议代码吗？
注意：如果可能，请使用最佳实践。 （例如1.使用变量$ myDialog 2.使用autoOpen：false）
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title> </title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet"
type="text/css" />
<link href="Styles/OverrideMyDialog.css" rel="stylesheet"
type="text/css" />-
<script type="text/javascript">
$(document).ready(function () {
var $myDialog = $(".addNewDiv").dialog(
{
autoOpen: false,
title: 'My Title',
buttons: { "OK": function () {
$(this).dialog("close");
ShowAlert();
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
}
);
$('#myOpener').click(function () {
return $myDialog.dialog('open');
});
});
function ShowAlert() {
alert('OK Pressed');
}
</script>
<body>
<div>
<input id="myOpener" type="button" value="button" />
</div>
<div class="addNewDiv" id="myDiv" title="Add new Person" >
<table>
<tr>
<td>
Name
</td>
</tr>
<tr>
<td>
Age
</td>
</tr>
</table>
</div>
</body>
</html>
另外，我创建了一个css类来仅覆盖我的对话框的小部件功能
/*
*File Name: OverrideMyDialog.css
* jQuery UI CSS is overriden here for one div
*/
/* Component containers
----------------------------------*/
#myDiv.ui-widget-content
{
border: 5px solid Red;
background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
color: Green;
}
3 个解决方案
解决方案1
4 已采纳 2012-02-23 12:37:59
我已经对上述答案进行了评价。 仍然是dialogClass ：'myDialogCSS'是我一直在寻找的关键。
HTML和jQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
1.4.4.js"></script>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/Sunny/jqueryui.
css"
rel="stylesheet" type="text/css" />
<link href="Styles/MyStyleSheet.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
var $myDialog = $(".addNewDiv").dialog(
{
modal: true,
autoOpen: false,
dialogClass: 'myDialogCSS',
title: 'My Title',
closeOnEscape: false,
open: function(event, ui)
{
//Disable OK Button
$(".ui-dialog-buttonpane
button:contains('OK')").attr("disabled", true).addClass("ui-state-disabled");
},
buttons: { "OK": function ()
{
$(this).dialog("close");
ShowAlert();
return true;
},
"Cancel": function ()
{
$(this).dialog("close");
return false;
}
}
}
);
$('#myOpener').click(function ()
{
return $myDialog.dialog('open');
});
});
function ShowAlert() {
alert('OK Pressed');
}
</script>
</head>
<body>
<div>
<input id="myOpener" type="button" value="button" />
</div>
<div class="addNewDiv" id="myDiv" title="Add new Person">
<table>
<tr>
<td>Name
</td>
</tr>
<tr>
<td>Age
</td>
</tr>
</table>
</div>
</body>
</html>
MyStyleSheet.css
/*Title Bar*/
.myDialogCSS .ui-dialog-titlebar
{
/*Hide Title Bar*/
/*display:none; */
}
/*Content*/
.myDialogCSS .ui-dialog-content
{
font-size:30px;
}
解决方案2
1 2012-02-06 13:29:56
你应该自定义css文件。 课程是：
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
解决方案3
1 2012-02-06 13:33:58
为此，您将不得不覆盖jQuery UI（jquery.ui.theme.css）提供的默认css。
- Ok按钮的图像：您需要更改
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default背景图像。 - 关闭按钮：更改
.ui-widget-header .ui-icon - 对话背景：改变
.ui-widget-content背景属性。
希望这对你有用。
自定义JQuery UI对话框的正确方法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.