jQuery मोबाइल: दस्तावेज़ तैयार बनाम पेज ईवेंट


269

मैं jQuery मोबाइल का उपयोग कर रहा हूं, और मुझे क्लासिक दस्तावेज़ तैयार और jQuery मोबाइल पेज ईवेंट के बीच अंतर समझने में परेशानी हो रही है।

  1. वास्तविक अंतर क्या है?

    क्यों जरूरी है

    <!-- language: lang-js -->
    
    $(document).ready() {
    
    });
    

    से बेहतर हो

    $(document).on('pageinit') {
    
    });
    
  2. जब आप एक पृष्ठ से दूसरे पृष्ठ में संक्रमण करते हैं, तो पृष्ठ घटनाओं का क्रम क्या होता है?

  3. मैं एक पेज से दूसरे पेज पर डेटा कैसे भेज सकता हूं और क्या पिछले पेज से डेटा एक्सेस करना संभव है?


प्रश्न 1 के तहत, वे दोनों समान हैं। क्या आप इसे बदल सकते हैं या आपके मतलब के बारे में थोड़ा और समझा सकते हैं?
कर्क

इसलिए, पेजइनिट घटना के बारे में एक साल से भी कम समय में, "इस घटना को पेजक्रिएट के पक्ष में 1.4.0 में चित्रित किया गया है"। देखें api.jquerymobile.com/pageinit
DOK

जवाबों:


439

jQuery मोबाइल 1.4 अपडेट:

मेरा मूल लेख पेज हैंडलिंग के पुराने तरीके के लिए था, मूल रूप से jQuery Mobile 1.4 से पहले सब कुछ। हैंडलिंग का पुराना तरीका अब समाप्त हो गया है और यह jQuery के मोबाइल 1.5 तक (जिसमें शामिल है) तक सक्रिय रहेगा, इसलिए आप अभी भी नीचे बताई गई सभी चीज़ों का उपयोग कर सकते हैं, कम से कम अगले साल तक और jQuery मोबाइल 1.6।

सहित पुरानी घटनाओं, pageinit किसी भी अधिक मौजूद नहीं है, वे बदल दिए जाते हैं pagecontainer विजेट। पेजइनिट पूरी तरह से मिटा दिया गया है और आप इसके बजाय पेजक्रिएट का उपयोग कर सकते हैं , यह घटना वही रही और इसका बदलाव नहीं होगा।

यदि आप पृष्ठ इवेंट हैंडलिंग के नए तरीके में रुचि रखते हैं , तो यहां एक नज़र डालें , किसी भी अन्य मामले में इस लेख को जारी रखने के लिए स्वतंत्र महसूस करें। आपको इस उत्तर को पढ़ना चाहिए भले ही आप jQuery Mobile 1.4 + का उपयोग कर रहे हों, यह पृष्ठ घटनाओं से परे चला जाता है, इसलिए आपको संभवतः बहुत सारी उपयोगी जानकारी मिल जाएगी।

पुरानी सामग्री:

यह लेख मेरे ब्लॉग HERE के एक भाग के रूप में भी पाया जा सकता है ।

$(document).on('pageinit') बनाम $(document).ready()

JQuery में सीखने वाली पहली बात यह है कि $(document).ready()फ़ंक्शन के अंदर कोड को कॉल करना है ताकि DOM लोड होते ही सब कुछ निष्पादित हो जाए। हालाँकि, jQuery मोबाइल में , Ajax का उपयोग आपके द्वारा नेविगेट किए जाने वाले प्रत्येक पृष्ठ की सामग्री को DOM में लोड करने के लिए किया जाता है। इस वजह $(document).ready()से आपका पहला पृष्ठ लोड होने से पहले ट्रिगर हो जाएगा और पृष्ठ हेरफेर के लिए इच्छित प्रत्येक कोड पृष्ठ ताज़ा होने के बाद निष्पादित किया जाएगा। यह बहुत सूक्ष्म बग हो सकता है। कुछ प्रणालियों पर यह प्रतीत हो सकता है कि यह ठीक काम करता है, लेकिन दूसरों पर यह अनियमित होने के लिए, पुनरावृत्ति के लिए अजीब तरह से कठिन हो सकता है।

