شبکه‌های 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>نص 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>

آزمایش کنید