JQuery Mobile in Hindi Grids

First Page
Next Page

Multiple Column Layouts का उपयोग Mobile Device पर आम तौर Narrow Screen की Width वजह से नहीं किया जा सकता है लेकिन आपको उस समय Small Elements को एक साथ जैसे Buttons और Navigation को रखना पड़ सकता है.

jQuery Mobile में हम CSS Classes का उपयोग करके Grid Form में Layouts को Create करते है.

Layout को बनाने के लिये आप CSS Styles का उपयोग कर सकते हो लेकिन ये Library के अंदर उपयोग नहीं होता है.

Creating Grid Layout Example

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Creating Grid Layout Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>	
   </head> 
   <body> 
      <div id="page1" data-role="page" data-theme="a">
         <div data-role="header">	
            <h1>jQuery Mobile Tutorialsroot</h1>
         </div>        
         <div data-role="content">
            <div class="ui-grid-b">
               <div class="ui-block-a"><button>Grid 1</button></div>
               <div class="ui-block-b"><button>Grid 2</button></div>
               <div class="ui-block-c"><button>Grid 3</button></div>
            </div>
            <div class="ui-grid-a">
               <div class="ui-block-a"><button>Grid 1</button></div>
               <div class="ui-block-b"><button>Grid 2</button></div>
            </div>            
            <div><button>Grid 1</button></div>
         </div>
      </div>

   </body>
</html>

Output

Two Column Grid

Two Column Grid को बनाने के लिये Class ui-grid-a को <div> में Add करते है और Two Column Layout को बनाने के लिए Class ui-block-a और ui-block-b में Two Child Container को Add करते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Two Column Grid Example</title>
      <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>
      <h2>Two Column Grid Example</h2>
      <div class="ui-grid-a">
         <div class="ui-block-a">
            <div class="ui-bar ui-bar-a">First Block</div>
         </div>
         
         <div class="ui-block-b">
            <div class="ui-bar ui-bar-b">Second Block</div>
         </div>
      </div>

      <h2>Two Column Grid button Example</h2>
      <fieldset class="ui-grid-a">
         <div class="ui-block-a">
            <a class="ui-btn ui-corner-all ui-shadow ui-btn-a">Button 1</a>
         </div>
         
         <div class="ui-block-b">
            <a class="ui-btn ui-corner-all ui-shadow ui-btn-b">Button 2</a>
         </div>
      </fieldset>
   </body>
</html>

Output

First Page
Next Page