jQuery मोबाइल - त्वरित गाइड

JQuery मोबाइल एक यूजर इंटरफेस फ्रेमवर्क है, जो jQuery Core पर बनाया गया है और इसका उपयोग उत्तरदायी वेबसाइटों या एप्लिकेशन को विकसित करने के लिए किया जाता है, जो मोबाइल, टैबलेट और डेस्कटॉप डिवाइस पर उपलब्ध हैं। यह मोबाइल वेब अनुप्रयोगों के लिए एपीआई सुविधाएँ प्रदान करने के लिए jQuery और jQuery UI दोनों की सुविधाओं का उपयोग करता है।

यह jQuery परियोजना टीम द्वारा वर्ष 2010 में विकसित किया गया था और जावास्क्रिप्ट में लिखा गया था।

JQuery मोबाइल का उपयोग क्यों करें?

यह वेब एप्लिकेशन बनाता है कि यह मोबाइल, टैबलेट और डेस्कटॉप डिवाइस पर उसी तरह काम करेगा।
यह अन्य फ्रेमवर्क जैसे कि PhoneGap, Whitelight, आदि के साथ संगत है।
यह टच-फ्रेंडली फॉर्म इनपुट और UI विजेट्स का एक सेट प्रदान करता है।
प्रगतिशील वृद्धि सभी मोबाइल, टैबलेट और डेस्कटॉप प्लेटफार्मों के लिए एक अनूठी कार्यक्षमता लाती है और कुशल पेज लोड और व्यापक डिवाइस समर्थन को जोड़ती है।

JQuery मोबाइल की विशेषताएं

यह jQuery Core पर बनाया गया है और "कम लिखें, अधिक करें" यूआई फ्रेमवर्क।
यह एक ओपन सोर्स फ्रेमवर्क है, और क्रॉस-प्लेटफॉर्म के साथ-साथ क्रॉस-ब्राउज़र संगत है।
यह जावास्क्रिप्ट में लिखा गया है और मोबाइल के अनुकूल साइटों के निर्माण के लिए jQuery और jQuery UI दोनों की सुविधाओं का उपयोग करता है।
यह HTML5, CCS3, jQuery और jQuery UI को न्यूनतम स्क्रिप्टिंग वाले पृष्ठ बनाने के लिए एक ढांचे में एकीकृत करता है।
इसमें अजाक्स नेविगेशन प्रणाली शामिल है जो एनिमेटेड पेज संक्रमण का उपयोग करती है।

JQuery के मोबाइल के फायदे

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

JQuery मोबाइल के नुकसान

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

इस अध्याय में, हम चर्चा करेंगे कि कैसे स्थापित करें और jQuery मोबाइल स्थापित करें।

JQuery मोबाइल डाउनलोड करें

जब आप लिंक jquerymobile.com/ खोलते हैं , तो आप देखेंगे कि jQuery मोबाइल लाइब्रेरी डाउनलोड करने के लिए दो विकल्प हैं।

Custom Download - लाइब्रेरी का कस्टमाइज्ड वर्जन डाउनलोड करने के लिए इस बटन पर क्लिक करें।
Latest Stable - jQuery मोबाइल लाइब्रेरी के स्थिर और नवीनतम संस्करण को प्राप्त करने के लिए इस बटन पर क्लिक करें।

कस्टम डाउनलोड बिल्डर के साथ डाउनलोड करें

डाउनलोड बिल्डर का उपयोग करते हुए, आप केवल लाइब्रेरी के उन हिस्सों सहित एक कस्टम बिल्ड बना सकते हैं जिनकी आपको आवश्यकता है। जब आप jQuery मोबाइल के इस नए अनुकूलित संस्करण को डाउनलोड करते हैं, तो आपको निम्न स्क्रीन दिखाई देगी।

आप अपनी आवश्यकता के अनुसार पुस्तकालयों का चयन कर सकते हैं और क्लिक कर सकते हैं Build My Download बटन।

स्थिर डाउनलोड

स्थिर बटन पर क्लिक करें, जो सीधे सीएसएस फ़ाइल को ले जाता है जिसमें सीएसएस और JQuery फाइलें होती हैं, जो jQuery के मोबाइल लाइब्रेरी के नवीनतम संस्करण के लिए है। एक jQuery मोबाइल निर्देशिका के लिए ज़िप फ़ाइल सामग्री निकालें।

इस संस्करण में सभी फाइलें शामिल हैं, जिसमें सभी निर्भरताएं, डेमो का एक बड़ा संग्रह और यहां तक कि पुस्तकालय की इकाई परीक्षण सूट भी शामिल है। यह संस्करण आरंभ करने में सहायक है।

CDN से jQuery लाइब्रेरी डाउनलोड करें

एक सीडीएन (कंटेंट डिलीवरी नेटवर्क) सर्वर का एक नेटवर्क है जो उपयोगकर्ताओं को फ़ाइलों की सेवा के लिए डिज़ाइन किया गया है। यदि आप अपने वेबपेज में एक CDN लिंक का उपयोग करते हैं, तो यह आपके सर्वर से फ़ाइलों को होस्ट करने की जिम्मेदारी बाहरी लोगों की एक श्रृंखला पर ले जाता है। इससे एक फायदा यह भी होता है कि यदि आपके वेबपेज पर कोई विज़िटर पहले से ही उसी सीडीएन से jQuery मोबाइल की कॉपी डाउनलोड करता है, तो उसे दोबारा डाउनलोड नहीं करना पड़ेगा। आप HTML दस्तावेज़ में निम्न CDN फ़ाइलों को शामिल कर सकते हैं।

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

हम इस ट्यूटोरियल में लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं। हम अपने सभी उदाहरणों को निष्पादित करने के लिए AMPPS (AMPPS एक WAMP, MAMP और Apache, MySQL, MongoDB, PHP, Perl & Python) सर्वर का उपयोग करते हैं।

उदाहरण

निम्नलिखित jQuery मोबाइल का एक सरल उदाहरण है।

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

उपरोक्त कोड का विवरण हैं -

यह कोड सिर तत्व के अंदर निर्दिष्ट किया गया है।

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

पृष्ठ ज़ूम स्तर और आयाम प्रदर्शित करने के लिए (ब्राउज़र द्वारा) निर्दिष्ट करने के लिए व्यूपोर्ट का उपयोग किया जाता है।
सामग्री = "चौड़ाई = डिवाइस-चौड़ाई" का उपयोग पृष्ठ या स्क्रीन डिवाइस की पिक्सेल चौड़ाई निर्धारित करने के लिए किया जाता है।
प्रारंभिक-स्केल = 1 प्रारंभिक ज़ूम स्तर सेट करता है, जब पृष्ठ पहली बार लोड होता है।

