شبکه jQuery Mobile

jQuery Mobile لایه شبکه

jQuery Mobile یک مجموعه از طرح‌بندی‌های ستونی بر اساس CSS ارائه می‌دهد. اما استفاده از طرح‌بندی ستون در دستگاه‌های موبایل معمولاً توصیه نمی‌شود، به دلیل محدودیت‌های عرض صفحه نمایش دستگاه‌های موبایل.

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

ستون‌های شبکه به یکدیگر برابر هستند (پهنای کل 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>نوشته‌ای</span></div>
  <div class="ui-block-b"><span>نوشته‌ای</span></div>
  <div class="ui-block-c"><span>نوشته‌ای</span></div>
  <div class="ui-block-a"><span>نوشته‌ای</span></div>
  <div class="ui-block-b"><span>نوشته‌ای</span></div>
  <div class="ui-block-a"><span>نوشته‌ای</span></div>
</div>

آزمایش کنید