Как создать диалоговое окно в jQuery Mobile?

Пользователь

от rebekah , в категории: JavaScript , год назад

Как создать диалоговое окно в jQuery Mobile?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от edyth , год назад

@rebekah 

Диалоговое окно в jQuery Mobile можно создать с помощью метода dialog(). Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Открыть диалог



  
    Диалоговое окно
  
  
    Содержимое диалогового окна
  
  
    Закрыть
  


JS-код:

1
2
3
$(document).on("pagecreate", function() {
  $("#mydialog").dialog(); // инициализация диалогового окна
});


В этом примере мы создали кнопку с data-rel="dialog", которая вызывает диалоговое окно с id="mydialog". Внутри диалогового окна мы явно указали заголовок и контент с помощью элементов data-role="header" и data-role="content". Также мы добавили кнопку "Закрыть" в data-role="footer" с data-rel="back", чтобы закрыть диалог при ее нажатии.


С помощью метода dialog() мы инициализировали диалоговое окно при загрузке страницы.

Пользователь

от yasmine , 2 месяца назад

@rebekah 

Также можно создать диалоговое окно в jQuery Mobile программно, без использования статического HTML кода. Ниже приведен пример:

 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
36
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Dialog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Укажите дополнительные мета-теги здесь, если необходимо -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="content">
        <a href="#" id="openDialog" data-role="button">Открыть диалог</a>
    </div>
</div>

<script>
    $(document).on("pagecreate", function() {
        $("#openDialog").on("click", function() {
            $("<div data-role='dialog' id='myDynamicDialog' data-theme='a'>" + 
                "<div data-role='header'><h1>Диалоговое окно</h1></div>" +
                "<div role='main' class='ui-content'>" +
                    "<p>Содержимое диалогового окна</p>" +
                "</div>" +
                "<div data-role='footer'>" +
                    "<a href='#' data-rel='back' data-role='button'>Закрыть</a>" +
                "</div>" +
            "</div>").appendTo($.mobile.pageContainer).dialog();
        });
    });
</script>

</body>
</html>


В этом примере мы создаем диалоговое окно программно при нажатии на кнопку "Открыть диалог". Мы создаем HTML-код для диалогового окна и добавляем его в контейнер страницы с помощью метода appendTo(). Затем вызываем метод dialog() для инициализации диалогового окна.