क्लासिक jQuery वाक्यविन्यास:

$(document).ready(function() {

});

इस समस्या को हल करने के लिए (और मुझे विश्वास है कि यह एक समस्या है) jQuery के मोबाइल डेवलपर्स ने पृष्ठ ईवेंट बनाए। संक्षेप में पृष्ठ की घटनाओं को पृष्ठ निष्पादन के एक विशेष बिंदु में ट्रिगर किया जाता है। उन पेज ईवेंट में से एक पेजइनिट ईवेंट है और हम इसे इस तरह से उपयोग कर सकते हैं:

$(document).on('pageinit', function() {

});

हम आगे भी जा सकते हैं और दस्तावेज़ चयनकर्ता के बजाय पृष्ठ आईडी का उपयोग कर सकते हैं। मान लें कि हमारे पास एक आईडी इंडेक्स वाला jQuery का मोबाइल पेज है :

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

कोड को निष्पादित करने के लिए जो केवल अनुक्रमणिका पृष्ठ के लिए उपलब्ध होगा हम इस वाक्यविन्यास का उपयोग कर सकते हैं:

$('#index').on('pageinit', function() {

});

पेजइनिट घटना को हर बार निष्पादित किया जाएगा पृष्ठ को पहली बार लोड किया जाना और दिखाया जाना है। यह तब तक फिर से ट्रिगर नहीं होगा जब तक कि पेज मैन्युअल रूप से रिफ्रेश न हो जाए या अजाक्स पेज लोडिंग बंद न हो जाए। मामले में आप कोड आप एक पृष्ठ के लिए इसका इस्तेमाल करने के लिए बेहतर है पर जाएँ हर बार निष्पादित करने के लिए चाहते हैं pagebeforeshow घटना।

इस समस्या को प्रदर्शित करने के लिए यहां एक कार्यकारी उदाहरण दिया गया है: http://jsfiddle.net/Gajotres/Q3Usv/

इस प्रश्न पर कुछ और नोट्स। कोई फर्क नहीं पड़ता कि आप 1 HTML कई पृष्ठों या एकाधिक HTML फ़ाइलों का उपयोग कर रहे हैं, यह सलाह दी जाती है कि अपने सभी कस्टम जावास्क्रिप्ट पेज को एक अलग जावास्क्रिप्ट फ़ाइल में संभाल कर अलग करें। यह आपके कोड को किसी भी बेहतर बना देगा लेकिन आपके पास बहुत बेहतर कोड अवलोकन होगा, विशेष रूप से jQuery मोबाइल एप्लिकेशन बनाते समय ।

एक अन्य विशेष jQuery मोबाइल कार्यक्रम भी है और इसे मोबाइलिनिट कहा जाता है । जब jQuery Mobile शुरू होता है, तो यह डॉक्यूमेंट ऑब्जेक्ट पर एक मोबाइलइनिट इवेंट को ट्रिगर करता है । डिफ़ॉल्ट सेटिंग्स को ओवरराइड करने के लिए, उन्हें mobileinit से बांधेंमोबाइलिनिट उपयोग का एक अच्छा उदाहरण अजाक्स पृष्ठ लोड करना बंद कर रहा है, या डिफ़ॉल्ट अजाक्स लोडर व्यवहार को बदल रहा है।

$(document).on("mobileinit", function(){
  //apply overrides here
});

पृष्ठ ईवेंट संक्रमण आदेश

सबसे पहले सभी कार्यक्रम यहां देखे जा सकते हैं: http://api.jquerymobile.com/category/events/

मान लें कि हमारे पास एक पृष्ठ A और एक पृष्ठ B है, यह एक अनलोड / लोड ऑर्डर है:

  1. पृष्ठ B - ईवेंट पृष्ठ beforecreate

  2. पेज B - ईवेंट पेजक्रिएट

  3. पेज बी - ईवेंट पेजिनिट

  4. पेज ए - घटना पेजबेफाइड

  5. पेज ए - ईवेंट पेजरोव

  6. पेज ए - घटना पेजहाइड

  7. पृष्ठ B - घटना पृष्ठ bebeeshow

  8. पृष्ठ B - घटना Pageshow

