jQuery Mobile Pagecontainer показать событие
jQuery Mobile — это веб-технология, которую можно использовать для создания адаптивного контента для веб-сайтов, доступного на всех типах смартфонов, планшетов и настольных компьютеров.
В этой статье мы будем использовать jQuery Mobile Pagecontainer show Event. Это событие запускается после завершения анимации перехода.
Синтаксис:
Инициализация pagecontainer с указанным обратным вызовом show:
$( ".selector" ).pagecontainer({ show: function( event, ui ) {} });
Привязка прослушивателя событий к событию pagecontainershow.
$( ".selector").on("pagecontainershow", function(event, ui) {});
Параметры: Это следующие параметры, которые принимаются.
- событие: это событие запускается после завершения анимации перехода
- ui: этот параметр имеет тип object с указанными ниже параметрами.
- toPage: этот параметр представляет собой объект коллекции jQuery, который содержит элемент DOM целевой страницы.
- prevPage: этот параметр представляет собой объект коллекции jQuery, который содержит элемент DOM страницы формы в отсоединенном состоянии.
Ссылка CDN: Ниже приведены некоторые сценарии jQuery Mobile, которые потребуются для вашего проекта, поэтому добавьте их в свой проект.
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
Пример. В этом примере описывается событие show jQuery Mobile Pagecontainer.
HTML
<!doctype html> < html lang = "en" > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link rel = "stylesheet" href = "//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" /> < script src = "//code.jquery.com/jquery-3.2.1.min.js" > </ script > < script src = "//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js" > </ script > </ head > < body > < center > < div data-role = "page" id = "GFG1" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h3 >jQuery Mobile Pagecontainer show Event</ h3 > < div data-role = "header" > < h2 >First Page</ h2 > </ div > < div role = "main" > < a href = "#GFG2" data-show = "slide" > Go To Second Page</ a > </ div > < br > < input type = "button" id = "Button" value = "Click" style = "width:20%" > < br > < div id = "log" ></ div > </ div > < div data-role = "page" id = "GFG2" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h3 >jQuery Mobile Pagecontainer show Event</ h3 > < div data-role = "header" > < h2 >Second Page</ h2 > </ div > < div role = "main" > < a href = "#GFG1" data-rel = "back" data-show = "slide" > Go Back To First Page </ a > </ div > < br > < input type = "button" id = "Button" value = "Click" style = "width:20%" > < br > < div id = "log" ></ div > </ div > </ center > < script > $(document).ready(function () { $("#Button").on("click", function () { $("#GFG1").pagecontainer({ show: function (event, ui) { } }); alert("Pagecontainer show event is Triggered"); }); }); </ script > </ body > </ html > |
Выход:
Ссылка: https://api.jquerymobile.com/pagecontainer/#event-show