【发布时间】：2012-02-27 23:09:47
【问题描述】：
为了学习 jQuery UI 对话框，我定义了下面的代码。
我需要完成以下三个任务
1) 使用我的图像作为“确定”按钮和“取消”按钮
2) 使用我的自定义图像作为对话框右上角的关闭按钮
3) 整个对话框的背景应该是“灰色”（包括标题，以及确定按钮的位置。）
重要的一点是样式应该只应用于我的对话框。所有其他小部件都应具有默认行为。对于内容区域，我可以使用#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;
}
【问题讨论】：
标签： jquery jquery-ui jquery-ui-dialog