jQuery Mobile ग्रिड

jQuery Mobile लेआउट ग्रिड

jQuery Mobile एक सीएसएस-आधारित स्तम्भ रचना पैकेज प्रदान करता है। हालांकि, मोबाइल डिवाइसों पर स्तम्भ रचना का उपयोग करने की सिफारिश नहीं की जाती, जो मोबाइल डिवाइसों की स्क्रीन चौड़ाई के सीमित होने के कारण है।

हालांकि, कभी-कभी आपको छोटे एलिमेंटों का स्थानीकरण करना होता है, जैसे बटन या नेविगेशन बार, जैसे कि तालिका में एकदम बाहर की ओर फ्लोट करने के लिए। इस समय, स्तम्भ रचना बहुत ही सही होती है।

ग्रिड के स्तम्भ समान चौड़ाई वाले हैं (कुल चौड़ाई 100% है), बिना बॉर्डर, पृष्ठभूमि, बाहरी अकार या आंतरिक अकार के।

उपलब्ध बैठक रचनाएँ चार हैं:

ग्रिड वर्ग स्तम्भ स्तम्भ चौड़ाई समान उदाहरण
ui-grid-a 2 50% / 50% ui-block-a|b परीक्षण
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c परीक्षण
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d परीक्षण
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e परीक्षण

सूचना:स्तम्भ कंटेनर में, विभिन्न स्तम्भ संख्या के अनुसार, उप-एलिमेंट को ui-block-a|b|c|d|e की वर्ग सेट किया जा सकता है। ये स्तम्भ तृप्ति के अनुसार एकदम बाहर की ओर फ्लोट करेंगे।

उदाहरण 1: ui-grid-a की वर्ग (दो स्तम्भ रचना) के लिए, आपको दो उप-एलिमेंट ui-block-a और ui-block-b निर्दिष्ट करना होगा।

उदाहरण 2: ui-grid-b की वर्ग के लिए (तीन स्तम्भ रचना), तीन उप-एलिमेंट ui-block-a, ui-block-b और ui-block-c जोड़ें।

ग्रिड अनुकूलन

आप CSS का उपयोग करके स्तम्भ बॉक्स को अनुकूलित कर सकते हैं:

उदाहरण

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

स्वयं प्रयास करें

आप भी आइनलाइन स्टाइल का उपयोग करके बॉक्स को अनुकूलित कर सकते हैं:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

बहु-पंक्ति

स्तम्भ में कई पंक्तियाँ भी संभव हैं।

टिप्पणी:ui-block-a-class हमेशा नए पंक्ति को बनाएगा:

उदाहरण

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

स्वयं प्रयास करें