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 05: jQuery Mobile - Icons

jQuery Mobile hỗ trợ một nhóm các icon sử dụng cho buttons, collapsibles, listview buttons và nhiều module khác. Mỗi icon sẽ được hỗ trợ 2 loại hình ảnh, một loại SVG và một loại PNG. Theo mặc định thì ban đầu nó sẽ load hình SVG trước tại vì hình SVG chạy rất mượt trên màn hình SD và HD. Riêng với những platform không hỗ trợ SVG thì nó sẽ chuyển sang load hình PNG.

1. Icons trong jQuery Mobile

Thông thường chúng ta sử dụng icon cho các button giúp chúng trở nên đẹp và thân thiện với người dùng 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.

jQuery Mobile hỗ trợ các icons sau:

Và đây chính là HTML tạo nên những icon trên: XEM DEMO

<button class="ui-btn ui-icon-action ui-btn-icon-left ui-shadow ui-corner-all">action</button>
<button class="ui-btn ui-icon-alert ui-btn-icon-left ui-shadow ui-corner-all">alert</button>
<button class="ui-btn ui-icon-arrow-d ui-btn-icon-left ui-shadow ui-corner-all">arrow-d</button>
<button class="ui-btn ui-icon-arrow-d-l ui-btn-icon-left ui-shadow ui-corner-all">arrow-d-l</button>
<button class="ui-btn ui-icon-arrow-d-r ui-btn-icon-left ui-shadow ui-corner-all">arrow-d-r</button>
<button class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all">arrow-l</button>
<button class="ui-btn ui-icon-arrow-r ui-btn-icon-left ui-shadow ui-corner-all">arrow-r</button>
<button class="ui-btn ui-icon-arrow-u ui-btn-icon-left ui-shadow ui-corner-all">arrow-u</button>
<button class="ui-btn ui-icon-arrow-u-l ui-btn-icon-left ui-shadow ui-corner-all">arrow-u-l</button>
<button class="ui-btn ui-icon-arrow-u-r ui-btn-icon-left ui-shadow ui-corner-all">arrow-u-r</button>
<button class="ui-btn ui-icon-audio ui-btn-icon-left ui-shadow ui-corner-all">audio</button>
<button class="ui-btn ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all">back</button>
<button class="ui-btn ui-icon-bars ui-btn-icon-left ui-shadow ui-corner-all">bars</button>
<button class="ui-btn ui-icon-bullets ui-btn-icon-left ui-shadow ui-corner-all">bullets</button>
<button class="ui-btn ui-icon-calendar ui-btn-icon-left ui-shadow ui-corner-all">calendar</button>
<button class="ui-btn ui-icon-camera ui-btn-icon-left ui-shadow ui-corner-all">camera</button>
<button class="ui-btn ui-icon-carat-d ui-btn-icon-left ui-shadow ui-corner-all">carat-d</button>
<button class="ui-btn ui-icon-carat-l ui-btn-icon-left ui-shadow ui-corner-all">carat-l</button>
<button class="ui-btn ui-icon-carat-r ui-btn-icon-left ui-shadow ui-corner-all">carat-r</button>
<button class="ui-btn ui-icon-carat-u ui-btn-icon-left ui-shadow ui-corner-all">carat-u</button>
<button class="ui-btn ui-icon-check ui-btn-icon-left ui-shadow ui-corner-all">check</button>
<button class="ui-btn ui-icon-clock ui-btn-icon-left ui-shadow ui-corner-all">clock</button>
<button class="ui-btn ui-icon-cloud ui-btn-icon-left ui-shadow ui-corner-all">cloud</button>
<button class="ui-btn ui-icon-comment ui-btn-icon-left ui-shadow ui-corner-all">comment</button>
<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow ui-corner-all">delete</button>
<button class="ui-btn ui-icon-edit ui-btn-icon-left ui-shadow ui-corner-all">edit</button>
<button class="ui-btn ui-icon-eye ui-btn-icon-left ui-shadow ui-corner-all">eye</button>
<button class="ui-btn ui-icon-forbidden ui-btn-icon-left ui-shadow ui-corner-all">forbidden</button>
<button class="ui-btn ui-icon-forward ui-btn-icon-left ui-shadow ui-corner-all">forward</button>
<button class="ui-btn ui-icon-gear ui-btn-icon-left ui-shadow ui-corner-all">gear</button>
<button class="ui-btn ui-icon-grid ui-btn-icon-left ui-shadow ui-corner-all">grid</button>
<button class="ui-btn ui-icon-heart ui-btn-icon-left ui-shadow ui-corner-all">heart</button>
<button class="ui-btn ui-icon-home ui-btn-icon-left ui-shadow ui-corner-all">home</button>
<button class="ui-btn ui-icon-info ui-btn-icon-left ui-shadow ui-corner-all">info</button>
<button class="ui-btn ui-icon-location ui-btn-icon-left ui-shadow ui-corner-all">location</button>
<button class="ui-btn ui-icon-lock ui-btn-icon-left ui-shadow ui-corner-all">lock</button>
<button class="ui-btn ui-icon-mail ui-btn-icon-left ui-shadow ui-corner-all">mail</button>
<button class="ui-btn ui-icon-minus ui-btn-icon-left ui-shadow ui-corner-all">minus</button>
<button class="ui-btn ui-icon-navigation ui-btn-icon-left ui-shadow ui-corner-all">navigation</button>
<button class="ui-btn ui-icon-phone ui-btn-icon-left ui-shadow ui-corner-all">phone</button>
<button class="ui-btn ui-icon-plus ui-btn-icon-left ui-shadow ui-corner-all">plus</button>
<button class="ui-btn ui-icon-power ui-btn-icon-left ui-shadow ui-corner-all">power</button>
<button class="ui-btn ui-icon-recycle ui-btn-icon-left ui-shadow ui-corner-all">recycle</button>
<button class="ui-btn ui-icon-refresh ui-btn-icon-left ui-shadow ui-corner-all">refresh</button>
<button class="ui-btn ui-icon-search ui-btn-icon-left ui-shadow ui-corner-all">search</button>
<button class="ui-btn ui-icon-shop ui-btn-icon-left ui-shadow ui-corner-all">shop</button>
<button class="ui-btn ui-icon-star ui-btn-icon-left ui-shadow ui-corner-all">star</button>
<button class="ui-btn ui-icon-tag ui-btn-icon-left ui-shadow ui-corner-all">tag</button>
<button class="ui-btn ui-icon-user ui-btn-icon-left ui-shadow ui-corner-all">user</button>
<button class="ui-btn ui-icon-video ui-btn-icon-left ui-shadow ui-corner-all">video</button>

