Bài 04: jQuery Mobile - Buttons - jQuery Mobile căn bản

jQuery Mobile hỗ trợ một số style button căn bản để tạo giao diện website, những button này rất thô sơ nên để đẹp thì phải phụ thuộc vào giao diện của bạn, tức là bạn phải custom lại CSS để giống với bản Design PSD.

Chúng ta sẽ tìm hiểu một số style button như:

• Button căn bản
• Button bo góc
• Button shadow
• Button có Icon
• Button theo vị trí (position)
• Button inline
• Group Button

1. Buttons trong jQuery Mobile

Để tạo một Button trong jQuery Mobile thì ta chỉ việc tạo một thẻ a hoặc thẻ button tùy thích, sau đó thêm class="ui-btn".

Ví dụ: XEM DEMO

<a href="#" class="ui-btn">Save</a>
<button class="ui-btn">Back</button>

Bo góc - Corners:

Nếu bạn muốn button có bo góc thì bổ sung class ui-corner-all.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-corner-all">Save</a>
<button class="ui-btn ui-corner-all">Back</button>

Shadow:

Hiệu ứng Shadow cũng có thể được thêm bằng cách thêm class ui-shadow.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-shadow">Save</a>
<button class="ui-btn ui-shadow">Back</button>

Inline:

Những button trên hiển thị ở dạng full width, vậy nếu ta muốn một button có chiều dài phụ thuộc vào nội dung thì thêm class ui-btn-inline.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-btn-inline">Save</a>
<button class="ui-btn ui-btn-inline">Back</button>

Theme:

Mỗi theme sẽ có một style khác nhau. Ví dụ sau này bạn tạo trang web dựa vào layout PSD của bạn thì bạn sẽ định nghĩa một theme và viết bổ sung các thuộc tính cho chúng.

Ví dụ dưới đây sử dụng theme có sẵn của jQuery Mobile.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-btn-a">Save</a>
<button class="ui-btn ui-btn-b">Back</button>

Mini:

Nếu button mặc định có kích thước quá lớn thì bạn có thể sử dụng class ui-mini để chuyển nó về định dạng nhỏ hơn.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-mini">Save</a>
<button class="ui-btn ui-mini">Back</button>

Icons:

Button nhìn quá đơn giản và không bắt mắt phải không nào? Vậy thì bạn hãy bổ sung cho nó một Icon để nhìn bắt mắt hơn.

Để thêm button thì ta phải sử dụng 2 class, class thứ nhất là loại icon và class thứ hai là vị trí icon sẽ hiển thị.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>

Ngoài ra bạn có thể sư dụng class ui-shadow-icon để tạo hiệu ứng shadow cho icon.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left  ui-shadow-icon ui-btn-a">Left</a>
<button class="ui-btn ui-icon-delete ui-btn-icon-left  ui-shadow-icon ui-btn-b">Left</button>

Disabled:

Để thiết lập một button ở dạng Disabled thì bạn bổ sung class ui-state-disabled.

Ví dụ: XEM DEMO

<a href="#" class="ui-btn ui-state-disabled ui-btn-a">Left</a>
<button class="ui-btn ui-state-disabled ui-btn-b">Left</button>

Native button:

Native button sẽ hiển thị dạng mặc định của một button.

Ví dụ: XEM DEMO

<button data-role="none">Button</button>

2. Gom nhóm button trong jQuery Mobile

Bạn có thể gom nhóm nhiều button hiển thị liên tiếp nhau bằng cách thêm một thẻ div bao quanh các button như sau:

<div data-role="controlgroup" data-type="horizontal">
    ...
</div>

Trong đó:

• data-role có giá trị là "controlgroup"
• data-type sẽ có giá trị là "horizontal" hoặc "vertical".

Ví dụ: XEM DEMO

<div data-role="controlgroup" data-type="horizontal">
    <button class="ui-btn">Button1</button>
    <button class="ui-btn">Button2</button>
    <button class="ui-btn">Button3</button>
</div>
<div data-role="controlgroup" data-type="vertical">
    <button class="ui-btn">Button1</button>
    <button class="ui-btn">Button2</button>
    <button class="ui-btn">Button3</button>
</div>

3. Lời kết

Các định dạng button trên không thể đáp ứng hết các layout của các Designer được nên bạn sẽ phải bổ sung thêm CSS bằng cách tạo một file CSS theme riêng và sử dụng như theme mặc định của jQuery Mobile.

Bài hơi dài dòng nhưng hy vọng sẽ là nguồn tài liệu hữu ích cho các bạn.