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 04: jQuery Mobile - Buttons

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ư:

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.
  • 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.

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 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 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