jQuery Mobile supports touch, scroll, orientation, and page (show, hide, load, etc.) events in addition to all standard jQuery events.
1 Initialization event: In jQuery, we generally use $(document).ready(function(){}); In jQuery, we generally use the 'pageinit' event. It fires after the page is initialized and styled.
<script>
$(document).on("pageinit","#pageone",function(){
// jQuery event here...
});
</script>
2 touch events
tag: Triggered when an element is tapped.
<script>
$(document).on("pageinit","#pageone",function(){
$("p").on("tap",function(){
$(this).hide();
});
});
</script>
taphold: Triggered when an element is tapped and held for one second.
$(document).on("pageinit","#pageone",function(){
$("p").on("taphold",function(){
$(this).hide();
});
});
</script>
swipeleft : Triggered when an element is swiped more than 30px from the left.
swiperight: Triggered when an element is swiped from the right by more than 30px.
<script>
$(document).on("pageinit","#pageone",function(){
$("p").on("swiperight",function(){
alert("You swipe right!");
});
});
</script>
3 scroll events
scrollstart and scrollend Fired when scrolling starts and ends.
<script>
$(document).on("pageinit","#pageone",function(){
$(document).on("scrollstop",function(){
alert("Stop scrolling!");
});
});
</script>
4-direction incident
The orientationchange event is fired when the device's horizontal or vertical orientation changes. Added to the window object.
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
5 page events
Initialization: pagebeforecreate, pagecreate, pageinit: It can be simply understood as: triggering before page creation, during creation, and after creation.
$(document).on("pagebeforecreate",function(event){
alert("Trigger pagebeforecreate event!");
});
$(document).on("pagecreate",function(event){
alert("Trigger pagecreate event!");
});
$(document).on("pageinit",function(event){
alert("Trigger pageinit event!")
});
load: The page load is an external event. pagebeforeload, pagelode, pagelodefailed: After the load request is sent, it is triggered on success or failure.
$(document).on("pageload",function(event,data){
alert("Trigger pageload event!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("Sorry, the requested page does not exist.");
});
Transition: pagebeforeshow, pageshow, pagebeforehide, pagehide: Triggered before the new page transition animation starts, after the new page transition animation is completed, before the current page transition animation starts, and after the current year transition animation is completed.
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering page two
alert("Page 2 is about to be displayed");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering page two
alert("Now showing page two");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving page two
alert("Page 2 is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving page two
alert("Hide page two now");
});