jQuery Mobile里xxx怎么用呀? (事件篇)

jQuery Mobile里$(document).ready()怎么用呀？

相关链接：

• • http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events
  • http://jquerymobile.com/demos/1.2.1/docs/api/events.html
  • http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

注意事项:

• • Use $(document).bind('pageinit/pageshow'), not $(document).ready()
  • 默认设置下，jQueryMobile网站第一个页面之后的所有页面都是使用AJAX去加载的，而document.ready只会在第一个页面加载时执行，that's why not document.ready.
  • 相对应的，pageinit/pageshow事件则像是加载页面AJAX代码的一个回调(callback)函数，请求成功后便触发执行

jQuery Mobile里mobileinit event怎么用呀？

相关链接:

• • http://jquerymobile.com/demos/1.2.1/docs/api/globalconfig.html

mobileinit事件的作用：

• • 更改默认设置(To override default settings)
  • 在page加载之前绑定事件处理函数(bind pageshow/pageinit event handlers before page is loaded)

注意事项:

• • mobileinit事件处理函数的代码一定要放在在jquery加载之后，jquerymobile加载之前

  • <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $(document).on("mobileinit", function(){
      $(document).on('pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
        //pageshow handler goes here
      });
      $(document).on('pageinit', function() {    
        //pageinit handler goes here
      });
    });  
    </script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

     

jQuery Mobile里page事件触发顺序是怎样的？

First all events can be found here: http://api.jquerymobile.com/category/events/

• • pagebeforeload, pageload and pageloadfailed are fired when an external page is loaded
  • pagebeforechange, pagechange and pagechangefailed are page change events. These events are fired when a user is navigating between pages in the applications.
  • pagebeforeshow, pagebeforehide, pageshow and pagehide are page transition events. These events are fired before, during and after a transition and are named.
  • pagebeforecreate, pagecreate and pageinit are for page initialization.
  • pageremove can be fired and then handled when a page is removed from the DOM

Page loading jsFiddle example: http://jsfiddle.net/Gajotres/QGnft/

(以上内容copy自http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events，有那么好的讲解我为什么不用！)