निम्नलिखित सीडीएन शामिल करें

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<Body> टैग के अंदर की सामग्री ब्राउज़र में प्रदर्शित एक पृष्ठ है।

<div data-role = "page">
   ...
</div>

data-role = "शीर्ष लेख" पृष्ठ के शीर्ष पर शीर्ष लेख बनाता है।
डेटा-भूमिका = "मुख्य" का उपयोग पृष्ठ की सामग्री को परिभाषित करने के लिए किया जाता है।
data-role = "footer" पृष्ठ के निचले भाग में पाद बनाता है।
class = "ui-content" में पृष्ठ सामग्री के अंदर पैडिंग और मार्जिन शामिल हैं।

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए निम्नलिखित कदम उठाएँ -

ऊपर दिए गए html कोड को इस तरह सेव करें simple_example.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/simple_example.html के रूप में खोलें और निम्न आउटपुट प्रदर्शित किया जाएगा।

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

निम्न तालिका विस्तार से पृष्ठों के प्रकारों को प्रदर्शित करती है।

अनु क्रमांक।	टाइप और विवरण
1	एक पृष्ठ टेम्पलेट लिखने के मानक तरीके का उपयोग करके HTML दस्तावेज़ में एक एकल पृष्ठ बनाया जाता है।
2	मल्टी-पेज टेम्प्लेट एकाधिक पृष्ठों को एकल HTML दस्तावेज़ में शामिल किया जा सकता है, जो डेटा-भूमिका = "पेज" के साथ कई विभाजनों को जोड़कर लोड करता है ।
3	संवाद पृष्ठ मोडल संवाद पृष्ठ के ऊपर एक इंटरैक्टिव ओवरले में खुली सामग्री को दिखाते हैं।

सम्मेलनों, आवश्यकताओं को नहीं

हेडर, फूटर, पेज और कंटेंट जैसे डेटा-रोल एट्रिब्यूट तत्वों का उपयोग किसी पेज के मूल प्रारूप और संरचना को प्रदान करने के लिए किया जाता है।
एकल पृष्ठ दस्तावेज़ों के लिए, ऑटो-इनिशियलाइज़ेशन को वैकल्पिक के रूप में सेट करने के लिए पृष्ठ आवरण आवश्यक था।
कस्टम लेआउट के साथ एक वेबपेज के लिए संरचनात्मक तत्व को बाहर रखा जा सकता है।
पृष्ठों को प्रबंधित करने के लिए, पेज रैपर फ्रेमवर्क द्वारा इंजेक्ट किया जाता है जब इसे मार्कअप द्वारा शामिल नहीं किया जाता है।

प्रीफेचिंग पेज

विशेषता डेटा-प्रीफ़ेच को शामिल करते हुए , हम एकल पृष्ठ टेम्पलेट में डोम में पृष्ठों को प्रीफ़ैच कर सकते हैं। अधिक जानकारी के लिए यहां क्लिक करें ।

डोम कैश

जब DOM में ब्राउजर मेमोरी फुल हो जाती है, तो यह मोबाइल ब्राउजर को धीमा कर देता है या कई पेज लोड होने के कारण क्रैश हो सकता है। DOM को व्यवस्थित रखने के लिए एक सरल विधि है -

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

$.mobile.page.prototype.options.domCache = true;

DOM में सभी पेजों को रखने के लिए पेज प्लगइन पर सच के रूप में domCache विकल्प सेट करें, जो पहले दौरा किया गया था।

pageContainerElement.page({ domCache: true });

jQuery मोबाइल बिल्ट-इन आइकन का एक सेट प्रदान करता है, जिसका उपयोग बटनों के साथ किया जा सकता है, बटनों को सूचीबद्ध करें जो बटनों को अधिक आकर्षक बनाएंगे।

निम्न तालिका में jQuery के मोबाइल फ्रेमवर्क में उपयोग किए गए कुछ आइकन नीचे दिए गए हैं।

अनु क्रमांक।	आइकन क्षेत्र और विवरण
1	चिह्न सेट करें यह बटन में आइकन सेट करता है।
2	पोजिशनिंग आइकन यह बटन में आइकन की स्थिति को निर्दिष्ट करता है।
3	चिह्न-केवल यह बटन में केवल एक आइकन दिखाता है।
4	आइकन छाया यह आपके बटन में एक आइकन छाया जोड़ता है।
5	सर्किल हटाना यह आइकन के चारों ओर ग्रे सर्कल को हटा देता है।
6	काले या सफेद प्रतीक यह आइकन का रंग बदलकर काला या सफेद कर देता है।
7	ऑल्ट और नॉडिस्क को मिलाकर यह आइकन के लिए ऑल्ट और नोडस्क कक्षाओं को जोड़ती है ।

यह संपत्ति के मूल्यों को बदलने की अनुमति देता है जो निर्दिष्ट अवधि से अधिक होता है और प्रत्येक राज्य के लिए विभिन्न शैलियों को लागू करके एक राज्य से दूसरे राज्य में एक तत्व का व्यवहार करता है।

निम्न तालिका में jQuery के मोबाइल फ्रेमवर्क में उपयोग किए गए कुछ पृष्ठ संक्रमणों की सूची दी गई है -

अनु क्रमांक।	संक्रमण और विवरण	पृष्ठों के लिए	संवाद के लिए
1	fade आप तत्वों को दृश्यता के अंदर और बाहर फीका कर सकते हैं।	फीका पेज	फीका संवाद
2	flip तत्वों को पीछे से अगले पृष्ठ पर पलटें।	फ्लिप पेज	फ्लिप डायलॉग
3	pop आप एक पॉपअप विंडो बना सकते हैं।	पॉप पेज	पॉप डायलॉग
4	flow वर्तमान पृष्ठ को दूर रखकर अगला पृष्ठ प्रदर्शित करें।	प्रवाह पृष्ठ	प्रवाह संवाद
5	slide आप पृष्ठ को दाईं से बाईं ओर स्लाइड कर सकते हैं।	स्लाइड पेज	स्लाइड डायलॉग
6	slidefade पृष्ठ को दाईं से बाईं ओर खिसकाता है और अगले पृष्ठ में फ़ेड हो जाता है।	Slidefade पेज	स्लाइडफेड डायलॉग
7	slideup पृष्ठ को नीचे से ऊपर तक स्लाइड करता है।	स्लाइडअप पेज	स्लाइडअप डायलॉग
8	slidedown पृष्ठ को ऊपर से नीचे की ओर खिसकाता है।	स्लेजडाउन पेज	स्लेजडाउन डायलॉग
9	turn आप अगले पृष्ठ पर जा सकते हैं।	पृष्ठ चालू करें	संवाद चालू करें
10	none आप इस विशेषता का उपयोग करके किसी भी संक्रमण प्रभाव का उपयोग नहीं कर सकते।	कोई पृष्ठ नहीं	डायलॉग कोई नहीं

