jQuery मोबाइल - सीएसएस कक्षाएं
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 | ग | घ | ई |