آموزش jQuery Mobile - شبکه (Grid)

شبکه (Grid):

سیستم شبکه jQuery Mobile با استفاده از یک سری ردیف‌ها و ستون‌ها، صفحات وب با چیدمان مطلوب خود را ایجاد می‌کند.

جدول زیر نوع‌های مختلف شبکه را به تفصیل نشان می‌دهد.

ردیف	نوع و توضیحات
۱	شبکه های پایه برای ایجاد یک شبکه با یک ستون، کلاس ui-grid-solo را در <div> اعمال کنید. عرض شبکه ۱۰۰٪ است.
۲	شبکه دو ستونه(Two column grids) برای ایجاد یک شبکه دو ستونه، کلاس ui-grid-a را در یک <div> اعمال کرده و دو کانتینر زیرمجموعه با کلاس ui-block-a و ui-block-b اضافه کنید.
۳	شبکه سه ستونه(Three column grids) کلاس ui-grid-b برای ایجاد یک شبکه سه ستونه استفاده می شود. این شامل سه کانتینر زیرمجموعه با کلاس ui-block-a/b/c می باشد.
۴	شبکه چهار ستونه(Four column grids) کلاس ui-grid-c برای ایجاد یک شبکه چهار ستونه استفاده می شود. این شامل چهار کانتینر زیرمجموعه با کلاس ui-block-a/b/c/d/e می باشد.
۵	شبکه پنج ستونه(Five column grids) کلاس ui-grid-d برای ایجاد یک شبکه پنج ستونه استفاده می شود. این شامل پنج کانتینر زیرمجموعه با کلاس ui-block-a/b/c/d می باشد.
۶	شبکه های چند ردیفه(Multiple row grid) با تعیین هر کلاس ستون در یک کانتینر، چندین ردیف در شبکه بسته می شوند.
۷	کلاس تک‌ستونه شبکه (Grid solo class) از طریق تغییر سبک‌های شبکه در زیر یک نقطه واحد، شبکه استاندارد پاسخگویی را به دست می‌دهد.
۸	شبکه‌های پاسخگو (Responsive grids) شبکه‌های استوانه‌ای در زیر 35em (560px) قرار داده می‌شوند و می‌توانید از یک نقطه واحد پیش‌تنظیم شده استفاده کنید.
۹	پیش‌تنظیم نقطه واحد (Breakpoint preset) شبکه‌های استوانه‌ای در زیر 35em (560px) قرار داده می‌شوند و می‌توانید درون شاخه شبکه، از کلاس .ui-responsive استفاده کنید.

1-Basic Grid Layouts:

کلاس ui-grid-solo را در <div> وارد کنید تا یک شبکه ستونی ایجاد کنید، عرض شبکه 100٪ است.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <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>Basic Grid Example</h2>
      <div class = "ui-grid-solo">
         <div class = "ui-block-a">
            <div class = "ui-bar ui-bar-a">First Block</div>
         </div>
      </div>

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

2-شبکه دو ستونه(Two column grids):

کلاس ui-grid-a را به <div> اضافه کنید و دو کانتینر فرزند را با کلاس ui-block-a و ui-block-b اضافه کنید تا طرح بندی دو ستونی ایجاد کنید. عرض هر دو شبکه 50 درصد خواهد بود. Ui-bar-a برای اعمال پس‌زمینه و استایل فونت استفاده می‌شود.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <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>

3-شبکه سه ستونه(Three column grids):

کلاس ui-grid-b برای ایجاد یک شبکه سه ستونی استفاده می شود. این شامل سه کانتینر کودک با کلاس ui-block-a/b/c است. عرض تمام ستون های شبکه هر کدام 33 درصد خواهد بود.

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

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

4-شبکه چهار ستونه(Four column grids):

کلاس ui-grid-c برای ایجاد یک شبکه چهار ستونی استفاده می شود. این شامل چهار کانتینر کودک با کلاس ui-block-a/b/c/d/e است. عرض تمام ستون های شبکه هر کدام 25٪ خواهد بود.

<!DOCTYPE html>
<html>
   <head>
      <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>Four Column Grid Example</h2>
      <div class = "ui-grid-c">
         <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 class = "ui-block-c">
            <div class = "ui-bar ui-bar-a">Third Block</div>
         </div>
         
         <div class = "ui-block-d">
            <div class = "ui-bar ui-bar-b">Fourth Block</div>
         </div>
      </div>

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

5-شبکه پنج ستونه(Five column grids):

کلاس ui-grid-d برای ایجاد یک شبکه پنج ستونی استفاده می شود. این شامل پنج کانتینر کودک با کلاس ui-block-a/b/c/d است. تمام عرض ستون شبکه هر کدام 20٪ خواهد بود.