संक्रमण और वैश्विक विन्यास की स्थापना

डिफ़ॉल्ट रूप से, पृष्ठ होंगे fadeढांचे में संक्रमण। आप जोड़कर कस्टम संक्रमण का उपयोग कर सकते हैंdata-transitionलिंक के लिए विशेषता। आप का उपयोग कर पेज के लिए अलग डिफ़ॉल्ट संक्रमण प्रभाव का उपयोग कर सकते हैंdefaultPageTransitionविश्व स्तर पर विकल्प। संवादों के लिए, आप इसका उपयोग कर सकते हैंdefaultDialogTransition विकल्प।

पतन का संक्रमण

सभी संक्रमण फीका संक्रमण को छोड़कर 3 डी परिवर्तनों का समर्थन करते हैं। जो उपकरण 3 डी परिवर्तन का समर्थन नहीं करते हैं, उन्हें फीका संक्रमण का उपयोग करना होगा। कुछ ब्राउज़र प्रत्येक संक्रमण प्रकार के लिए 3 डी परिवर्तनों का समर्थन नहीं करते हैं, इसलिए आप इसका उपयोग कर सकते हैंfade डिफ़ॉल्ट संक्रमण के रूप में।

संक्रमण के लिए अधिकतम स्क्रॉल

जब आप स्क्रॉल कर रहे हों या किसी पृष्ठ पर जा रहे हों, तो संक्रमण किसी पर भी सेट नहीं होता है और स्क्रॉल स्थिति डिवाइस स्क्रीन की ऊंचाई से तीन गुना अधिक होगी। कभी-कभी, आप जवाब देने में धीमे हो सकते हैं या किसी भी नेविगेशन तत्व पर क्लिक करने पर ब्राउज़र क्रैश हो सकता है; तो इससे बचने के लिए हम स्क्रॉल स्थिति का उपयोग करके संक्रमण के लिए उपयोग कर रहे हैंgetMaxScrollForTransition समारोह।

संक्रमण के लिए अधिकतम चौड़ाई

जब विंडो की चौड़ाई पिक्सेल की चौड़ाई से अधिक हो, तो आप संक्रमण को अक्षम कर सकते हैं। आप का उपयोग करके संक्रमण के लिए अधिकतम चौड़ाई कॉन्फ़िगर कर सकते हैं$.mobile.maxTransitionWidthवैश्विक विकल्प, जो डिफ़ॉल्ट रूप से गलत पर सेट है। यह पिक्सेल चौड़ाई या गलत मान जैसे मान लेता है, और यदि विंडो निर्दिष्ट मान से अधिक है, तो यह गलत मान नहीं होने पर संक्रमण सेट हो जाएगा।

एक ही पृष्ठ संक्रमण

आप वर्तमान पृष्ठ में संक्रमण का उपयोग करके जोड़ सकते हैं allowSamePageTransition पेज कंटेनर विजेट का विकल्प change() तरीका।

कस्टम संक्रमण बनाना

आप पृष्ठ का उपयोग करके कस्टम संक्रमण बना सकते हैं $.mobile.transitionHandlers वह विकल्प जो वेबसाइट या एप्लिकेशन पर संक्रमण के चयन का विस्तार करता है।

ग्रिड सिस्टम का उपयोग पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पृष्ठ लेआउट बनाने के लिए किया जाता है जो आपकी सामग्री को घर देते हैं।

नीचे दी गई तालिका में ग्रिड के प्रकारों को विस्तार से दिखाया गया है।

अनु क्रमांक।	टाइप और विवरण
1	ग्रिड jQuery मोबाइल ग्रिड सिस्टम पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पेज लेआउट बनाता है।
2	ग्रिड में बटन JQuery मोबाइल में ग्रिड प्रारूप में बटन का संग्रह।
3	कस्टम उत्तरदायी ग्रिड CSS में मीडिया प्रश्नों का उपयोग करके मूल ग्रिड शैली को आसानी से कस्टम उत्तरदायी लेआउट में विस्तारित किया जा सकता है।

एक विजेट एक छोटा गैजेट या आपके jQuery मोबाइल एप्लिकेशन का नियंत्रण है। विजेट बहुत उपयोगी हो सकते हैं क्योंकि वे आपको अपने घर स्क्रीन पर अपने पसंदीदा एप्लिकेशन डालने की अनुमति देते हैं ताकि आप उन्हें जल्दी से एक्सेस कर सकें।

निम्न तालिका विस्तार से विजेट के प्रकार प्रदर्शित करती है।

अनु क्रमांक।	टाइप और विवरण
1	बटन यह क्लिक करने योग्य बटन को निर्दिष्ट करता है जिसमें पाठ या चित्र जैसी सामग्री शामिल होती है।
2	चेक बॉक्स चेकबॉक्स का उपयोग तब किया जाता है जब एक से अधिक विकल्प का चयन करना आवश्यक होता है।
3	Radiobox कई विकल्पों में से रेडियो बटन का उपयोग किया जाता है, बस एक विकल्प का चयन करना आवश्यक है।
4	खजूर बीनने वाला यह एक छोटे से ओवरले में एक इंटरैक्टिव कैलेंडर खोलने के लिए इनपुट पर केंद्रित है।
5	खुलने और बंधनेवाला जब भी उस पर क्लिक किया जाता है, तो बंधनेवाला आपको सामग्री का विस्तार या पतन करने देता है। यह मोबाइल डिवाइस के लिए बहुत सहायक है, जो एक संक्षिप्त सामग्री प्रस्तुत करता है।
6	नियंत्रण समूह नियंत्रणसमूह एक एकल ब्लॉक को निर्दिष्ट करने के लिए बटन का एक सेट प्रदान करता है जो नेविगेशन घटक की तरह दिखता है।
7	फिल्टर किया डेटा-फ़िल्टर = "सही" विशेषता का उपयोग करके , आप किसी भी तत्व के बच्चों को फ़िल्टर कर सकते हैं।
8	फ्लिप स्विच फ्लिप स्विच आपको बूलियन स्टाइल इनपुट के लिए उस पर क्लिक करके / बंद या सही / गलत स्विच बंद करने की अनुमति देता है।
9	सूची दृश्य सूचियों घटक का उद्देश्य सूचियों में जटिल और अनुकूलित सामग्री को प्रस्तुत करना है।
10	लोडर JQuery मोबाइल एक तत्व को लोड करने के विभिन्न तरीके प्रदान करता है।
1 1	नेवबार नेवबार विजेट बटन का एक सेट है जो आपको अन्य वेब पेज या अनुभागों से जोड़ता है।
12	पैनलों बक्से में DOM घटकों को प्रदर्शित करने के लिए पैनलों का उपयोग किया जाता है।
13	पॉप अप पॉपअप एक उपयोगकर्ता इंटरफ़ेस है जो पाठ, चित्र और अन्य सामग्री को प्रदर्शित करने के लिए एक छोटी खिड़की के भीतर दिखाई देता है।
14	Rangeslider Rangeslider विजेट आपको एक संख्यात्मक मूल्य सीमा का चयन करने की अनुमति देता है।
15	मेनू चुनें एक चयन मेनू ड्रॉपडाउन सूची के रूप में विभिन्न विकल्प प्रदान करता है, जहां से उपयोगकर्ता एक या अधिक विकल्प चुन सकता है।
16	स्लाइडर स्लाइडर स्लाइडर के हैंडल को स्लाइड करके आपको एक मान चुनने की अनुमति देता है।
17	टेबल jQuery मोबाइल पंक्तियों और स्तंभों के संदर्भ में डेटा का प्रतिनिधित्व करने के लिए तालिका का उपयोग करता है, अर्थात डेटा को एक सारणीबद्ध प्रारूप में प्रदर्शित करता है।
18	टैब टैब विजेट jQuery के यूआई टैब विजेट का विस्तार है, जो सभी तरीकों और विकल्पों को स्वीकार करता है।
19	पाठ इनपुट <Input> टैग का उपयोग इनपुट तत्व घोषित करने के लिए किया जाता है, एक नियंत्रण जो उपयोगकर्ता को इनपुट डेटा की अनुमति देता है।
20	उपकरण पट्टी JQuery मोबाइल टूलबार विजेट आपको हेडर और फुटर बनाने की अनुमति देता है।

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