बेहतर पृष्ठ घटनाओं के लिए समझ यह पढ़ें:

  • pagebeforeload, pageloadऔर pageloadfailedबाहरी पृष्ठ लोड होने पर निकाल दिया जाता है
  • pagebeforechange, pagechangeऔर pagechangefailedपृष्ठ परिवर्तन की घटनाएं हैं। इन घटनाओं को निकाल दिया जाता है जब कोई उपयोगकर्ता अनुप्रयोगों में पृष्ठों के बीच नेविगेट कर रहा होता है।
  • pagebeforeshow, pagebeforehide, pageshowऔर pagehideपेज संक्रमण की घटनाओं रहे हैं। इन घटनाओं को एक संक्रमण से पहले, दौरान और बाद में निकाल दिया जाता है और नाम दिया जाता है।
  • pagebeforecreate, pagecreateऔर pageinitपेज इनिशियलाइज़ेशन के लिए हैं।
  • pageremove जब किसी पृष्ठ को DOM से निकाल दिया जाता है तो उसे निकाल दिया जा सकता है और फिर संभाला जा सकता है

पेज लोडिंग jsField उदाहरण: http://jsfiddle.net/Gajotres/QGnft/

यदि AJAX सक्षम नहीं है, तो कुछ ईवेंट आग नहीं लग सकते हैं।

पृष्ठ संक्रमण को रोकें

यदि किसी कारण से पृष्ठ संक्रमण को कुछ शर्त पर रोका जाना चाहिए तो यह इस कोड के साथ किया जा सकता है:

$(document).on('pagebeforechange', function(e, data){
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#index' && to === '#second') {
            alert('Can not transition from #index to #second!');
            e.preventDefault();
            e.stopPropagation();

            // remove active status on a button, if transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
        }
    }
});

यह उदाहरण किसी भी स्थिति में काम करेगा क्योंकि यह प्रत्येक पृष्ठ संक्रमण की भीख मांगने पर ट्रिगर होगा और जो सबसे महत्वपूर्ण है वह पृष्ठ परिवर्तन से पहले पृष्ठ परिवर्तन को रोकेगा।

यहाँ एक काम कर उदाहरण है:

कई घटनाओं को रोकना / ट्रिगर करना रोकें

jQuery Mobileक्लासिक वेब अनुप्रयोगों की तुलना में एक अलग तरीके से काम करता है। इस बात पर निर्भर करते हुए कि आप हर बार जब आप किसी पृष्ठ पर जाते हैं, तो यह आपके ईवेंट को बांधने में कामयाब होता है। यह कोई त्रुटि नहीं है, यह केवल यह है कि jQuery Mobileइसके पृष्ठों को कैसे हैंडल किया जाता है। उदाहरण के लिए, इस कोड स्निपेट पर एक नज़र डालें:

$(document).on('pagebeforeshow','#index' ,function(e,data){
    $(document).on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

कार्यशील jsFiddle उदाहरण: http://jsfiddle.net/Gajotres/CCfL4/

हर बार जब आप पृष्ठ #index पर क्लिक करते हैं तो ईवेंट क्लिक बटन # टेस्ट-बटन के लिए बाध्य होने वाला है । इसे पेज 1 से पेज 2 पर ले जाकर कई बार टेस्ट करें। इस समस्या को रोकने के कुछ तरीके हैं:

समाधान 1

pageinitघटनाओं को बांधने के लिए उपयोग करने के लिए सबसे अच्छा समाधान होगा । यदि आप एक आधिकारिक दस्तावेज पर एक नज़र डालते हैं, तो आपको पता चलेगा कि pageinitदस्तावेज़ तैयार होने की तरह, केवल एक बार ट्रिगर होगा, इसलिए कोई रास्ता नहीं है घटनाओं को फिर से बाध्य किया जाएगा। यह सबसे अच्छा समाधान है क्योंकि आपके पास ओवरहेड को संसाधित नहीं करना है जैसे ऑफ पद्धति से घटनाओं को हटाते समय।

कार्यशील jsFiddle उदाहरण: http://jsfiddle.net/Gajotres/AAFH8/

यह कार्यशील समाधान पिछले समस्याग्रस्त उदाहरण के आधार पर बनाया गया है।

समाधान २

ईवेंट को बाइंड करने से पहले निकालें:

$(document).on('pagebeforeshow', '#index', function(){
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

कार्यशील jsField उदाहरण: http://jsfiddle.net/Gajotres/K8YmG/

समाधान 3

इस तरह एक jQuery फ़िल्टर चयनकर्ता का उपयोग करें:

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

क्योंकि ईवेंट फ़िल्टर आधिकारिक jQuery फ्रेमवर्क का हिस्सा नहीं है, जो यहां पाया जा सकता है: http://www.codenothing.com/archives/2009/event-filter/

संक्षेप में, यदि गति आपकी मुख्य चिंता है तो समाधान 2 समाधान 1 से बहुत बेहतर है।

समाधान ४

एक नया, शायद उन सभी का सबसे आसान।

$(document).on('pagebeforeshow', '#index', function(){
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more than once
        {
            alert('Clicked');
            e.handled = true;
        }
    });
});

कार्यशील jsField उदाहरण: http://jsfiddle.net/Gajotres/Yerv9/

इस समाधान के लिए शोलिंगर को Tnx : http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

पेजचेंज ईवेंट क्विर्क - दो बार ट्रिगर करना

कभी-कभी पेजचेंज घटना दो बार ट्रिगर हो सकती है और इसका पहले बताई गई समस्या से कोई लेना-देना नहीं है।

Pagebeforechange घटना दो बार होती है इसका कारण परिवर्तन में पुनरावर्ती कॉल के कारण होता है जब पेजेज एक jQuery बढ़ाया डोम ऑब्जेक्ट नहीं है। यह पुनरावृत्ति खतरनाक है, क्योंकि डेवलपर को घटना के भीतर टापेज को बदलने की अनुमति है। अगर डेवलपर लगातार पेजबीफॉरचेंज ईवेंट हैंडलर के भीतर एक स्ट्रिंग के लिए पेजेज सेट करता है, भले ही यह एक वस्तु हो या न हो एक अनंत पुनरावर्ती लूप होगा। पगेलोड घटना डेटा ऑब्जेक्ट की पृष्ठ संपत्ति के रूप में नया पृष्ठ पास करती है (इसे प्रलेखन में जोड़ा जाना चाहिए, यह वर्तमान में सूचीबद्ध नहीं है)। पगेलोड घटना का उपयोग लोड किए गए पृष्ठ तक पहुंचने के लिए किया जा सकता है।

कुछ शब्दों में यह इसलिए हो रहा है क्योंकि आप पृष्ठ परिवर्तन के माध्यम से अतिरिक्त पैरामीटर भेज रहे हैं।

उदाहरण:

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

इस समस्या को ठीक करने के लिए पृष्ठ ईवेंट संक्रमण क्रम में सूचीबद्ध किसी भी पृष्ठ ईवेंट का उपयोग करें ।

पृष्ठ परिवर्तन समय

जैसा कि उल्लेख किया गया है, जब आप एक jQuery के मोबाइल पेज से दूसरे में बदलते हैं, आम तौर पर या तो एक और jQuery मोबाइल पेज के लिंक पर क्लिक करके, जो पहले से ही DOM में मौजूद है, या मैन्युअल रूप से $ .mobile.changePage पर कॉल करके, कई ईवेंट और बाद की क्रियाएं होती हैं। उच्च स्तर पर निम्न क्रियाएं होती हैं:

  • पृष्ठ परिवर्तन की प्रक्रिया शुरू हो गई है
  • एक नया पेज लोड किया गया है
  • उस पृष्ठ की सामग्री "बढ़ाया" (स्टाइल) है
  • मौजूदा पृष्ठ से नए पृष्ठ पर एक संक्रमण (स्लाइड / पॉप / आदि) होता है

यह एक औसत पृष्ठ संक्रमण बेंचमार्क है:

पेज लोड और प्रसंस्करण: 3 एमएस

पृष्ठ वृद्धि: 45 एमएस

संक्रमण: 604 मि

कुल समय: 670 मि

* ये मूल्य मिलीसेकंड में हैं।

तो जैसा कि आप देख सकते हैं कि संक्रमण की घटना लगभग 90% निष्पादन समय खा रही है।

पृष्ठ बदलावों के बीच डेटा / पैरामीटर्स में हेरफेर

पेज ट्रांजिशन के दौरान एक पेज से दूसरे पेज पर एक पैरामीटर / एस भेजना संभव है। इसे कुछ तरीकों से किया जा सकता है।

संदर्भ: https://stackoverflow.com/a/13932240/1848600

समाधान 1:

आप परिवर्तन के साथ मान पास कर सकते हैं:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

और उन्हें इस तरह पढ़ें:

$(document).on('pagebeforeshow', "#index", function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");
    alert(parameter);
});

उदाहरण :

index.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            });
        });

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");
            alert(parameter);
        });
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Test</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

