jQuery Dialog — простой пример


Разберем простой пример создания диалогового окна с помощью плагина 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

Оставить комментарий