निम्न तालिका मोबाइल उपकरणों के लिए कुछ घटनाओं को सूचीबद्ध करती है, जो कि jQuery मोबाइल द्वारा समर्थित हैं।

अनु क्रमांक।	घटना विवरण
1	jQuery मोबाइल घटनाएँ जब उपयोगकर्ता किसी निश्चित पृष्ठ पर क्लिक करता है या किसी तत्व, आदि पर माउस को घुमाता है, तो यह उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया करता है।
2	jQuery के टच इवेंट्स जब उपयोगकर्ता स्क्रीन को छूता है तो यह स्पर्श कार्यक्रम प्रदान करता है।
3	jQuery के स्क्रॉल इवेंट उपयोगकर्ता द्वारा ऊपर और नीचे स्क्रॉल करने पर यह स्क्रॉल इवेंट को आग लगा देता है।
4	jQuery के ओरिएंटेशन इवेंट जब उपयोगकर्ता डिवाइस को लंबवत या क्षैतिज रूप से घुमाता है तो यह ओरिएंटेशन इवेंट को ट्रिगर करता है।
5	jQuery पृष्ठ घटनाएँ जब उपयोगकर्ता पृष्ठ छुपाता है, बनाता है, लोड करता है, या पेजों को उतारता है, तो यह पृष्ठ घटनाओं को प्रदान करता है।

रूपों का निर्माण आसान और बहुत लचीला है, जो मानकीकृत फॉर्म तत्वों और बटन के संयोजन के साथ बनाया गया है।

निम्न तालिका विस्तार से फ़ॉर्म के प्रकार प्रदर्शित करती है।

अनु क्रमांक।	टाइप और विवरण
1	फॉर्म बेसिक jQuery मोबाइल फॉर्म के लिए शक्तिशाली, आसान और बहुमुखी लेआउट सिस्टम प्रदान करता है, जो फॉर्म स्टाइल, इनपुट बटन और स्लाइडर समर्थन को जोड़ता है।
2	फार्म इनपुट्स <इनपुट> टैग एक नियंत्रण है जो उपयोगकर्ता को डेटा इनपुट करने की अनुमति देता है।
3	फॉर्म का चयन करें विकल्प के रूप में, चयन मेनू के लिए एक ड्रॉपडाउन सूची प्रदान की जाती है।
4	फॉर्म स्लाइडर्स स्लाइडर स्लाइडर के हैंडल को स्लाइड करके आपको एक मान चुनने की अनुमति देता है।
5	फार्म तत्वों की रिफ्रेशिंग और ऑटो इनिशियलाइज़ेशन रीफ़्रेश विधि का उपयोग स्वयं द्वारा प्रपत्र नियंत्रण की नई स्थिति को अपडेट करने और जावास्क्रिप्ट के साथ फ़ॉर्म नियंत्रण को अपडेट करने के लिए किया जाता है।

यह बटन, नावबार, ब्लॉक, लिंक आदि पर विभिन्न प्रकार की थीम सेट करता है। आप डेटा-थीम विशेषता का उपयोग करके थीम सेट कर सकते हैं ।

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

अनु क्रमांक।	कार्यक्षमता और विवरण
1	विषयों यह एप्लिकेशन के रूप को अनुकूलित करने के लिए थीम "ए" और थीम "बी" जैसे दो अलग-अलग प्रकार के विषय प्रदान करता है।
2	डायलॉग में हैमर और पाद शीर्ष लेख और पाद लेख के लिए विषय को संवाद बॉक्स में सेट करता है।
3	बमिंग बटन, प्रतीक और पॉपअप बटन, आइकन और पॉपअप के लिए थीम निर्दिष्ट करता है।
4	हेडर और फुटर में थिंग बटन्स शीर्ष लेख और पाद लेख में बटन के लिए विषय प्रदर्शित करता है।
5	थिम नेविगेशन बार शीर्ष लेख या पाद लेख में नेविगेशन बार के लिए विषय को लागू करता है।
6	पैनिंग पैनल्स आप पैनल के लिए थीम लागू कर सकते हैं।
7	कोलेप्सिबल बटन और स्प्लिट बटन टूटने योग्य और विभाजित बटन के लिए विषय प्रदर्शित करता है।
8	थिंग लिस्ट्स और कोलैप्सेबल लिस्ट्स सूचियों और बंधनेवाला सूचियों के लिए विषय प्रदर्शित करता है।
9	बंधनेवाला रूप आप रूपों के लिए विषय को लागू कर सकते हैं।

jQuery के CSS क्लासेस

नीचे दिए गए अनुभागों में वर्णित तत्वों को स्टाइल करने के लिए आप विभिन्न प्रकार के CSS वर्गों का उपयोग कर सकते हैं।

ग्लोबल क्लासेस

निम्नलिखित वर्गों को jQuery के मोबाइल विजेट पर वैश्विक कक्षाओं के रूप में इस्तेमाल किया जा सकता है -

