JQUERY MOBILE CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 12: jQuery Mobile - Tables

Đối với Table rất khó có thể xây dựng responsive bởi vì nó không hiển thị block, inline như các thẻ HTML khác. Trong Bootstrap họ đã nảy xây dựng responsive cho table bằng cách ở màn hình nhỏ table sẽ xuất hiện thanh cuộn kéo ngang nhưng bản thân mình thấy đó không phải là một cách giải quyết tốt.

Nhận thấy được điều này jQuery Mobile đã cung cấp những tính năng hiển thị và ẩn các cột một cách linh động và hiệu quả, hoặc nó tự động hiển thị từ chiều ngang sang chiều dọc để các thông tin có thể hiển thị tốt hơn.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Chúng ta có hai loại responsive chính đó là reflow table và column toggle table.

1. Reflow table responsive trong jQuery Mobile

Trong chế độ này nếu trường hợp dữ liệu hiển thị theo chiều ngang quá dài và không thể thu gọn hơn thì nó sẽ tự động hiển thị sang dạng chiều dọc.

Để tạo table ở chế độ này thì bạn thêm thuộc tính data-role="table"class="ui-responsive".

Lưu ý rằng để nó hoạt động tesponsive tốt thì ban phải thêm các thẻ thead tbody đầy đủ, không được sử dụng colspan vì nó không hỗ trợ trong responsive.

Ví dụ: XEM DEMO

<table data-role="table" class="ui-responsive">
    <thead>
        <tr>
            <th>CustomerID</th>
            <th>CustomerName</th>
            <th>ContactName</th>
            <th>Address</th>
            <th>City</th>
            <th>PostalCode</th>
            <th>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>
        <tr>
            <td>2</td>
            <td>Antonio Moreno Taquería</td>
            <td>Antonio Moreno</td>
            <td>Mataderos 2312</td>
            <td>México D.F.</td>
            <td>05023</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Around the Horn</td>
            <td>Thomas Hardy</td>
            <td>120 Hanover Sq.</td>
            <td>London</td>
            <td>WA1 1DP</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
            <td>Berguvsvägen 8</td>
            <td>Luleå</td>
            <td>S-958 22</td>
            <td>Sweden</td>
        </tr>
    </tbody>
</table>

2. Column Toggle Table trong jQuery Mobile

Column Toggle sẽ ẩn đi các column khi chiều dài không đủ để hiển thị tất cả. Tất nhiên bạn có thể bật hiển thị nó trở lại thông qua hệ thống Controls của nó. Hệ thống controls sẽ được tự động tạo thông qua nội dung trong thẻ thead.

Để tạo một table dạng Column Toggle thì bạn phải thêm các thuộc tính data-role="table" data-mode="columntoggle" class="ui-responsive".

Theo mặc định jQuery Mobile sẽ ẩn Column nằm phía bên trái nhất. Tuy nhiên bạn có thể điều chỉnh thứ tự ẩn thông qua thuộc tính data-priority="1". Độ ưu tiên cho 1 là cao nhất và cho 6 là thấp nhất.

Ví dụ: XEM DEMO

<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>
        <tr>
            <td>2</td>
            <td>Antonio Moreno Taquería</td>
            <td>Antonio Moreno</td>
            <td>Mataderos 2312</td>
            <td>México D.F.</td>
            <td>05023</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Around the Horn</td>
            <td>Thomas Hardy</td>
            <td>120 Hanover Sq.</td>
            <td>London</td>
            <td>WA1 1DP</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
            <td>Berguvsvägen 8</td>
            <td>Luleå</td>
            <td>S-958 22</td>
            <td>Sweden</td>
        </tr>
    </tbody>
</table>

3. Tùy chỉnh giao diện Table trong jQuery Mobile.

Bạn có thẻ sử dụng các class được cung cấp sẵn trong jQuery Mobile để điều chỉnh giao diện hiển thị cho table. Ví dụ để thêm shadow cho tablet thì ta sử dụng class ui-shadow.

Hoặc bạn có thể sử dụng CSS riêng để định dạng cho table thông qua các thuộc tính CSS căn bản.

Ví dụXEM DEMO

Thêm hiệu ứng shadow:

<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
    <thead>
        <tr>
            <th data-priority="6">CustomerID</th>
            <th>CustomerName</th>
            <th data-priority="1">ContactName</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Antonio Moreno Taquería</td>
            <td>Antonio Moreno</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Around the Horn</td>
            <td>Thomas Hardy</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
        </tr>
    </tbody>
</table>

Thêm border-bottom cho mỗi hàng:

<style type="text/css">
    tr{
        border-bottom: solid 1px;
    }
</style>

4. Lời kết

Không giống với Table thông thường rất khó chỉnh responsive, nhưng với jQuery Mobile thì bạn dễ dàng làm điều đó nên nó rất ữu ích khi bạn show dữ liệu đơn giản.

Ngoài table ra thì chúng ta còn một cách khác và thường hay sử dụng nhất đó là Grid, và thành phần này chúng ta sẽ tìm hiểu ở bài tiếp theo.

Cùng chuyên mục:

Bài 11: jQuery Mobile - Collapsibles

Bài 11: jQuery Mobile - Collapsibles

Collapsible là hiệu ứng khi bạn click vào dấu cộng thì nó sẽ mở rộng…

Bài 10: jQuery Mobile - Panel

Bài 10: jQuery Mobile - Panel

jQuery Mobile Panel là thành phần trượt ra từ bên phải hoặc bên trái khi…

Bài 09: jQuery Mobile - Navigation Bars

Bài 09: jQuery Mobile - Navigation Bars

Navigations Bar là phần nằm phía dưới header dùng để hiển thị các button kèm…

Bài 08: jQuery Mobile - Toolbar Header và Footer

Bài 08: jQuery Mobile - Toolbar Header và Footer

Toolbar là thanh công cụ hiển thị ở đầu trang (header) và cuối trang (footer).…

Bài 07: jQuery Mobile - Data Position To

Bài 07: jQuery Mobile - Data Position To

Trong bài này chúng ta sẽ tìm hiểu thuộc tính data-position-to trong jQuery Mobile, đây…

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Popup là một thành phần không thể thiếu trong các ứng dụng Mobile được, vì…

Bài 05: jQuery Mobile - Icons

Bài 05: jQuery Mobile - Icons

jQuery Mobile hỗ trợ một nhóm các icon sử dụng cho buttons, collapsibles, listview buttons…

Bài 04: jQuery Mobile - Buttons

Bài 04: jQuery Mobile - Buttons

jQuery Mobile hỗ trợ một số style button căn bản để tạo giao diện website,…

Bài 03: jQuery Mobile - Transitions

Bài 03: jQuery Mobile - Transitions

jQuery Mobile Framework cho phép bạn chuyển trang với nhiều hiệu ứng khác nhau dựa…

Bài 02: jQuery Mobile - Tìm hiểu Page

Bài 02: jQuery Mobile - Tìm hiểu Page

Page là một thành phần chính dùng để gom nhóm các nội dung liên quan…

Bài 01: jQuery Mobile là gì?

Bài 01: jQuery Mobile là gì?

jQuery Mobile là một Framework được phát triển tương tự như thư viện jQuery nhưng…

Top