Tên của class sẽ được thêm bởi tiền tố ui-icon-. Ví dụ với icon action thì class của nó sẽ là ui-icon-action.

Các icons mình có sử dụng một số class mà bạn đã được học ở bài tìm hiểu button.

Còn việc xác định vị trí hiển thị các icon như trái, phải, trên, dưới thì bạn vui lòng xem lại bài tìm hiểu Button.

2. Custom icon trong jQuery Mobile

Trường hợp danh sách các icons trên không đủ để sử dụng hoặc không giống với layout của bạn thì hãy custom nó bằng cách tạo một class mới và thiết lập background icon cho thuộc tính after.

Ví dụ: XEM DEMO

CSS:

.ui-icon-skull:after{
        background-image: url("https://freetuts.net/public/hoc-lap-trinh-online/images/icons/skull.png");
        background-size: 18px 18px;
}

HTML:

<button class="ui-btn ui-icon-skull ui-btn-icon-left">action</button>

 

3. Chỉ hiển thị icons, không hiển thị text

Vấn đề này đã được học ở bài trước rồi nhưng mình cũng xin đưa ra luôn để bạn tiện theo dõi.

Để hiển thị mỗi icon thôi thì bạn bổ sung class ui-btn-icon-notext vàu button.

Ví dụ: XEM DEMO

<button class="ui-btn ui-icon-action ui-btn-icon-notext">action</button>
<button class="ui-btn ui-icon-alert ui-btn-icon-notext">alert</button>
<button class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">arrow-l</button>

4. Xóa vòng tròn phía ngoài icon

Mỗi icon trong jQuery Mobile sẽ được bao phía ngoài bởi một vòng tròn, và nếu bạn muốn xóa vòng tròn đó đi thì bổ sung vào class ui-nodisc-icon.

Ví dụ: XEM DEMO

<button class="ui-btn ui-icon-action ui-btn-icon-notext ui-nodisc-icon">action</button>
<button class="ui-btn ui-icon-alert ui-btn-icon-notext ui-nodisc-icon">alert</button>
<button class="ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-nodisc-icon">arrow-l</button>

 

5. Black icon và white icon

Các icon thông thường sẽ có màu trắng nhưng nếu bạn muốn đổi nó sang màu đen thì có thể sử dụng class ui-alt-icon.

Ví dụ: XEM DEMO

<button class="ui-btn ui-icon-action ui-btn-icon-notext ui-alt-icon">action</button>
<button class="ui-btn ui-icon-alert ui-btn-icon-notext ui-alt-icon">alert</button>
<button class="ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-alt-icon">arrow-l</button>

6. Lời kết

Các icon có sẵn trong jQuery Mobile giúp chúng ta đõ đi được một giai đoạn trong việc thiết kế giao diện của phiên bản Mobile. Tuy nhiên nó có nhược điểm là các icon sẽ không phối màu một cách linh động được nên thường ta nên kết hợp với một thư viện chuyên về icon như Font Awesome hoặc tự tạo icons theo ý của mình.

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