Grid CodeW3C Mobile

jQuery Mobile naɗi na gaba

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>

Try Yourself

شما همچنین می‌توانید از استایل‌های درون‌ریزی برای شخصی‌سازی بلوک‌ها استفاده کنید:

<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>

Try Yourself