В этом уроке мы рассмотрим 2 элемента-диалоги и календари. По моему,
подалуй, это одни из самых распространённых элементов. Почти на любом
сайте с использованием jQuery Вы сможете встретить их. И так, двайте
рассмотрим их по порядку:
- Диалог. Что из себя он представляет? Это некое окно внутри
браузера с текстом и кнопками. Их можно создавать и используя
стандартный JS(prompt('Введите ваше любимое число', 7); и другие), но
использование jQuery во многих случаях упрощает и увеличивает
функциональность простого диалога, но и делает его индивидуальным.
Давайте рассмотрим код:
<html>
<head>
<title>Dialog</title>
<link type="text/css"
href="http://alexhome.at.ua/ui/css/ui-lightness/jquery-ui-1.8.4.custom.css"
rel="stylesheet" />
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-ui-1.8.4.custom.min.js"></script>
<script>
$(document).ready(function(){
$('#dialog').dialog({
autoOpen: false,
modal: true,
width: 450,
buttons: {
"Ok": function(){
alert('Здесь может быть скрипт, возникающий при
открытии диалога');
$(this).dialog("close");
},
"Cancel": function(){
alert('Здесь может быть скрипт, возникающий при
закрытии диалога');
$(this).dialog('close');
}
}
});
$('#see').click(function(){
$('#dialog').dialog('open');
});
});
</script>
</head>
<body>
<div id="dialog" title="Заголовок тестового модального
диалога">hgdgdf</div>
<div id="see">Открыть диалог</div>
</body>
</html>
Пример: http://alexhome.at.ua/jquery_lessons/lessons2.html
Давайте всё разберём:
- <link type="text/css"
href="http://alexhome.at.ua/ui/css/ui-lightness/jquery-ui-1.8.4.custom.css"
rel="stylesheet" />
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-ui-1.8.4.custom.min.js"></script> - этим мы в дальнейшем будем подключать библиотеку. - autoOpen: false,-определяет будет ли виден диалог при открытии страницы
- modal: true, - от этого будет зависеть, будет ли диалог модальным или нет
- buttons: {} - Сдесь пишуться кнопки по схеме: "Текст кнопки": function(){Событие, возникающие при клике по кнопке}
- Есле у Вас autoOpen: false, то Вы должны в каком то из элементов прописать его открытие. Это делаеться достаточно легко
$('#see').click(function(){
$('#dialog').dialog('open');
}); $('#dialog').dialog('open'); и есть его открытие.
- Календарь. С календарём всё будет намного проще. Для того, что бы реализовать данный элемент на своём сайте, нам необходимо подключить jQuery, добавить простой код и небольшой бок div в нужном месте. Вот код:
<html>
<head>
<title>Dialog</title>
<link type="text/css"
href="http://alexhome.at.ua/ui/css/ui-lightness/jquery-ui-1.8.4.custom.css"
rel="stylesheet" />
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="http://alexhome.at.ua/ui/js/jquery-ui-1.8.4.custom.min.js"></script>
<script>
$(document).ready(function(){
$('#data').datepicker({
inline: true
});
});
</script>
</head>
<body>
<div id="data"></div>
</body>
</html>
Пример: http://alexhome.at.ua/jquery_lessons/lessons3.html
Как Вы сами можете видеть, код довольно прост и не требует объяснения.
| 
