jQueryのUIダイアログを学習するために、私は以下に定義されたコードを持っています。
私は3つのタスクを実行する必要があります
1）画像を「OK」ボタンと「キャンセル」ボタンとして使用する
2）私のカスタムイメージをダイアログの右上端の閉じるボタンとして使用する
3）ダイアログ全体の背景は「灰色」（タイトル、OKボタンの場所を含む）である必要があります。
重要な点は、スタイルを自分のダイアログにのみ適用することです。他のすべてのウィジェットにはデフォルトの動作が必要です。コンテンツエリアについては、＃myDiv.ui-widget-contentを使用して達成することができました。
これについてコードを教えてください。
注：できるだけベストプラクティスを使用してください。 （たとえば、変数$ myDialogを使用する2. autoOpen：falseを使用する）
<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;
}