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 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 ra hoặc thu gọn lại nhằm thu nhỏ không gian hiển thị giúp giao diện thân thiện với người dùng hơn. Nội nội dung bên trong có thể là các menu, image, slide hay các widget bất kì khác.

jquery mobile Collapsible 1 png

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.

1. Collapsible trong jQuery Mobile

Để tạo Collapsible trong jQuery Mobile thì bạn chỉ cần thêm thuộc tính data-role="collapsible" vào thẻ div ngoài cùng, sau đó bên trong chia làm hai phần:

  • Header: là phần nằm trong các thẻ từ h1 - h6
  • Content: là tất cả các phần nằm phía dưới

jquery mobile Collapsible 2 png

Ví dụ: XEM DEMO

<div data-role="collapsible">
    <h6>Tiêu đề</h6>
    <div class="ui-content">
        Chào mừng bạn đến với freetuts.net
    </div>
</div>

2. Cấu hình Collapsible Expanded

Để cấu hình nội dung ban đầu ở chế độ ẩn hay mở rộng (expanded) thì ta sử dụng thuộc tính data-collapsed="false/true".

Ví dụ: XEM DEMO

<div data-role="collapsible" data-collapsed="false">
    <h6>Tiêu đề</h6>
    <div class="ui-content">
        Chào mừng bạn đến với freetuts.net
    </div>
</div>

3. Cấu hình Collapsible mini size

Để cấu hình Collapsible ở dạng mini size thì ta bổ sung thuộc tính data-mini="true".

Ví dụ: XEM DEMO

<div data-role="collapsible" data-mini="true">
    <h6>Tiêu đề</h6>
    <div class="ui-content">
        Chào mừng bạn đến với freetuts.net
    </div>
</div>

4. Thay đổi Collapsible icon 

Theo mặc định icon của Collapsible  là dấu cộng lúc đóng và dấu trừ lúc mở. Nhưng bạn có thể thay đổi bằng nhóm icon khác bằng cách sử dụng hai thuộc tính data-collapsed-icon="carat-d" và data-expanded-icon="carat-u". Trong đó các giá trị icon do bạn lựa chọn.

Ví dụ: XEM DEMO

<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
    <h6>Tiêu đề</h6>
    <div class="ui-content">
        Chào mừng bạn đến với freetuts.net
    </div>
</div>

5. Fieldset và Legend

Trường hợp nội dung của Collapsible là một Form thì bạn phải sử dụng FieldsetLegend.

Ví dụ: XEM DEMO

<form>
    <fieldset data-role="collapsible">
        <legend>Register Form</legend>
        <label for="textinput-f">Your name:</label>
        <input type="text" placeholder="Your name" value="">
        <label for="textinput-f">Gender:</label>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">Male</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Female</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">None</label>
        </div>
    </fieldset>
</form>

6. Non-inset Collapsible

Theo mặc định thì nội dung sẽ nằm bên trong và được bo lại bởi đường viền, nhưng nếu bạn muốn nội dung nằm tách rời và không có đường viền đó thì có thể sử dụng thuộc tính data-inset="false".

Ví dụ: XEM DEMO

<div data-role="page">
    <form>
        <fieldset data-role="collapsible" data-inset="false">
            <legend>Get email</legend>
            <label for="textinput-f">Your email:</label>
            <input type="text" placeholder="Your email" value="">
        </fieldset>
    </form>
</div>

7. Lời kết

Còn nhiều demo khác nữa nhưng bản chất là kết hợp nhiều widget trong jQuery Mobile mà thôi.

Bài này mình dừng tại đây, bài tiếp theo chúng ta sẽ tìm hiểu đến Table trong jQuery Mobile.

Cùng chuyên mục:

Bài 12: jQuery Mobile - Tables

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…

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