second.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

समाधान 2:

या आप किसी संग्रहण उद्देश्य के लिए एक सतत जावास्क्रिप्ट ऑब्जेक्ट बना सकते हैं। जब तक पेज लोडिंग के लिए Ajax का उपयोग किया जाता है (और पेज को किसी भी तरह से लोड नहीं किया जाता है) तब तक ऑब्जेक्ट सक्रिय रहेगा।

var storeObject = {
    firstname : '',
    lastname : ''
}

उदाहरण: http://jsfiddle.net/Gajotres/9KKbx/

समाधान 3:

आप पिछले पेज से भी इस तरह से डेटा एक्सेस कर सकते हैं:

$(document).on('pagebeforeshow', '#index',function (e, data) {
    alert(data.prevPage.attr('id'));
});

prevPage ऑब्जेक्ट एक पूरा पिछला पृष्ठ रखता है।

समाधान 4:

अंतिम समाधान के रूप में हमारे पास निफ्टी एचटीएमएल लोकलस्टोरेज का कार्यान्वयन है। यह केवल HTML5 ब्राउज़र (एंड्रॉइड और आईओएस ब्राउज़र सहित) के साथ काम करता है, लेकिन सभी संग्रहीत डेटा पेज रिफ्रेश के माध्यम से लगातार है।

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";
}

उदाहरण: http://jsfiddle.net/Gajotres/J9NTr/

शायद सबसे अच्छा समाधान है, लेकिन यह iOS 5.X के कुछ संस्करणों में विफल हो जाएगा। यह एक अच्छी तरह से ज्ञात त्रुटि है।

उपयोग न करें .live()/ .bind()/.delegate()

मैं (या मुझे याद दिलाने के लिए tnx andleer ) का उल्लेख करना भूल गया / घटना बंधन / unbinding, जीना / मरना और बाँध / unbind के लिए उपयोग बंद कर दिया जाता है।

JQuery के .live () विधि को एक संस्करण के रूप में देखा गया था जब इसे एपीआई के संस्करण 1.3 में पेश किया गया था। एक सामान्य jQuery ऐप में बहुत अधिक डोम हेरफेर हो सकता है और तत्वों के आते-जाते समय हुक और अनहुक करना बहुत कठिन हो सकता है। .live()विधि यह संभव अपने चयनकर्ता के आधार पर अनुप्रयोग के जीवन के लिए एक घटना हुक करने के लिए किया। महान सही है? गलत, .live()विधि बेहद धीमी है। .live()विधि वास्तव में दस्तावेज़ वस्तु के लिए अपने घटनाओं, हुक जिसका अर्थ है कि तत्व से घटना चाहिए बबल सामने है कि घटना उत्पन्न जब तक यह दस्तावेज़ तक पहुँचता है। यह आश्चर्यजनक रूप से समय लेने वाला हो सकता है।

