जक्वी मोबाइल थीम

जक्वी मोबाइल थीम

jQuery Mobile प्रदान करता है पांच विभिन्न शैली थीम, 'a' से 'e' तक - हर थीम विभिन्न रंग के बटन, टैब, सामग्री ब्लॉक आदि के साथ आती है। jQuery Mobile का एक थीम कई दृश्यमान प्रभावों और रंगों से बना है।

अपने अनुप्रयोग के रूप को अनुकूलित करने के लिए, data-theme अटीबूट का उपयोग करें, और इस अटीबूट को एक अक्षर आवंटित करें:

<div data-role="page" data-theme="a|b|c|d|e">
मूल्य वर्णन उदाहरण
a मूलभूत. काले पृष्ठभूमि पर सफेद लेख. परीक्षण
b भूरे पृष्ठभूमि पर सफेद लेख / ग्रे पृष्ठभूमि पर काला लेख परीक्षण
c उज्ज्वला ग्रे पृष्ठभूमि पर काला लेख परीक्षण
d सफेद पृष्ठभूमि पर काला लेख परीक्षण
e नारंगी पृष्ठभूमि पर काला लेख परीक्षण

सूचना:आपकी पसंद की थीम को मिश्रित करें!

मूलभूत रूप से, jQuery Mobile पृष्ठशीर्ष और पृष्ठपाद के लिए "a" थीम का उपयोग करता है, पृष्ठशीर्ष सामग्री के लिए "c" थीम (उज्ज्वला ग्रे) का उपयोग करता है. हालांकि, आप थीम को मिश्रित कर सकते हैं.

थीमकृत पृष्ठ, सामग्री और पृष्ठपाद

इवेंट

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

स्वयं एक प्रयास कीजिए

थीमकृत डायलॉग

इवेंट

<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

स्वयं एक प्रयास कीजिए

थीमकृत बटन

इवेंट

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

स्वयं एक प्रयास कीजिए

थीमकृत चिह्न

इवेंट

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

स्वयं एक प्रयास कीजिए

पृष्ठशीर्ष और पृष्ठपाद में थीमकृत बटन

इवेंट

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">होम</a>
  <h1>मेरे होमपेज को स्वागत करें</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">खोज</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">बटन 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">बटन 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">बटन 3</a>
</div>

स्वयं एक प्रयास कीजिए

थीम वाली नेविगेशन बार

इवेंट

<div data-role="footer" data-theme="e">
  <h1>यहाँ फुटर टेक्स्ट इंसर्ट करें</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">बटन 1</a></li>
      <li><a href="#" data-icon="arrow-r">बटन 2</a></li>
      <li><a href="#" data-icon="arrow-r">बटन 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >बटन 4</a></li>
    </ul>
  </div> 
</div>

स्वयं एक प्रयास कीजिए

थीम वाला गलती वाला बटन और सामग्री

इवेंट

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>मुझे क्लिक करें - मैं गलती वाला हूँ!</h1>
  <p>मैं विस्तारित सामग्री हूँ.</p>
</div>

स्वयं एक प्रयास कीजिए

थीम वाली सूची

इवेंट

<ul data-role="listview" data-theme="e">
  <li><a href="#">सूची आइटम</a></li>
  <li data-theme="a"><a href="#">सूची आइटम</a></li>
  <li data-theme="b"><a href="#">सूची आइटम</a></li>
  <li><a href="#">सूची आइटम</a></li>
</ul>

स्वयं एक प्रयास कीजिए

थीमकृत विभाजन बटन

इवेंट

<ul data-role="listview" data-split-theme="e">

स्वयं एक प्रयास कीजिए

थीमकृत गलत बंद करने वाली सूची

इवेंट

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">एग्नेस</a></li>
  </ul>
</div>

स्वयं एक प्रयास कीजिए

थीमकृत फॉर्म

इवेंट

<label for="name">पूर्ण नाम:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">पसंदीदा रंग चुनें:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">रेड</option>
  <option value="green">ग्रीन</option>
  <option value="blue">ब्लू</option>
</select>

स्वयं एक प्रयास कीजिए

थीमकृत गलत बंद करने वाला फॉर्म

इवेंट

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>क्लिक करें - मैं गलत बंद करने वाला हूँ!</legend>

स्वयं एक प्रयास कीजिए

नई थीम जोड़ना

जीके एक्स मोबाइल ने अपने मोबाइल पृष्ठ में नए थीम जोड़ने की भी अनुमति दी है。

नए थीम जोड़ने या संपादित करने के लिए प्लेटफ़ॉर्म सीएसएस फ़ाइल (जैसे जीके एक्स मोबाइल डाउनलोड किया हो) को संपादित करें। केवल एक शैली शीर्षक कॉपी करें और अक्षर (f-z) का नाम बदलकर उसे अपने पसंदीदा रंग और फ़ॉन्ट में समायोजित करें。

आप एचटीएमएल दस्तावेज़ में थीम क्लास का उपयोग करके नए शैली जोड़ सकते हैं - टूलबार के लिए श्रेणी जोड़ें ui-bar-(a-z) और सामग्री के लिए श्रेणी जोड़ें ui-body-(a-z)：

इवेंट

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

स्वयं एक प्रयास कीजिए