अनु क्रमांक।	कक्षा और विवरण
1	ui-corner-all यह गोल कोनों के साथ तत्वों को प्रदर्शित करता है।
2	ui-shadow यह तत्वों के लिए छाया प्रदर्शित करता है।
3	ui-overlay-shadow यह तत्वों के लिए ओवरले छाया प्रदर्शित करता है।
4	ui-mini यह छोटे तत्वों को प्रदर्शित करता है।

बटन कक्षाएं

निम्न तालिका उन बटन वर्गों को सूचीबद्ध करती है जिनका उपयोग एंकर या बटन तत्वों के साथ किया जाता है -

अनु क्रमांक।	कक्षा और विवरण
1	ui-btn यह निर्दिष्ट करता है कि तत्व को बटन के रूप में स्टाइल किया जाएगा।
2	ui-btn-inline यह इनलाइन तत्व के रूप में बटन को दिखाता है जो लेबल के लिए आवश्यकतानुसार जगह बचाता है।
3	ui-btn-icon-top यह टेक्स्ट के ऊपर आइकन को रखता है।
4	ui-btn-icon-right यह टेक्स्ट के दाईं ओर आइकन रखता है।
5	ui-btn-icon-bottom यह टेक्स्ट के नीचे आइकन रखता है।
6	ui-btn-icon-left यह टेक्स्ट के बचे हुए आइकन को रखता है।
7	ui-btn-icon-notext यह एकमात्र आइकन दिखाता है।
8	ui-btn-a\|b यह बटन का रंग प्रदर्शित करता है ("ए" डिफ़ॉल्ट पृष्ठभूमि का रंग होगा यानी ग्रे और "बी" पृष्ठभूमि का रंग बदलकर काला हो जाएगा)।

चिह्न वर्ग

निम्न तालिका आइकन वर्ग को सूचीबद्ध करती है जो लंगर या बटन तत्वों के साथ उपयोग किए जाते हैं -

अनु क्रमांक।	कक्षा और विवरण
1	ui-icon-action यह एक्शन आइकन दिखाता है।
2	ui-icon-alert यह एक त्रिकोण के अंदर विस्मयादिबोधक चिह्न प्रदर्शित करता है।
3	ui-icon-arrow-d-l यह बाएँ तीर के साथ निर्दिष्ट करता है।
4	ui-icon-arrow-d-r यह सही तीर के साथ नीचे निर्दिष्ट करता है।
5	ui-icon-arrow-u-l यह बाएं तीर के साथ निर्दिष्ट करता है।
6	ui-icon-arrow-u-r यह सही तीर के साथ निर्दिष्ट करता है।
7	ui-icon-arrow-l यह बाएं तीर को निर्दिष्ट करता है।
8	ui-icon-arrow-r यह सही तीर को निर्दिष्ट करता है।
9	ui-icon-arrow-u यह ऊपर तीर को निर्दिष्ट करता है।
10	ui-icon-arrow-d यह डाउन एरो को निर्दिष्ट करता है।
1 1	ui-icon-bars यह 3 क्षैतिज पट्टियों को एक के ऊपर एक दिखाता है।
12	ui-icon-bullets यह 3 क्षैतिज गोलियों को एक के ऊपर एक दिखाता है।
13	ui-icon-carat-d यह कैरेट को नीचे प्रदर्शित करता है।
14	ui-icon-carat-l यह कैरेट को बाईं ओर प्रदर्शित करता है।
15	ui-icon-carat-r यह कैरेट को दाईं ओर प्रदर्शित करता है।
16	ui-icon-carat-u यह कैरेट को ऊपर तक प्रदर्शित करता है।
17	ui-icon-check यह चेकमार्क आइकन दिखाता है।
18	ui-icon-comment यह टिप्पणी या संदेश को निर्दिष्ट करता है।
19	ui-icon-forbidden यह निषिद्ध आइकन प्रदर्शित करता है।
20	ui-icon-forward यह आगे दिए गए आइकन को निर्दिष्ट करता है।
21	ui-icon-navigation यह नेविगेशन आइकन निर्दिष्ट करता है।
22	ui-icon-recycle यह रीसायकल आइकन प्रदर्शित करता है।
23	ui-icon-refresh यह रिफ्रेश आइकन दिखाता है।
24	ui-icon-tag यह टैग आइकन को दर्शाता है।
25	ui-icon-video यह वीडियो या कैमरा आइकन को इंगित करता है।

थीम कक्षाएं

यह एप्लिकेशन के रूप को अनुकूलित करने के लिए थीम "ए" और थीम "बी" जैसे दो अलग-अलग प्रकार के विषय प्रदान करता है। आप स्वैच लेटर (az) को जोड़कर अपनी खुद की थीम क्लासेस बना सकते हैं। निम्न तालिका सूचियाँ थीम कक्षाएं जो अक्षर ए से जेड तक निर्दिष्ट हैं।

अनु क्रमांक।	कक्षा और विवरण
1	ui-bar-(a-z) यह पेज में हेडर, फुटर और अन्य बार सहित बार के लिए रंग प्रदर्शित करता है।
2	ui-body-(a-z) यह सूची, पॉपअप, स्लाइडर्स, पैनल, लोडर आदि सहित सामग्री ब्लॉक के लिए रंग प्रदर्शित करता है।
3	ui-btn-(a-z) यह बटन के लिए रंग प्रदर्शित करता है।
4	ui-group-theme-(a-z) यह नियंत्रण समूह, सूची, और बंधनेवाला सेट के लिए रंग प्रदर्शित करता है।
5	ui-overlay-(a-z) यह पॉपअप, संवाद और पृष्ठ कंटेनरों के लिए पृष्ठभूमि का रंग प्रदर्शित करता है।
6	ui-page-theme-(a-z) यह पृष्ठों के लिए रंग प्रदर्शित करता है।

ग्रिड कक्षाएं

निम्न तालिका सूची ग्रिड वर्गों को समान चौड़ाई, कोई सीमा, पृष्ठभूमि, मार्जिन या पैडिंग के साथ उपयोग किया जाता है।

अनु क्रमांक।	ग्रिड क्लास	कॉलम	स्तंभ चौड़ाई	से मेल खाती है
1	ui-ग्रिड एकल	1	100%	ui-ब्लॉक-एक
2	ui ग्रिड-एक	2	50% / 50%	ui-ब्लॉक-a \| b
3	ui ग्रिड-बी	3	33% / 33% / 33%	ui-ब्लॉक-a \| b \| ग
4	ui ग्रिड-सी	4	25% / 25% / 25% / 25%	ui-ब्लॉक-a \| b \| ग \| घ
5	ui ग्रिड-डी	5	20% / 20% / 20% / 20% / 20%	ui-ब्लॉक-a \| b \| ग \| घ \| ई

