JQUERY MOBILE

Nhóm:

Lê Quốc Vương

Nguyễn Vương Nhân

Đặng Nguyễn Bá Trình

Huỳnh Đức Phú

Trần Hồng Đức

jQuery Mobile …?

JQUERY MOBILE LÀ … Một khung công tác phát triển giao diện người dùng

(UI).

Cho phép bạn phát triển các ứng dụng web di động

trên smartPhone và tablets.

Khung công tác jQuery Mobile được xây dựng trên

jQuery core.

Cung cấp một số phương tiện gồm thao tác và

chuyển dịch DOM, HTML, XML.

Xử lý các sự kiện, thực hiện truyền thông máy chủ

bằng cách sử dụng Ajax, cũng như các hiệu ứng

hình ảnh và hình ảnh động cho các trang web.

Tính năng …?

CÁC TÍNH NĂNG CƠ BẢN …

Khá đơn giản

Nâng cấp dần và khả năng chịu lỗi

JQuery Mobile hỗ trợ cả hai thiết bị cấp cao và cấp thấp.

Tính dễ dùng

Kích cỡ nhỏ

Kích cỡ tổng thể của khung công tác jQuery Mobile khoảng

12KB với thư viện JavaScript, 6KB với CSS, cộng với một số

biểu tượng.

Tạo chủ đề

Khung công tác này cũng cung cấp một hệ thống chủ đề, cho

phép bạn đưa ra kiểu dáng ứng dụng riêng của mình.

Trình duyệt …?

HỖ TRỢ TRÌNH DUYỆT

Apple iOS: iPhone, iPod Touch, iPad(tất cả các

phiên bản).

Android: Tất cả các thiết bị(tất cả các phiên bản).

Blackberry: Torch (Phiên bản 6).

Palm: WebOS Pre, Pixi.

Nokia: N900

$.mobile

Các phương thức được hỗ trợ

và các sự kiện

$.MOBILE

Đối tượng jQuery của JavaScrip cũng liên quan

đến ký hiệu $.

Khung công tác jQuery mở rộng jQuery core bằng

các trình cắm di động, gồm mobile hoặc $.mobile,

định nghĩa một số sự kiện và phương thức.

CÁC PHƯƠNG THỨC ĐƯỢC HỖ TRỢ

CÁC SỰ KIỆN

Có một số sự kiện mà bạn có thể kết buộc chúng

khi sử dụng phương thức bind() hoặc live().

Chẳng hạn như khởi tạo jQuery Mobile, sự kiện

cảm ứng, thay đổi định hướng, các sự kiện cuộn,

các sự kiện hiện/ẩn trang, các sự kiện khởi tạo

trang và các sự kiện hình ảnh động.

VÍ DỤ

Kết buộc với sự kiện mobileinit

Sự kiện trên cho phép bạn ghi đè lên các giá trị

mặc định khi jQuery Mobile khởi động. Một số các

giá trị thiết lập có thể bị ghi đè, chẳng hạn:

-LoadingMessage: thiết lập văn bản mặc định

xuất hiện khi một trang đang nạp.

-defaultTransition: thiết lập hiệu ứng chuyển

tiếp mặc định cho các thay đổi trang có sử dụng Ajax.

Các thuộc tính data-* của HTML

CÁC THUỘC TÍNH DATA-* CỦA HTML5

jQuery Mobile dựa vào các thuộc tính data-* của

HTML5 để hỗ trợ các phần tử giao diện người

dùng, các hiệu ứng chuyển tiếp và cấu trúc trang

khác nhau.

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A)

Các thanh công cụ và thành phần nội dung

Header - Thanh đầu trang

<div data-role=“header”>

Content - Nội dung

<div data-role=“content”>

Footer – Thanh chân trang

<div data-role=“footer”>

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A)

Các nút ấn(button)

Các nút ấn thông thường

<a href="#" data-role="button">Anchor</a>

<form>

<button>Button</button>

<input value="Input" type="button">

<input value="Submit" type="submit">

<input value="Reset" type="reset">

</form>

Các nút ấn được nhóm lại:

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

<a href="#" data-role="button">Yes</a>

<a href="#" data-role="button">No</a>

<a href="#" data-role="button">Maybe</a>

</div>

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A)

Các nút ấn(button)

Các nút ấn trực tiếp:

Khi chúng ta cần sắp xếp các nút ấn trên 1 dòng nhất định

<p>

<a href="#" data-role="button" data-

inline="true">True</a>

<a href="#" data-role="button" data-

inline="true">False</a>

</p>

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A) Các khung biểu mẫu

<form action="forms-results.php" method="get">

