javascript - मुझे jquery मोबाइल में index.html को सभी स्क्रिप्ट क्यों डालना है




cordova jquery-mobile (4)

पहचान

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

कैसे jQuery मोबाइल पेज बदलता है

इस स्थिति को समझने के लिए आपको समझने की जरूरत है कि jQuery मोबाइल कैसे काम करता है। यह अन्य पृष्ठों को लोड करने के लिए AJAX का उपयोग करता है।

पहला पृष्ठ सामान्य रूप से लोड होता है। इसका HEAD और BODY DOM में भरा हुआ है, और वे अन्य सामग्री का इंतजार करने के लिए वहां हैं। जब दूसरा पृष्ठ लोड होता है, तो केवल उसकी BODY सामग्री को DOM में लोड किया जाता है। अधिक सटीक होने के लिए, यहां तक ​​कि BODY पूरी तरह से लोड नहीं होता है। एक विशेषता डेटा-भूमिका = "पृष्ठ" के साथ केवल पहला div लोड किया जाएगा, बाकी सब कुछ त्याग दिया जा रहा है। यहां तक ​​कि यदि आपके पास BODY अंदर और पेज हैं तो पहले ही लोड होने जा रहा है। यह नियम केवल बाद के पृष्ठों पर लागू होता है, यदि आपके पास प्रारंभिक HTML में अधिक पृष्ठ हैं तो उनमें से सभी लोड हो जाएंगे।

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

यहां एक आधिकारिक दस्तावेज है: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

दुर्भाग्य से आप इसे अपने दस्तावेज में वर्णित नहीं ढूंढ पाएंगे। ईथर वे सोचते हैं कि यह एक आम ज्ञान है या वे मेरे अन्य विषयों की तरह इसका वर्णन करना भूल गए हैं। (jQuery मोबाइल दस्तावेज बड़ा है लेकिन कई चीजों की कमी है)।

समाधान 1

अपने दूसरे पृष्ठ में, और हर दूसरे पृष्ठ में, अपने SCRIPT टैग को BODY सामग्री में ले जाएं, इस तरह:

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

यह एक त्वरित समाधान है लेकिन अभी भी एक बदसूरत है।

कार्य उदाहरण मेरे अन्य उत्तर में यहां पाया जा सकता है: पेजअप शो चेंजेज के बाद ट्रिगर नहीं हुआ

एक और कामकाजी उदाहरण: पेज jQuery-मोबाइल संक्रमण के साथ अलग-अलग लोड किया गया

समाधान 2

अपने सभी जावास्क्रिप्ट को मूल पहले HTML में ले जाएं। सबकुछ इकट्ठा करें और इसे एक जेड फ़ाइल में एक HEAD । JQuery मोबाइल लोड होने के बाद इसे शुरू करें।

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

अंत में मैं वर्णन करूंगा कि यह एक अच्छे समाधान का हिस्सा क्यों है।

समाधान 3

अपने बटन में rel = "बाहरी" और पृष्ठ को बदलने के लिए उपयोग किए जा रहे प्रत्येक तत्व का उपयोग करें। इसके कारण पेज लोडिंग के लिए AJAX का उपयोग नहीं किया जा रहा है और आपका jQuery मोबाइल ऐप एक सामान्य वेब एप्लिकेशन की तरह व्यवहार करेगा। दुर्भाग्यवश यह आपके मामले में एक अच्छा समाधान नहीं है। फोनगैप को कभी भी सामान्य वेब ऐप के रूप में काम नहीं करना चाहिए।

<a href="#second" class="ui-btn-right" rel="external">Next</a>

आधिकारिक दस्तावेज, एक अध्याय की तलाश करें: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

यथार्थवादी समाधान

यथार्थवादी समाधान समाधान 2 का उपयोग करेगा। लेकिन समाधान 2 के विपरीत, मैं उसी index.js फ़ाइल का उपयोग करता हूं और इसे हर संभव अन्य पृष्ठ के एक HEAD के अंदर शुरू करता हूं।

अब तुम मुझसे पूछ सकते हो क्यों ?

JQuery मोबाइल की तरह Phonegap छोटी है, और जल्द या बाद में एक त्रुटि होगी और आपका ऐप असफल हो जाएगा (लोड किए गए डीओएम सहित) यदि आपकी हर जेएस सामग्री एक HTML फ़ाइल के अंदर है। डोम मिटाया जा सकता है और Phonegap आपके वर्तमान पेज को रीफ्रेश करेगा। यदि उस पृष्ठ में जावास्क्रिप्ट नहीं है कि यह तब तक काम नहीं करेगा जब तक कि इसे पुनरारंभ नहीं किया जाता है।