बटन

यह एक क्लिक करने योग्य बटन निर्दिष्ट करता है जिसमें वर्ग यूआई-बीटीएन का उपयोग करके पाठ या चित्र जैसी सामग्री शामिल है । यह संस्करण 1.4 में पदावनत है। का प्रयोग करें ui-btn उपयोग करने के बजाए विशेषता डेटा भूमिका = "बटन" विशेषता।

निम्न तालिका सूची बटन तत्वों को डेटा विशेषता के साथ उपयोग करती है।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-corners यह परिभाषित करता है कि बटन में गोल कोनों होना चाहिए या नहीं।	सच \| असत्य
2	data-icon यह बटन के आइकन को परिभाषित करता है।	डिफ़ॉल्ट कोई आइकन नहीं है
3	data-iconpos यह आइकन की स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| शीर्ष \| तल
4	data-iconshadow यह परिभाषित करता है कि बटन के आइकन में छाया होना चाहिए या नहीं।	सच \| असत्य
5	data-inline यह परिभाषित करता है कि बटन इनलाइन होना चाहिए या नहीं।	सच \| असत्य
6	data-mini यह परिभाषित करता है कि बटन को छोटे आकार में प्रदर्शित करना चाहिए या नियमित आकार में।	सच \| असत्य
7	data-shadow यह परिभाषित करता है कि बटन में छाया होना चाहिए या नहीं।	सच \| असत्य
8	data-theme यह बटन के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)

चेक बॉक्स

निम्न तालिका सूचियों के साथ उपयोग किए जाने वाले चेकबॉक्स तत्वों को सूचीबद्ध करती है type = "checkbox"।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-mini यह परिभाषित करता है कि चेकबॉक्स को छोटे आकार या नियमित आकार में प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
2	data-role यह बटन के रूप में चेकबॉक्स की स्टाइल को रोकता है।	कोई नहीं
3	data-theme यह चेकबॉक्स के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)

खुलने और बंधनेवाला

निम्नलिखित तालिका सूचियों के साथ प्रयोग किए जाने वाले बंधनेवाला तत्वों को सूचीबद्ध करता है data-role = "collapsible" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-collapsed यह इंगित करता है कि क्या सामग्री को बंद या विस्तारित किया जाना चाहिए।	सच \| असत्य
2	data-collapsed-cue-text यह स्क्रीन रीडर सॉफ्टवेयर वाले उपयोगकर्ताओं के लिए प्रतिक्रिया प्रदर्शित करता है।	डिफ़ॉल्ट सामग्री ढह रही है
3	data-collapsed-icon यह बंधनेवाला बटन के आइकन को परिभाषित करता है।	डिफ़ॉल्ट आइकन "प्लस" है
4	data-content-theme यह बंधनेवाला सामग्री के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)
5	data-expanded-cue-text यह स्क्रीन रीडर सॉफ्टवेयर वाले उपयोगकर्ताओं के लिए प्रतिक्रिया प्रदर्शित करता है।	डिफ़ॉल्ट सामग्री का विस्तार कर रहा है
6	data-expanded-icon जब आप सामग्री का विस्तार करते हैं तो यह बंधनेवाला बटन प्रदर्शित करता है।	डिफ़ॉल्ट आइकन "माइनस" है
7	data-iconpos यह आइकन की स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| शीर्ष \| तल
8	data-inset यह परिभाषित करता है कि क्या बंधनेवाला बटन गोल कोनों और मार्जिन के साथ प्रदर्शित होना चाहिए या नहीं।	सच \| असत्य
9	data-mini यह परिभाषित करता है कि क्या बंधनेवाला बटन छोटे आकार या नियमित आकार में प्रदर्शित होना चाहिए।	सच \| असत्य
10	data-theme यह बंधनेवाला बटन के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)

बंधनेवाला सेट

निम्न तालिका सूचियों के साथ उपयोग किए गए बंधनेवाला सेट तत्वों को सूचीबद्ध करती है data-role = "collapsibleset" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-collapsed-icon यह बंधनेवाला बटन के आइकन को परिभाषित करता है।	डिफ़ॉल्ट आइकन "प्लस" है
2	data-content-theme यह बंधनेवाला सामग्री के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)
3	data-expanded-icon जब आप सामग्री का विस्तार करते हैं तो यह बंधनेवाला बटन प्रदर्शित करता है।	डिफ़ॉल्ट आइकन "माइनस" है
4	data-iconpos यह आइकन की स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| शीर्ष \| तल
5	data-inset यह परिभाषित करता है कि क्या बंधनेवाला बटन गोल कोनों और मार्जिन के साथ प्रदर्शित होना चाहिए या नहीं।	सच \| असत्य
6	data-mini यह परिभाषित करता है कि क्या बंधनेवाला बटन छोटे आकार या नियमित आकार में प्रदर्शित होना चाहिए।	सच \| असत्य
7	data-theme यह बंधनेवाला बटन के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)

नियंत्रण समूह

निम्न तालिका सूचियों के साथ कंट्रोलग्रुप तत्वों का उपयोग किया जाता है data-role = "controlgroup" विशेषता -

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-exclude-invisible यह परिभाषित करता है कि गोल कोनों के असाइनमेंट में अदृश्य बच्चों को बाहर करना है या नहीं।	सच \| असत्य
2	data-mini यह परिभाषित करता है कि समूह को छोटे आकार या नियमित आकार में प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
3	data-theme यह नियंत्रण समूह के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)
4	data-type यह इंगित करता है कि समूह को क्षैतिज या ऊर्ध्वाधर प्रारूप में प्रदर्शित करना चाहिए या नहीं।	क्षैतिज \| खड़ा

संवाद

निम्न तालिका सूचियों के साथ उपयोग किए गए संवाद तत्व हैं data-dialog="true" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-close-btn यह क्लोज बटन की स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| कोई नहीं
2	data-close-btn-text यह क्लोज बटन के लिए टेक्स्ट को परिभाषित करता है।	टेक्स्ट
3	data-corners यह परिभाषित करता है कि डायल को गोल कोनों के साथ प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
4	data-dom-cache यह इंगित करता है कि डोम कैश स्पष्ट होना चाहिए या व्यक्तिगत पृष्ठों के लिए नहीं।	सच \| असत्य
5	data-overlay-theme यह संवाद पृष्ठ के ओवरले रंग को परिभाषित करता है।	पत्र (az)
6	data-theme यह संवाद पृष्ठ के विषय रंग को परिभाषित करता है।	पत्र (az)
7	data-title यह संवाद पृष्ठ के शीर्षक को परिभाषित करता है।	टेक्स्ट

वृद्धि

