jQuery मोबाइल में मेनू ग्रिड

Question

jQuery मोबाइल (मेनू-ग्रिड, इस उदाहरण में 6 बटन) के साथ इस लेआउट को लागू करने का सबसे अच्छा तरीका क्या है?

मैंने jQuery मोबाइल ग्रिड की कोशिश की है, लेकिन मुझे इसकी पूरी चौड़ाई और पूर्ण ऊंचाई बनाने और रंग जो भी मैं चाहता हूं उसे बदलने में कई समस्याएं थीं।

Answer 1

आप उस पृष्ठ के लिए अपनी खुद की स्टाइल में बना सकते हैं। आइकन फ़्लोट करें और उन्हें 50% चौड़ाई दें (या यदि आप बॉक्स-मॉडल के साथ सीमाओं का उपयोग कर रहे हैं तो कम करें)

Answer 2

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

<div data-role='header' data-position='inline' role='banner' data-theme='f' > 

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1> 

    <div data-role="navbar" data-theme='c'> 
     <ul> 
      <li><a href="" > 
       Camera 
      </a></li> 

      <li><a href="" > 
       Wave 
      </a></li> 

      <li><a href="" > 
       Lock 
      </a></li> 


      <li><a href="" > 
       Pencil 
      </a></li> 


      <li><a href="" > 
       Star 
      </a></li> 


      <li><a href="" > 
       Friends 
      </a></li> 

     </ul> 
    </div><!-- /navbar --> 
</div><!-- header --> 

जब से तुम छह आइटम यहाँ है, jQuery मोबाइल स्वतः उन्हें एक 2x3 ग्रिड गठन में के रूप में अपने mockup में दिखाया गया संरेखित होगा (कम से कम चौड़ाई का ख्याल रखना होगा)। इसके अलावा, ऊंचाई के लिए आपकी सबसे अच्छी शर्त सीएसएस में कुछ अंकगणित कर सकती है। उदाहरण: यदि हेडर बार 12px है, तो प्रत्येक ब्लॉक की ऊंचाई सेट करें: 33% -4 पीएक्स;

रंग सेटिंग्स और ऐसे, jquery mobile theme roller हाथ से बना सीएसएस करने से बेहतर तरीके से काम करता है।

Answer 3

उपयोग डेटा ग्रिड "एक"

उपयोग नीचे एक

<div data-role="navbar" data-grid="a">