<!DOCTYPE html>
<html>
   <head>
      <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>Five Column Grid Example</h2>
      <div class = "ui-grid-d">
         <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 class = "ui-block-c">
            <div class = "ui-bar ui-bar-a">Third Block</div>
         </div>
         
         <div class = "ui-block-d">
            <div class = "ui-bar ui-bar-b">Fourth Block</div>
         </div>
         
         <div class = "ui-block-e">
            <div class = "ui-bar ui-bar-a">Fourth Block</div>
         </div>
      </div>

      <h2>Five Column Grid button Example</h2>
      <fieldset class = "ui-grid-d">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 1</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-a">Button 2</a>
         </div>
         
         <div class = "ui-block-c">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 3</a>
         </div>
         
         <div class = "ui-block-d">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-a">Button 4</a>
         </div>
         
         <div class = "ui-block-e">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 5</a>
         </div>
      </fieldset>
   </body>
</html>

6-شبکه های چند ردیفه(Multiple row grid):

چندین ردیف را می توان با تعیین هر کلاس ستونی در یک ظرف، به عنوان مثال ui-grid-a، ui-grid-b، ui-grid-c، ui-grid-d یا ui-grid-b در شبکه پیچیده کرد. محفظه فرزند را در داخل آن با کلاس ui-block-a/b/c/d مکرراً به تعداد ردیف‌هایی که می‌خواهید در آن قرار دهید.

<!DOCTYPE html>
<html>
   <head>
      <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>Multiple Row Grid Example</h2>
      <div class = "ui-grid-b">
         <div class = "ui-block-a">
            <div class = "ui-bar ui-bar-b">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-bar ui-bar-a">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-bar ui-bar-b">Third Block</div>
         </div>
         
         <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 class = "ui-block-c">
            <div class = "ui-bar ui-bar-a">Third Block</div>
         </div>
         
         <div class = "ui-block-a">
            <div class = "ui-bar ui-bar-b">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-bar ui-bar-a">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-bar ui-bar-b">Third Block</div>
         </div>
         
         <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 class = "ui-block-c">
            <div class = "ui-bar ui-bar-a">Third Block</div>
         </div>
      </div>
      
   </body>
</html>

7-کلاس تک‌ستونه شبکه (Grid solo class):

کلاس ui-grid-solo برای ایجاد یک ستون واحد با کلاس ui-block-a به عنوان محفظه فرزند استفاده می شود.

<!DOCTYPE html>
<html>
   <head>
      <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>Grid Solo Class Example</h2>
      <div 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>
      </div>
      
      <div class = "ui-grid-solo">
         <div class = "ui-block-a">
            <input type = "button" value = "More" />
         </div>
      </div>
      
   </body>
</html>

8-شبکه‌های پاسخگو (Responsive grids):

شبکه استاندارد با در نظر گرفتن سبک های شبکه زیر یک نقطه شکست، پاسخگو می شود. حداکثر عرض به عنوان یک نادیده گرفته شده برای اعمال یک ظاهر طراحی شده انباشته استفاده می شود. برای گستردگی استایل‌ها برای پرس و جوی رسانه، کلاس my-breakpoint را در نظر بگیرید. می توانید نقطه شکست اضافی اضافه کنید یا ظاهر را بیشتر سفارشی کنید.

@media all and (max-width: 35em) {
   .my-breakpoint .ui-block-a,
   .my-breakpoint .ui-block-b,
   .my-breakpoint .ui-block-c,
   .my-breakpoint .ui-block-d,
   .my-breakpoint .ui-block-e {
      width: 100%;
      float: none;
   }
}

9-پیش‌تنظیم نقطه واحد (Breakpoint preset):

برای قرار دادن شبکه‌های زیر 35 میلی‌متر (560 پیکسل)، می‌توان یک نقطه شکست از پیش تعیین‌شده اعمال کرد. در کانتینر شبکه شامل کلاس .ui-responsive است.

<!DOCTYPE html>
<html>
   <head>
      <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 Responsive Example</h2>
      <div class = "ui-grid-a ui-responsive">
         <div class = "ui-block-a">
            <div class = "ui-body ui-body-a">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-body ui-body-b">Second Block</div>
         </div>
      </div>

      <h2>Three Column Responsive Example</h2>
      <div class = "ui-grid-b ui-responsive">
         <div class = "ui-block-a">
            <div class = "ui-body ui-body-a">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-body ui-body-b">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-body ui-body-a">Third Block</div>
         </div>
      </div>

      <h2>Four Column Responsive Example</h2>
      <div class = "ui-grid-c ui-responsive">
         <div class = "ui-block-a">
            <div class = "ui-body ui-body-a">First Block</div>
         </div>
         <div class = "ui-block-b">
            <div class = "ui-body ui-body-b">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-body ui-body-a">Third Block</div>
         </div>
         
         <div class = "ui-block-d">
            <div class = "ui-body ui-body-b">Fourth Block</div>
         </div>
      </div>

      <h2>Five Column Responsive Example</h2>
      <div class = "ui-grid-d ui-responsive">
         <div class = "ui-block-a">
            <div class = "ui-body ui-body-a">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-body ui-body-b">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-body ui-body-a">Third Block</div>
         </div>
         
         <div class = "ui-block-d">
            <div class = "ui-body ui-body-b">Fourth Block</div>
         </div>
         
         <div class = "ui-block-e">
            <div class = "ui-body ui-body-a">Fifth Block</div>
         </div>
      </div>

   </body>
</html>

لایه بندی - درس قبلی

درس بعدی - دکمه‌ها در شبکه‌ها