jQuery_mobile頁面跳轉事件學習

時間 2019-11-17

原文原文鏈接

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
        </script>
        <script type="text/javascript">
$(document).ready(function(){
console && console.log($(this).attr('id') + "-document  ready執行");
            });
            
            $(document).on('pagecreate', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + " - pagecreate!!");
            });
            
            $(document).on('pagebeforecreate', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + " - pagebeforecreate!!")；
            });
            
            $(document).on('pagebeforeshow ', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + "-pagebeforeshow執行");
            });
            
            $(document).on('pageshow', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + "-pageshow執行");
            });
            
            $(document).on('pageinit', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + "-pageinit執行");
            });
            
            $(document).on("pagebeforechange", function(e, data){
                console && console.log($(this).attr('id') + "-pagebeforechange!!"); 
            });
            
            $(document).on('pagechange', function(e, data){
                console && console.log($(this).attr('id') + "-pagechange!!");
            });
            
            
            $(document).on('pagebeforehide', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + " - pagebeforehide!!");
            });
            
            $(document).on('pageremove', '[data-role="page"]', function(){
                console && console.log($(this).attr('id') + " - pageremove!!");
});
$(document).on('pagehide', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pagehide!!");
});
$(document).on('pagebeforeload', '[data-role="page"]',function(){
console && console.log($(this).attr('id')+"-pagebeforeload!!");
});
$(document).on('pageload', '[data-role="page"]',function(){
console && console.log($(this).attr('id')+"-pageload!!");
});
</script>
</head>
<body>
<!--頁面一-->
<div data-role="page" id="pageone" data-theme="e">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<p>
content
</p>
<a href="#pagetwo" data-role="button">pageone-button</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<!--//頁面二-->
<div data-role="page" id="pagetwo" data-theme="d">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<p>
content
</p>
<a href="#pagethree" data-role="button" data-rel="dialog">pagetwo-button</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<!--//頁面三-->
<div data-role="page" id="pagethree" data-overlay-theme="e">
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<div data-role="content" data-theme="a">
<p>
data-overlay-theme 屬性規定對話框出如今其上的頁面的背景色。
</p>
<a href="#pageone">轉到pageone</a>
</div>
<div data-role="footer" data-theme="c">
<h1>footer</h1>
</div>
</body>
</html>

「頁面一」初次加載的順序：javascript

控制檯打印：
undefined-pagebeforechange!!
pageone - pagebeforecreate!!
pageone - pagecreate!!
pageone-pageinit執行
pageone-pagebeforeshow執行
pageone-pageshow執行
undefined-pagechange!!
undefined-document  ready執行

從頁面一調到頁二的執行順序：
css

控制檯打印結果：
undefined-pagebeforechange!!
pagetwo - pagebeforecreate!!
pagetwo - pagecreate!!
pagetwo-pageinit執行
undefined-pagebeforechange!!
pageone - pagebeforehide!!
pagetwo-pagebeforeshow執行
pageone - pagehide!!
pagetwo-pageshow執行
undefined-pagechange!!

從頁面二調到頁面三（是一個dialog）的執行順序：html

控制檯打印結果：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pagetwo - pagebeforehide!!
pagetwo - pagehide!!
undefined-pagechange!!

從頁面三回到頁面一的執行順序：
java

控制檯打印結果：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone-pagebeforeshow執行
pageone-pageshow執行
undefined-pagechange!!

再次從頁面一到頁面二的執行順序：jquery

控制檯信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone - pagebeforehide!!
pagetwo-pagebeforeshow執行
pageone - pagehide!!
pagetwo-pageshow執行
undefined-pagechange!!

再次從頁面二到頁面三的順序：ide

控制檯信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
46pagetwo - pagebeforehide!!
54pagetwo - pagehide!!
41undefined-pagechange!!

再次從頁面三回到頁面一的順序：ui

控制檯信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone-pagebeforeshow執行
pageone-pageshow執行
undefined-pagechange!!

總結：this

每一個頁面第一次加載的時候會調用：pagebeforecreate , pagecreate , pageinit方法對其完成建立和初始化；spa

在三個方法只調用一次，下次跳轉顯示的時候由於頁面已經建立了，因此只會調用pagebeforeshow，pageshow，完成顯示。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。