Для изучения диалогового окна 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;
}