جی کوئری موبایل-جدول ها
جدول های واکنش گرا
طراحی واکنش گرا زمانی کاربرد دارد که شما بخواهید اندازه گذاری محتوای صفحه وب شما بر اساس اندازه ی صفحه نمایش کاربر و جهت آن تغییر کند.
به وسیله ی یک کلاس ساده جی کوئری موبایل قادر است از اندازه ی صفحه نمایش کاربر اطلاع پیدا کند و به طور اتوماتیک خودش را تغییر اندازه دهد تا محتوای مناسب را به یک کاربر خاص نمایش دهد.
جدول های واکنش گرا به ما این امکان را می دهند تا یک مجموعه بزرگ از داده های جدولی را که جذاب به نظر می رسند را برای هردوی موبایل ها و رایانه های رومیزی نمایش دهیم.
دو نوع جدول واکنشگرا وجود دارند: reflow و column toggle.
جدول reflow
حالت reflow داده های جدول مورد نظر را تا هنگامی که به یک اندازه ی مینیمم برسند، به صورت افقی مکان گذاری می کند و سپس تمامی ردیف ها به صورت عمودی گروه بندی می شوند.
ابتدا یک جدول ایجاد کنید، و سپس خصوصیت "data-role="table و کلاس "ui-responsive" را به عنصر <table> اضافه نمایید:
 |
برای اینکه جدول واکنش گرای مورد نظر به درستی کار کند شما باید عناصر <thead> و <tbody> را اضافه نمایید. از خصوصیات rowspan و colspan استفاده نکیند. زیرا این خصوصیات در جدول های واکنش گرا پشتیبانی نمی شوند. |
|---|
جدول column toggle
حالت "column toggle" هنگامی که دیگر عرض کافی برای نمایش داده های مورد نظر وجود ندارد، ستون ها را محو خواهد نمود.
برای ایجاد یک جدول column toggle، عبارات زیر را به عنصر <table> اضافه کنید:
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
به طور پیش فرض، جی کوئری موبایل ستون ها را از سمت راست جدول مورد نظر، محو می کند. اما شما می توانید مشخص کنید که چه ستونی نمایش یابد و چه ستونی محو شود. برای این کار خصوصیت data-priority را به هدر جدول مورد نظر(<th>) اضافه کنید و آن را برابر با یک عدد از 1 تا 6 نمایید. عدد بیشترین اولویت را مشخص می کند و عدد 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>
|
اگر که شما یک اولویت را برای یک ستون مشخص نکنید، ستون مورد نظر ماندگار می شود و مخفی شدن آن مقدور نیست. |
|---|
به وسیله ی نکات و مطالب بالا، شما قادر خواهید بود که یک جدول واکنش گرا را بسازید. توجه کنید که این فریم ورک به طور اتوماتیک یک دکمه را در سمت راست و بالای جدول مورد نظر اضافه می کند. انی دکمه به کاربر این امکان را می دهد تا انتخاب کند که کدام ستون از جدول نمایش داده شود:
مثال
<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>
برای تغییر دادن متن دکمه ی انتخاب ستون ها، می توانید از خصوصیت data-column-btn-text استفاده کنید:
مثال
استایل دهی به جدول ها
برای اضافه کردن سایه ها به جدول مورد نظر، از کلاس "ui-shadow" استفاده کنید:
اضافه کردن سایه
برای استایل دهی بیشتر به جدول ها از CSS استفاده کنید:
اضافه کردن یک کادر پایینی به تمام ردیف های جدول
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
اضافه کردن یک کادر پایینی به تمام عناصر <th> و اضافه کردن یک رنگ پس زمینه به تمام ردیف های زوج:
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
- نوشته شده توسط احسان عباسی
- بازدید: 5140