अब यह पदावनत हो गया है। JQuery टीम के लोग अब इसके उपयोग की अनुशंसा नहीं करते हैं और न ही I. I. करते हैं। भले ही यह हुक और अनहुक घटनाओं के लिए थकाऊ हो सकता है, लेकिन आपका कोड .live()इसके साथ विधि के बिना बहुत तेज होगा।

इसके बजाय .live()आपको उपयोग करना चाहिए .on().on()है .live () से 2-3x अधिक तेज़ । इस घटना को बाध्यकारी बेंचमार्क पर एक नज़र डालें: http://jsperf.com/jquery-live-vs-delegate-vs-on/34 , सब कुछ वहाँ से स्पष्ट हो जाएगा।

बेंचमार्किंग:

JQuery के मोबाइल पेज इवेंट बेंचमार्किंग के लिए बनाई गई एक उत्कृष्ट स्क्रिप्ट है । यह यहां पाया जा सकता है: https://github.com/jquery/jquery-mobile/blob/master/tools/page-change-time.js । लेकिन इससे पहले कि आप इसके साथ कुछ भी करें, मैं आपको इसकी alertअधिसूचना प्रणाली को हटाने की सलाह देता हूं (प्रत्येक "परिवर्तन पृष्ठ" आपको ऐप को रोककर यह डेटा दिखाने जा रहा है) और इसे console.logफ़ंक्शन में बदल देगा ।

मूल रूप से यह स्क्रिप्ट आपके सभी पेज ईवेंट को लॉग करेगा और यदि आप इस आर्टिकल को ध्यान से पढ़ेंगे (पेज इवेंट डिस्क्रिप्शन) तो आपको पता चल जाएगा कि पेज एन्हांसमेंट, पेज ट्रांजिशन में कितना समय jQm खर्च हुआ है ...।

अंतिम नोट्स

हमेशा, और मेरा मतलब है कि हमेशा आधिकारिक jQuery मोबाइल प्रलेखन पढ़ें । यह आमतौर पर आपको आवश्यक जानकारी प्रदान करेगा, और कुछ अन्य दस्तावेजों के विपरीत यह एक अच्छा है, पर्याप्त स्पष्टीकरण और कोड उदाहरणों के साथ।

परिवर्तन:

  • 30.01.2013 - कई घटनाओं को ट्रिगर करने की रोकथाम की एक नई विधि जोड़ी गई
  • 31.01.2013 - पृष्ठ बदलावों के बीच अध्याय डेटा / पैरामीटर्स हेरफेर के लिए एक बेहतर स्पष्टीकरण जोड़ा गया
  • 03.02.2013 - पेज ट्रांज़िशन के बीच अध्याय डेटा / पैरामीटर्स हेरफेर में नई सामग्री / उदाहरण जोड़े गए
  • 22.05.2013 - पेज संक्रमण / परिवर्तन रोकथाम के लिए एक समाधान जोड़ा गया और आधिकारिक पेज ईवेंट एपीआई प्रलेखन में लिंक जोड़े गए
  • 18.05.2013 - कई इवेंट बाइंडिंग के खिलाफ एक और समाधान जोड़ा गया

2
$().live()jQuery 1.7 में हटा दिया गया था और 1.9 में हटा दिया गया था, इसलिए यह वास्तव में किसी भी jQuery मोबाइल समाधान का हिस्सा होना चाहिए। JQM 1.7 के लिए वर्तमान न्यूनतम कोर संस्करण।
-लेर

16
पृष्ठ लोड के आसपास महत्वपूर्ण व्यवहार के +1 बहुत उपयोगी सारांश
RedFilter

2
pagecreateघटना केवल एक बार निकाल दी जाती है जब पृष्ठ पहली बार बनाया जाता है। इसलिए अगर हम क्लिक घटनाओं को अंदर बांधते हैं तो pagecreateयह कई बार फायर नहीं करेगा। ऐप को विकसित करते समय मैंने कुछ सोचा। लेकिन हम हमेशा pagecreateघटनाओं को बांधने के लिए उपयोग नहीं कर सकते हैं, इसलिए आपके द्वारा दिया गया समाधान सबसे अच्छा है। +1 दिया
Jay Mayu