अंतिम शब्द

इस समस्या को एक अच्छी पेज आर्किटेक्चर के साथ आसानी से ठीक किया जा सकता है। यदि कोई दिलचस्पी लेता है तो मैंने अच्छा jQuery मोबाइल पेज आर्किटेक्चर के बारे में एक ARTICLE लिखा है। एक अखरोट खोल में मैं इस बारे में चर्चा कर रहा हूं कि कैसे jQuery मोबाइल काम सबसे महत्वपूर्ण बात है जिसे आप पहले एप बनाने में सफलतापूर्वक बनाने से पहले जानना चाहते हैं।

मैंने अपने फोनगैप + jquerymobile परियोजनाओं में रीडायरेक्ट करने के लिए $ .mobile.changepage का उपयोग किया है। हालांकि मुझे भ्रमित करने वाला यह है कि मुझे सभी पृष्ठों की लिपि को उसी फ़ाइल index.html पर रखना होगा। यदि नहीं, तो रीडायरेक्ट पृष्ठ फ़ंक्शन को उसके शीर्षलेख में निष्पादित नहीं कर सकता है।

उदाहरण के लिए, मेरा index.html $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

फिर, मेरा डिवाइस test.html पर रीडायरेक्ट करेगा जो प्रतीत होता है

$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>

हालांकि, स्क्रिप्ट test.html में कभी निष्पादित नहीं होगी। तब मैंने स्क्रिप्ट को index.html पर रखा, जो मुझे होने की उम्मीद है। जो भी हो, यदि मैं एक ही पृष्ठ पर सभी स्क्रिप्ट डालता हूं, तो परियोजना संरक्षित होने के लिए कठिन और कठिन हो जाएगी। आपकी मदद के लिए सराहना की।


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

यदि आप बारीकी से देखते हैं तो आप देखेंगे कि दूसरे पृष्ठ को लोड करते समय पिछले पृष्ठ से जेएस फाइलों को ध्यान में रखा जाता है। लेकिन अगर आप वर्तमान पृष्ठ को ताज़ा कर देते हैं तो वर्तमान पृष्ठ की जेएस फाइलें प्रभावी होंगी।

इसलिए जैसा कि मैंने पहले कहा था कि सभी एचटीएमएल फाइलों में जेएस फाइलों को आयात करना सुनिश्चित करें।

deviceready को कॉल करने की भी आवश्यकता नहीं है, अपने पेज विशिष्ट जेएस कार्यों को कॉल करने के लिए निम्नलिखित वाक्यविन्यास का उपयोग करें

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});

Jquery मोबाइल एक "पेज" लोड करने के लिए AJAX का उपयोग करता है। यहां एक "पृष्ठ" डेटा-भूमिका = पृष्ठ वाला एक div है। यदि आप एक भौतिक पृष्ठ index.html लोड करते हैं, तो आप उस पृष्ठ के अंदर किसी भी "पेज" div में परिवर्तन पृष्ठ का उपयोग करके नेविगेट कर सकते हैं।

हालांकि, अगर आप अन्य भौतिक पृष्ठ से "पृष्ठ" लोड करना चाहते हैं, तो जेक्यूएम केवल उस पृष्ठ से पहला "पृष्ठ" div लोड करेगा। वास्तव में क्या होता है कि आप पृष्ठ नहीं बदलते हैं, जेक्यूएम केवल उस विशेष "पेज" div को AJAX का उपयोग करके लोड करता है और इसे आपके वर्तमान पृष्ठ पर इंजेक्ट करता है।

आपके पास दो संभावित आर्किटेक्चर हैं जहां आपने अपने सभी "पेज" को HTML पृष्ठ में रखा है और वहां से नेविगेट किया है। या आपके पास एकाधिक पेज आर्किटेक्चर हो सकता है। आप इसे हमेशा मिश्रण कर सकते हैं।

पृष्ठ को भौतिक रूप से बदलने के लिए, आपको अपने लिंक में rel = बाहरी जोड़ना होगा।


दूसरा रास्ता:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

इस लिंक के तहत, अच्छी प्रथाएं हैं https://api.jquery.com/select/





javascript jquery html cordova jquery-mobile