2
jQueryのUIダイアログを学習するために、以下に定義されているコードがあります。jQuery UIのカスタマイズダイアログ
私は3つのタスク1を次の操作を行う必要がある
）ダイアログの右上端の閉じるボタンとしての私のカスタムイメージを使用して「OK」ボタンと「キャンセル」ボタン
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>
はまた、私は私のダイアログ
/*
*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;
}
あなたは（これを適用し、どのようにする場所など）のサンプルを提供していただけますか？ – Lijo
これはタブのもので、ダイアログではありません。 – Darthg8r
jquery-ui.cssファイル – Yorgo