निम्न तालिका सूचियों में वृद्धि करने वाले तत्वों का उपयोग किया जाता है data-enhance="false" or data-ajax = "false" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-enhance आप इस विशेषता को "सत्य" पर सेट करके पृष्ठ को स्टाइल कर सकते हैं। यदि यह "गलत" पर सेट है तो आप पृष्ठ को स्टाइल नहीं कर सकते।	सच \| असत्य
2	data-ajax यह इंगित करता है कि पृष्ठों को अजाक्स से लोड होना चाहिए या नहीं।	सच \| असत्य

फिक्स्ड टूलबार

निम्न तालिका सूची टूलबार तत्वों का उपयोग करती है data-position = "fixed" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-disable-page-zoom यह परिभाषित करता है कि उपयोगकर्ता पृष्ठ को स्केल / ज़ूम करने में सक्षम है या नहीं।	सच \| असत्य
2	data-fullscreen यह परिभाषित करता है कि टूलबार को ऊपर और / या नीचे स्थित किया जाना चाहिए।	सच \| असत्य
3	data-tap-toggle यह इंगित करता है कि उपयोगकर्ता नल पर टूलबार-दृश्यता को टॉगल कर सकता है या नहीं।	सच \| असत्य
4	data-transition जब आप तत्व को टैप या क्लिक करते हैं तो यह एक संक्रमण प्रभाव दिखाता है।	स्लाइड \| फीका \| कोई नहीं
5	data-update-page-padding यह आकार परिवर्तन, परिवर्तन और लेआउट घटनाओं को अपडेट करके पृष्ठ की पैडिंग को अद्यतन करता है।	सच \| असत्य
6	data-visible-on-page-show जब मूल पृष्ठ दिखाया जाता है तो यह टूलबार-दृश्यता को परिभाषित करता है।	सच \| असत्य

फ्लिप टॉगल स्विच

निम्न तालिका के साथ उपयोग किए जाने वाले फ्लिप टॉगल तत्वों को सूचीबद्ध करता है data-role = "flipswitch" विशेषता -

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-mini यह परिभाषित करता है कि स्विच को छोटे आकार या नियमित आकार में प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
2	data-on-text यह फ्लिप स्विच पर "ऑन" टेक्स्ट को परिभाषित करता है।	डिफ़ॉल्ट "चालू" है
3	data-off-text यह फ्लिप स्विच पर "बंद" पाठ को परिभाषित करता है।	डिफ़ॉल्ट "बंद" है

फ़ुटबाल

निम्न तालिका डेटा-भूमिका = "पाद" विशेषता के साथ उपयोग किए जाने वाले पाद लेखों को सूचीबद्ध करती है -

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-id यह यूनिक आईडी को परिभाषित करता है।	टेक्स्ट
2	data-position यह परिभाषित करता है कि पाद को पृष्ठ सामग्री के साथ नीचे या इनलाइन पर स्थित किया जाना चाहिए।	इनलाइन \| तय
3	data-fullscreen यह परिभाषित करता है कि पाद को नीचे या पृष्ठ सामग्री पर स्थित किया जाना चाहिए या नहीं।	सच \| असत्य
4	data-theme यह पाद लेख के विषय रंग को परिभाषित करता है।	पत्र (az)

हैडर

निम्न तालिका सूचियों के साथ उपयोग किए गए शीर्ष लेख तत्वों को सूचीबद्ध करती है data-role = "header" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-id यह यूनिक आईडी को परिभाषित करता है।	टेक्स्ट
2	data-position यह परिभाषित करता है कि शीर्ष लेख को पृष्ठ सामग्री के साथ नीचे या इनलाइन पर स्थित होना चाहिए या नहीं।	इनलाइन \| तय
3	data-fullscreen यह परिभाषित करता है कि शीर्ष लेख को पृष्ठ सामग्री पर नीचे और ऊपर स्थित होना चाहिए या नहीं।	सच \| असत्य
4	data-theme यह हेडर के थीम कलर को परिभाषित करता है।	पत्र (az)

इनपुट

निम्न तालिका सूची इनपुट तत्वों का उपयोग करती है type = "text|search|etc" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-clear-btn यह परिभाषित करता है कि इनपुट तत्व में स्पष्ट बटन होना चाहिए या नहीं।	सच \| असत्य
2	data-clear-btn-text यह स्पष्ट बटन के लिए पाठ को परिभाषित करता है।	टेक्स्ट
3	data-mini यह परिभाषित करता है कि इनपुट छोटे आकार या नियमित आकार में प्रदर्शित होना चाहिए या नहीं।	सच \| असत्य
4	data-role यह बटन के रूप में स्टाइल इनपुट या पाठ क्षेत्रों को रोकता है।	कोई नहीं
5	data-theme यह इनपुट तत्व के विषय रंग को परिभाषित करता है।	पत्र (az)

संपर्क

निम्न तालिका jQuery मोबाइल के साथ उपयोग किए गए लिंक तत्वों को सूचीबद्ध करती है।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-ajax यह इंगित करता है कि पृष्ठों को अजाक्स के माध्यम से लोड किया जाना चाहिए या नहीं।	सच \| असत्य
2	data-direction इसका उपयोग उल्टा संक्रमण के लिए किया जाता है।	उलटना
3	data-dom-cache यह इंगित करता है कि पृष्ठों के लिए jQuery डोम कैश स्पष्ट होना चाहिए या नहीं।	सच \| असत्य
4	data-prefetch इसका उपयोग डोम में पृष्ठों को प्रीफ़ैच करने के लिए किया जाता है।	सच \| असत्य
5	data-rel यह लिंक के व्यवहार को निर्दिष्ट करता है।	पीछे \| संवाद \| बाहरी \| पॉप अप
6	data-transition यह एक पृष्ठ से दूसरे पृष्ठ में संक्रमण को परिभाषित करता है।	फीका \| पलटें \| प्रवाह \| पॉप \| स्लाइड \| स्लेजडाउन \| स्लाइडफेड \| स्लाइडअप \| बारी \| कोई नहीं
7	data-position-to यह पॉपअप बॉक्स की स्थिति को परिभाषित करता है।	मूल \| jQuery चयनकर्ता \| खिड़की

सूची

