نموذج موبايل مسج

الجدول تستجيب

يستخدم تصميم تستجيب عادة للتكيف مع المستخدم مجموعة متنوعة من الأجهزة النقالة.

نحن بحاجة فقط لاستخدام اسم فئة بسيطة، وسوف مسج الجوال تلقائيا ضبط محتوى الصفحة وفقا لحجم الشاشة.

شكل استجابة لمحتوى الصفحة على الأجهزة النقالة والمكتبية لانهاء التكيف جيدة.

الجدول تستجيب هناك نوعان: إنحسر (الجزر) والتبديل العمود.

نموذج الجزر

الجزر استمارة نموذجية بما فيه الكفاية يتم عرض كبير حجم الشاشة أفقيا، في حين أن حجم الشاشة صغير بما فيه الكفاية، وسوف تصبح جميع البيانات عموديا.

إنشاء جدول في <جدول> عنصر لإضافة بيانات دور = "الجدول" و "واجهة المستخدم استجابة" فئة:

أمثلة

<الجدول دور البيانات = "الجدول " الطبقة = "واجهة المستخدم استجابة">

محاولة »

	للنموذج الاستجابة، ويجب أن تشمل <THEAD> و <TBODY> العناصر. لا تستخدم السمة روسبان أو colspan، غير معتمد الجدول استجابة من قبل هاتين الخاصيتين.

تحويل عمود

سوف تكون مخفية نموذج تحويل العمود عندما عرض البيانات ليست كافية.

إنشاء مفتاح الوضع عمود الجدول على النحو التالي:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

افتراضيا، سوف مسج موبايل أولا إخفاء عمود إلى يمين الجدول. ومع ذلك، يمكنك تحديد ترتيب الأعمدة المخفية عن طريق إضافة السمة ذات الأولوية البيانات في رأس الجدول (<ال>)، ويمكن أن تكون قيمة ذات الأولوية البيانات من 1 (أولوية أعلى) إلى 6 (أدنى أولوية):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>

	إذا لم تقم بتحديد لا يتم سرد الأولوية، ثم العمود دائما موجودة ولن تكون مخفية.

مزيج من أعلاه قطعتين من التعليمات البرمجية معا لإنشاء جدول تحويل العمود، بحيث يمكن للمستخدمين تخصيص الأعمدة التي تريد إخفاء الجدول:

أمثلة

<الجدول دور البيانات = "الجدول " وضع بيانات = "columntoggle" الطبقة = "واجهة المستخدم استجابة" معرف = "myTable">
<THEAD>
<tr>
<ذات الأولوية بيانات ال = "6 "> العميل </ تشرين>
<ث> CUSTOMERNAME </ تشرين>
<ذات الأولوية بيانات ال = "1 "> CONTACTNAME </ تشرين>
<ذات الأولوية بيانات ال = "2 "> عنوان </ تشرين>
<البيانات ذات الأولوية = "3 عشر مدينة"> </ تشرين>
<ذات الأولوية بيانات ال = "4 "> الرمز البريدي </ تشرين>
<البيانات ذات الأولوية = "5 تشرين البلد"> </ تشرين>
</ tr>
</ THEAD>
<TBODY>
<tr>
<td> 1 </ td>
<td> Alfreds Futterkiste </ td>
<td> ماريا اندرس </ td>
<td> Obere شارع 57 </ td>
<td> برلين </ td>
<td> 12209 </ td>
<td> ألمانيا </ td>
</ tr>
</ TBODY>
</ الجدول>

محاولة »

يمكننا استخدام سمة النص BTN عمود البيانات لتعديل نص الجدول التبديل:

أمثلة

<الجدول دور البيانات = "الجدول " وضع بيانات = "columntoggle" الطبقة = "واجهة المستخدم استجابة" عمود البيانات BTN النص = " النقطة أود إظهار أو إخفاء الأعمدة!" معرف = "myTable">

محاولة »