جداول تستجيب
تصميم استجابة مفيد عندما تريد محتوى صفحة ويب الجوال الخاص بك للرد على جهاز المستخدم، مثل حجم الشاشة وتوجهاتها.
مع اسم فئة بسيط، مسج موبايل يدرك حجم الشاشة متاح للمستخدم وتغيير حجم نفسه لإظهار المحتوى الذي يهم لهذا المستخدم المعين تلقائيا.
الجداول استجابة تسمح لنا لعرض مجموعة كبيرة من جداول البيانات التي من شأنها أن تبدو جذابة لكل من الهواتف النقالة وأجهزة الكمبيوتر المكتبية.
هناك نوعان من الجداول متجاوبة: إنحسر وتبديل العمود.
الجدول إنحسر
وضع إنحسر مواقف بيانات الجدول أفقيا حتى تصل إلى الحد الأدنى من حجم، ثم يتم تجميع كافة الصفوف معا عموديا.
إنشاء جدول، إضافة بيانات دور = "الطاولة" وفئة من "ui-responsive" على <table> العنصر:
للجدول تستجيب للعمل بشكل صحيح، يجب أن تشمل <thead> و <tbody> العناصر.
لا تستخدم روسبان أو سمات colspan. أنها غير معتمدة في الجداول استجابة.
عمود تبديل الجدول
ووضع "تبديل العمود" إخفاء الأعمدة عندما لم يكن هناك ما يكفي من العرض لعرض البيانات.
لإنشاء جدول عمود تبديل، إضافة ما يلي إلى <table> العنصر:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >افتراضيا، سوف مسج موبايل إخفاء الأعمدة من الجانب الأيمن من الجدول. ومع ذلك، ويسمح لك لتحديد أي العمود الذي يجب أن تكون مخفية أو يظهر في ترتيب معين. إضافة السمة ذات الأولوية البيانات إلى عنوان الجدول (<th>) وتحديد رقما بين 1 (أولوية أعلى) إلى 6 (أولوية أدنى):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>إذا لم تقم بتحديد أولوية لعمود، والعمود أن يكون مستمرا وغير متاح للاختباء.
وضع كل ذلك معا، وقمت بإنشاء جدول عمود تبديل! لاحظ أن الإطار يضيف زر تلقائيا في الزاوية اليمنى العليا من الجدول. هذا يتيح للمستخدم لاختيار أي عامود لعرضها في الجدول:
مثال
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
انها محاولة لنفسك » لتغيير النص زر جدول تبديل، واستخدام السمة بيانات عمود BTN النص:
مثال
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> انها محاولة لنفسك » جداول التصميم
استخدام "واجهة المستخدم الظل" الطبقة لإضافة الظلال إلى الجدول:
إضافة الظل
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
انها محاولة لنفسك » لمزيد من الجدول التصميم، واستخدام CSS:
إضافة الحد السفلي لجميع صفوف الجدول
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
انها محاولة لنفسك » إضافة الحد السفلي للجميع <ال> العناصر ولون الخلفية لجميع صفوف الجدول حتى
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
انها محاولة لنفسك »