निम्न तालिका के साथ उपयोग किए गए सूची तत्वों को दिखाया गया है data-role = "listview" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-autodividers यह सूची को स्वचालित रूप से विभाजित करता है।	सच \| असत्य
2	data-count-theme यह गिनती तत्व के विषय रंग को परिभाषित करता है।	पत्र (az)
3	data-divider-theme यह सूची विभक्त के लिए थीम रंग को परिभाषित करता है।	पत्र (az)
4	data-filter इसका उपयोग खोज बॉक्स में सूची मानों को फ़िल्टर करने के लिए किया जाता है।	सच \| असत्य
5	data-filter-placeholder यह खोज बॉक्स के अंदर कुछ पाठ को परिभाषित करता है।	टेक्स्ट
6	data-filter-theme यह खोज फ़िल्टर के लिए थीम रंग को परिभाषित करता है।	पत्र (az)
7	data-icon यह सूची के लिए आइकन प्रदान करता है।	डिफ़ॉल्ट कोई आइकन नहीं है
8	data-inset यह परिभाषित करता है कि सूची को गोल कोनों और मार्जिन के साथ प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
9	data-split-icon यह विभाजन बटन के लिए आइकन को परिभाषित करता है।	डिफ़ॉल्ट आइकन "एरो-आर" है
10	data-split-theme यह विभाजन बटन के लिए थीम रंग को परिभाषित करता है।	पत्र (az)
1 1	data-theme यह सूची के लिए थीम रंग को परिभाषित करता है।	पत्र (az)

सामग्री सूचीबद्ध करें

तालिका के बाद सूची आइटम तत्वों का उपयोग किया जाता है data-role = "listview" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-filtertext इसका उपयोग खोज बॉक्स में पाठ का उपयोग करके सूची मानों को फ़िल्टर करने के लिए किया जाता है।	टेक्स्ट
2	data-icon यह सूची आइटम के लिए आइकन प्रदान करता है।	डिफ़ॉल्ट कोई आइकन नहीं है
3	data-role यह सूची मदों के लिए विभक्त को परिभाषित करता है।	सूची-विभक्त
4	data-theme यह सूची आइटम के लिए थीम रंग को परिभाषित करता है।	पत्र (az)

नेवबार

निम्नलिखित तालिका सूचियों के साथ उपयोग किए जाने वाले नवबार तत्वों को सूचीबद्ध करती है data-role = "navbar" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-icon यह सूची आइटम के लिए आइकन प्रदान करता है।	डिफ़ॉल्ट कोई आइकन नहीं है
2	data-iconpos यह आइकन के लिए स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| शीर्ष \| नीचे \| कोई पाठ नहीं है

पृष्ठ

निम्नलिखित तालिका उन पृष्ठ तत्वों को सूचीबद्ध करती है जिनका उपयोग किया जाता है data-role = "page" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-dom-cache यह इंगित करता है कि डोम कैश स्पष्ट होना चाहिए या व्यक्तिगत पृष्ठों के लिए नहीं।	सच \| असत्य
2	data-overlay-theme यह संवाद पृष्ठों के ओवरले रंग को परिभाषित करता है।	पत्र (az)
3	data-theme यह पृष्ठ के लिए थीम रंग को परिभाषित करता है।	पत्र (az)
4	data-title यह पृष्ठ के लिए शीर्षक प्रदान करता है।	डिफ़ॉल्ट कोई आइकन नहीं है
5	data-url इसका उपयोग URL को अपडेट करने के लिए किया जाता है।	यूआरएल

पॉप अप

निम्न तालिका सूची में प्रयुक्त पॉपअप तत्वों को सूचीबद्ध करती है data-role = "popup" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-corners यह परिभाषित करता है कि पॉपअप को गोल कोनों और मार्जिन के साथ प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
2	data-dismissible यह परिभाषित करता है कि पॉपअप को बाहर क्लिक करके पास होना चाहिए या नहीं।	सच \| असत्य
3	data-history यह परिभाषित करता है कि क्या पॉपअप को खोला जाने पर आइटम के इतिहास को प्रदर्शित करना चाहिए।	सच \| असत्य
4	data-overlay-theme यह पॉपअप बॉक्स के ओवरले रंग को परिभाषित करता है।	पत्र (az)
5	data-shadow यह पॉपअप बॉक्स के लिए छाया प्रदर्शित करता है।	सच \| असत्य
6	data-theme यह पॉपअप बॉक्स के लिए थीम रंग को परिभाषित करता है।	पत्र (az)
7	data-tolerance यह खिड़की के किनारों को परिभाषित करता है।	30, 15, 30, 15

रेडियो बटन

निम्न तालिका सूची रेडियो बटन तत्वों का उपयोग करती है type = "radio" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-mini यह परिभाषित करता है कि बटन को छोटे आकार में प्रदर्शित करना चाहिए या नियमित आकार में।	सच \| असत्य
2	data-role यह बढ़ाया बटनों के रूप में रेडियो बटन की स्टाइल को रोकता है।	कोई नहीं
3	data-theme यह रेडियो बटन के लिए थीम रंग को परिभाषित करता है।	पत्र (az)

चुनते हैं

निम्न तालिका में jQuery मोबाइल के साथ उपयोग किए गए चुनिंदा तत्वों को सूचीबद्ध किया गया है।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-icon यह चुनिंदा तत्व के लिए आइकन प्रदान करता है।	डिफ़ॉल्ट "एरो-डी" है
2	data-iconpos यह आइकन की स्थिति को परिभाषित करता है।	छोड़ दिया \| सही \| शीर्ष \| तल
3	data-inline यह परिभाषित करता है कि बटन इनलाइन होना चाहिए या नहीं।	सच \| असत्य
4	data-mini यह परिभाषित करता है कि क्या चयन छोटे आकार या नियमित आकार में प्रदर्शित होना चाहिए।	सच \| असत्य
5	data-native-menu यह कस्टम मेनू का उपयोग करता है जब इसे गलत पर सेट किया गया हो।	सच \| असत्य
6	data-overlay-theme यह कस्टम चयन मेनू के लिए ओवरले रंग को परिभाषित करता है।	पत्र (az)
7	data-placeholder इसका उपयोग गैर-देशी चयन के एक विकल्प तत्व को सेट करने के लिए किया जाता है।	सच \| असत्य
8	data-role यह चुनिंदा तत्वों के स्टाइल को बटन के रूप में रोकता है।	कोई नहीं
9	data-theme यह चुनिंदा तत्वों के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)

स्लाइडर

निम्न तालिका सूचियों में प्रयुक्त स्लाइडर तत्वों को सूचीबद्ध करती है type = "range" विशेषता।

अनु क्रमांक।	डेटा-विशेषता और विवरण	मूल्य
1	data-highlight यह स्लाइडर पर प्रकाश डालता है।	सच \| असत्य
2	data-mini यह परिभाषित करता है कि स्लाइडर को छोटे आकार या नियमित आकार में प्रदर्शित करना चाहिए या नहीं।	सच \| असत्य
3	data-role यह बटन के रूप में स्लाइडर नियंत्रण की स्टाइल को रोकता है।	कोई नहीं
4	data-theme यह स्लाइडर नियंत्रण के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)
5	data-track-theme यह स्लाइडर ट्रैक के लिए थीम रंग प्रदर्शित करता है।	पत्र (az)