jQuery Dialog — простой пример
Разберем простой пример создания диалогового окна с помощью плагина jQuery Dialog. Для начала скачаем сам плагин здесь. Вы можете отметить только то, что вам реально нужно. Например, для создания диалога:
В коде подключаем основные скрипты и css-стили. jQuery я взял с Google (вы можете также скачать эту библиотеку и изменить ссылку для подключения). Обратите внимание, что мой файлик html, в котором я подключаю все скрипты находится в той же директории, что и папка jquery-ui, в которую я поместил содержимое архива со скачанным плагином.
1 2 3 |
<link rel="stylesheet" href="jquery-ui/jquery-ui.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery-ui/jquery-ui.js"></script> |
Также нам необходимо добавить код для диалогового окна:
1 2 3 |
<div id="dialog" title="Мой диалог">
<p>Мое диалоговое сообщение</p>
</div>
|
Идентификатор dialog мы будем использовать для инициализации диалога:
1 2 3 |
$(function() {
$("#dialog").dialog();
});
|
Как видите, для появления диалогового окна достаточно всего одной строки с вызовом метода dialog() для идентификатора с html-кодом окна.
Если необходимо добавить одну или несколько кнопок, то в параметрах для этого метода можно добавить json с элементом buttons. Вот полный пример с двумя кнопками:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Dialog</title>
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script>
$(function() {
$("#dialog").dialog({
buttons: [
{
text: "Закрыть",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Кнопка 2",
click: function() {
// какие-то действия при нажатии на кнопку 2.
}
}
]
});
});
</script>
</head>
<body>
<div id="dialog" title="Мой диалог">
<p>Мое диалоговое сообщение</p>
</div>
</body>
</html>
|
В свойстве text для кнопки мы задаем текст для нее, а в click — действия, которые нужно выполнить при нажатии на нее.
Получается примерно так:
При необходимости можно подправить стили в файлике jquery-ui.css.
Категория: jQuery