1
आपके पास दो बार सूचीबद्ध किए गए पृष्ठबाहर हैं। इसे 5 नंबर और नंबर 8 के रूप में सूचीबद्ध किया गया है। क्या इसे दो बार कहा जाता है?
राबर्ट्स

यह एक टाइपो था, मैंने इसे ठीक कर दिया है, पेजबेफोरशो केवल एक बार ट्रिगर होगा। इसे नोटिस करने के लिए धन्यवाद।
गजोट्रेस

17

आप में से कुछ को यह उपयोगी लग सकता है। बस इसे अपने पेज पर कॉपी पेस्ट करें और आपको एक अनुक्रम मिलेगा जिसमें क्रोम कंसोल ( Ctrl+ Shift+ I) में घटनाओं को निकाल दिया जाता है ।

$(document).on('pagebeforecreate',function(){console.log('pagebeforecreate');});
$(document).on('pagecreate',function(){console.log('pagecreate');});
$(document).on('pageinit',function(){console.log('pageinit');});
$(document).on('pagebeforehide',function(){console.log('pagebeforehide');});
$(document).on('pagebeforeshow',function(){console.log('pagebeforeshow');});
$(document).on('pageremove',function(){console.log('pageremove');});
$(document).on('pageshow',function(){console.log('pageshow');});
$(document).on('pagehide',function(){console.log('pagehide');});
$(window).load(function () {console.log("window loaded");});
$(window).unload(function () {console.log("window unloaded");});
$(function () {console.log('document ready');});

आप कंसोल में अनलोड नहीं जा रहे हैं क्योंकि जब पृष्ठ अनलोड किया जा रहा है (जब आप पृष्ठ से दूर जाते हैं) तो इसे निकाल दिया जाता है। इसे इस तरह उपयोग करें:

$(window).unload(function () { debugger; console.log("window unloaded");});

और आप देखेंगे कि मेरा क्या मतलब है।


4

यह सही तरीका है:

कोड को निष्पादित करने के लिए जो केवल इंडेक्स पेज पर उपलब्ध होगा, हम इस सिंटैक्स का उपयोग कर सकते हैं:

$(document).on('pageinit', "#index",  function() {
    ...
});

10
उपरोक्त उत्तर समान है, क्या आपको नहीं लगता? :)
उमर

अच्छे क्विक फिक्स शॉर्ट उत्तर के लिए धन्यवाद। :-)
शार्प

1

JQuery-mobile में दस्तावेज़ तैयार और पृष्ठ घटना के बीच सरल अंतर यह है कि:

  1. दस्तावेज़ तैयार घटना का उपयोग पूरे HTML पृष्ठ के लिए किया जाता है,

    $(document).ready(function(e) {
        // Your code
    });
  2. जब कोई पृष्ठ घटना होती है, तो विशेष पृष्ठ घटना को संभालने के लिए उपयोग करें:

    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Page header
            </h3>
        </div>
        <div data-role="content">
            Page content
        </div> <!--content-->
        <div data-role="footer">
            Page footer
        </div> <!--footer-->
    </div><!--page-->

आप पेजइनिट घटना से निपटने के लिए दस्तावेज़ का उपयोग भी कर सकते हैं:

$(document).on('pageinit', "#mypage", function() {

});

-1

जब आप .on () का उपयोग करते हैं, तो यह मूल रूप से एक लाइव क्वेरी है जिसे आप उपयोग कर रहे हैं।

दूसरी ओर, पहले से ही (आपके मामले में) एक स्थिर क्वेरी है। इसका उपयोग करते समय, आप डेटा को गतिशील रूप से अपडेट कर सकते हैं और पेज को लोड करने के लिए इंतजार नहीं करना होगा। आप अपने डेटाबेस में मानों को पास कर सकते हैं (यदि आवश्यक हो) जब एक विशेष मूल्य दर्ज किया जाता है।

लाइव क्वेरी का उपयोग उन रूपों में आम है जहां हम डेटा (खाता या पोस्ट या यहां तक ​​कि टिप्पणी) दर्ज करते हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.