<fieldset>

<div data-role="fieldcontain">

<label for="select-options" class="select">Choose an option:</label>

<select name="select-options" id="select-options">

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

<option value="option2">Option 3</option>

</select>

</div>

<button type="submit">Submit</button>

</fieldset>

</form>

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A)

Các khung biểu mẫu

<p>

<ul data-role="listview" data-inset="true">

<li> <a href="index.html">Get Friends</a> </li>

<li> <a href="index.html">Post to Wall</a> </li>

<li><a href="index.html">Send Message</a></li>

</ul>

</p>

CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH

PHẦN GIAO DIỆN NGƯỜI DÙNG(A)

Các hộp thoại

Các hiệu ứng chuyển tiếp

<a href="index.html" data-transition="pop" data-back="true">

<a href="index.html" data-transition=“slidedown" data-back="true">

<a href="index.html" data-transition=“slideup" data-back="true">

<a href="index.html" data-transition=“flow" data-back="true">

<a href="index.html" data-transition=“flip" data-back="true">

<a href="index.html" data-transition=“none" data-back="true">

<a href="foo.html" data-rel="dialog">Open dialog</a>

Components …?

COMPONENTS

Pages & Dialogs

Toolbars

Buttons

Content Formatting

Form elements

Listviews

PAGES & DIALOGS

Anatomy of a page

Single page template

Multi-page template

Linking pages

Page transitions

Dialogs

Theming pages

TOOLBARS

Navbars

Fixed positioning

Theming toolbars

BUTTONS

Button Basics

Button Icons

Inline Buttons

Grouped buttons

Theming Buttons

CONTENT FORMATTING

Basic HTML Styles

Layout Grids (columns)

Collapsible content Block

Theming Content

FORM ELEMENTS

Tất cả các công cụ form đều được bắt đầu với

thành phần form nguyên gốc với ngữ nghĩa

Rich HTML được tăng cường để làm chúng trở

nên hấp dẫn và dễ sử dụng hơn. Trong những

trình duyệt không hỗ trợ các điều khiển tùy

chỉnh, chúng vẫn có trải nghiệm có ích

Hầu hết những thành phần form thông thường

bao gồm: text inputs, search, sliders (thanh

trượt), flip toggle switches, radio buttons,

checkboxes, và select menus. Có sẵn trong

phản tiêu chuẩn và bản thu nhỏ

Cấu trúc form

Tất cả các form nên được gói trong thẻ form có

action và method để điều khiển dữ liệu form thực

thi trên server

<form action="form.php" method="post">...</form>

Thêm thuộc tính data-mini="true" vào để tạo ra

một phiên bản thu nhỏ, có thể đưa vào một

fieldcontainer để thiết lập nhiều yếu tố cùng một

lúc

VD:

<label for="basic">Text Input:</label>

<input type="text" name="name" id="basic" data-

mini="true" />

tạo ra input không cao như phiên bản chuẩn và

có kích thước chữ nhỏ hơn

TRUY CẬP NHÃN ẨN

Jquery mobile yêu cầu tất cả các thành phần form

đều kết hợp với 1 nhãn (label) có ý nghĩa. Để ẩn

nhãn này đi ta sử dụng lớp ui-hidden-accessible

VD

<label for="username" class="ui-hidden-

accessible">Username:</label>

<input type="text" name="username" id="username"

value="" placeholder="Username"/>

Thẻ placeholder được sử dụng như một label

VÔ HIỆU HÓA THÀNH PHẦN FORM

Ta có thể sử dụng thuộc tính disable vào

thành phần hoặc sử dụng lớp vô hiệu hóa

ui-disabled để cho hiệu quả tương tự

FIELD CONTAINERS

Để cải thiện kiểu dáng nhãn và thành phần

form trên màn hình rộng, hãy gói mỗi

nhãn/form bởi 1 thẻ div hoặc fieldset với

thuộc tính data-role=“fieldcontain”. Cơ cấu

này gắn các thẻ input và các nhãn liên kết

kề bên nhau

DEMO

LISTVIEWS

Danh sách được sử dụng cho việc

hiển thị dữ liệu, điều hướng, danh

sách kết quả và dữ liệu nhập vào vì

thế Jquery Mobile bao gồm một loạt

các danh sách và định dạng để bao

quát các mẫu thiết kế phổ biến nhất.

basic linked list

nested list

numbered list

split button list

list dividers

autodividers

countbubble

thumbnails

icons

list formatting

inset styled lists

search filter bar

inset search filter bar

search filter with

dividers

search filter hidden

data

read-only lists

read-only inset lists

list with forms

collapsible lists