Tài liệu Giới thiệu về jQuery Mobile doc

Về đầu trang jQuery Mobile jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên c

Giới thiệu về jQuery Mobile

Giới thiệu

jQuery Mobile, một khung công tác giao diện người dùng (UI), cho phép bạn viết một ứng dụng web di động chức năng mà không cần viết một dòng mã JavaScript Trong bài này, hãy tìm hiểu

về các tính năng của khung công tác này, gồm các trang cơ bản, các thanh công cụ điều hướng, các nút điều khiển biểu mẫu và các hiệu ứng chuyển tiếp

Để làm theo cùng với bài này, bạn sẽ cần:

 Xem trước về HTML

 Hiểu các điều cơ bản của JavaScript

 Kiến thức cơ bản về jQuery

Bạn có thể tải về mã nguồn của trình cắm thêm jQuery được sử dụng trong bài này từ bảng Tải

về dưới đây Phần Tài nguyên có thông tin về jQuery, JavaScript, DOM, HTML5 và nhiều hơn nữa

Về đầu trang

jQuery Mobile

jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các máy điện thoại thông minh và các máy tính bảng Khung công tác jQuery Mobile được xây dựng trên đỉnh lõi jQuery

và cung cấp một số phương tiện, gồm thao tác và chuyển dịch DOM (Mô hình đối tượng tài liệu), HTML và 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 Bản thân khung công tác di động là một bản tải bổ sung, riêng biệt có kích cỡ khoảng 12KB (đã rút gọn và nén) từ lõi jQuery có kích cỡ khoảng 25KB khi đã rút gọn/nén Cũng như với phần còn lại của khung công tác jQuery, jQuery Mobile là thư viện được cấp phép kép (MIT và GPL), miễn phí

Mặc dù jQuery Mobile vẫn đang là bản Alpha, nhưng đã có một số trình diễn và tài liệu hướng dẫn Chúng tôi đề nghị bạn nên xem lại tài liệu hướng dẫn và các trình diễn trong phần Tài nguyên và xem mã nguồn trình diễn trong phần Tải về

Tại thời điểm này viết bài này, khung công tác di động jQuery là một phiên bản Alpha 2

(v1.0a2) Mã đang ở dạng dự thảo và có thể thay đổi Tuy nhiên, khung công tác hiện có là khá chắc chắn Với một tập các thành phần ấn tượng có sẵn trong bản phát hành alpha, jQuery

Mobile hứa hẹn sẽ là một khung công tác và bộ công cụ lớn về phát triển ứng dụng web di động Các tính năng cơ bản của jQuery Mobile gồm:

Khá đơn giản

Khung công tác dễ sử dụng Bạn có thể phát triển các trang chủ yếu bằng cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu hoặc không dùng mã này

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

Trong khi jQuery Mobile sử dụng mã HTML5, CSS3 và JavaScript mới nhất, không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ như vậy Triết lý của JQuery Mobile là

hỗ trợ cả hai thiết bị có khả năng cấp cao và khả năng cấp thấp hơn, chẳng hạn như những thiết bị không hỗ trợ JavaScript và vẫn cung cấp các trải nghiệm tốt nhất có thể

Tính dễ dùng

jQuery Mobile được thiết kế với chủ ý dễ dùng Nó có sự hỗ trợ cho Các ứng dụng Internet phong phú có thể dễ dùng (WAI-ARIA - Accessible Rich Internet Applications)

để giúp làm cho các trang web có thể dễ dùng với khách truy cập bị tàn tật nhờ sử dụng các công nghệ trợ giúp

Kích cỡ nhỏ

Kích cỡ tổng thể của khung công tác di động jQuery là tương đối nhỏ 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

Khi được dùng với các bộ công cụ như là PhoneGap (xem phần Tài nguyên), có sử dụng các công nghệ web để xây dựng các ứng dụng độc lập, khung công tác jQuery Mobile có thể giúp đơn giản hóa việc phát triển ứng dụng của bạn

Về đầu trang

Hỗ trợ trình duyệt

Chúng tôi đã đi một chặng đường dài với sự hỗ trợ trình duyệt của thiết bị di động, nhưng không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ cho HTML5, CSS 3 và JavaScript Lĩnh vực này là nơi sự hỗ trợ nâng cấp tăng dần và khả năng chịu lỗi của jQuery Mobile đi vào Như

đã nêu, jQuery Mobile hỗ trợ cả hai thiết bị có khả năng cấp cao và cấp thấp, chẳng hạn như những thiết bị không hỗ trợ JavaScript Nâng cấp tăng dần có các nguyên tắc cốt lõi sau (nguồn: Wikipedia):

 Tất cả các nội dung cơ bản nên có thể dễ dùng với tất cả các trình duyệt

 Tất cả các chức năng cơ bản nên có thể dễ dùng với tất cả các trình duyệt

 Bố trí nâng cao được cung cấp bởi CSS liên kết ngoài

 Hành vi nâng cao được cung cấp bởi JavaScript liên kết ngoài

 Các sở thích trình duyệt của người dùng cuối được tôn trọng

Tất cả các nội dung cơ bản nên trình diễn (như đã thiết kế) trên các thiết bị cơ bản, trong khi nhiều nền tảng và các trình duyệt nâng cao hơn sẽ dần dần được nâng cấp bằng CSS và

JavaScript liên kết ngoài, bổ sung

jQuery Mobile hiện đang cung cấp sự hỗ trợ cho các nền tảng di động sau đây:

 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 (đang xây dựng)

Xem ma trận trình duyệt được hỗ trợ trên các trang web jQuery Mobile để biết thêm thông tin (xem phần Tài nguyên)

Về đầu trang

Tóm tắt các thành phần giao diện người dùng

jQuery Mobile cung cấp sự hỗ trợ mạnh mẽ cho các loại phần tử giao diện người dùng khác nhau Hình 1 cho thấy một bản tóm tắt về các thành phần giao diện người dùng đang được hỗ trợ hiện nay

Hình 1 Các phần tử giao diện người dùng jQuery Mobile (vào tháng 8 năm 2010)

Các thanh công cụ, các nút ấn, các khung nhìn danh sách, các thẻ, các trình đơn bật lên, các hộp thoại, các hiệu ứng chuyển tiếp, các ô cửa sổ chỉnh sửa và các phần tử biểu mẫu đều được hỗ trợ Hầu hết, nếu không phải tất cả, các phần tử giao diện người dùng mà bạn cần cho các ứng dụng web di động của mình đều được cung cấp

Về đầu trang

$.mobile và các sự kiện và các phương thức được hỗ trợ

Đối tượng jQuery của JavaScript cũng liên quan đến ký hiệu $ Khung công tác jQuery Mobile

mở rộng lõi jQuery bằng các trình cắm thêm di động, gồm mobile hoặc $.mobile có định nghĩa một số sự kiện và phương thức Một số phương thức do $.mobile trưng ra được mô tả dưới đây

Bảng 1 Phương thức do $.mobile trưng ra

Phương thức Cách sử dụng

$.mobile.changePage

Để thay đổi bằng lập trình từ trang này sang trang khác

Ví dụ, để chuyển đến trang weblog.php khi sử dụng một hiệu ứng chuyển tiếp slide (trượt), sử dụng

$.mobile.changePage("weblog.php", "slide")

$.mobile.pageLoading

Để hiển thị hoặc ẩn thông báo nạp trang

Ví dụ, để ẩn thông báo, sử dụng

$.mobile.pageLoading(true).

$.mobile.silentScroll

Để cuộn đến một vị trí Y cụ thể mà không tạo ra các sự kiện cuộn

Ví dụ, để cuộn đến vị trí Y 50, sử dụng

$.mobile.silentScroll(100)

$.mobile.addResolutionBreakpoints

jQuery Mobile đã định nghĩa một số điểm ngắt cho các lớp min/max Gọi phương thức này để bổ sung các điểm ngắt

Ví dụ, để bổ sung lớp min/max cho các chiều rộng điểm ảnh 800, sử dụng

$.mobile.addResolutionBreakpoints(800)

$.mobile.activePage Đề cập đến trang đang hoạt động hiện nay

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ụ, các sự kiện cảm ứng gồm tap (chạm nhẹ), taphold (chạm và giữ) và các sự kiện vuốt khác nhau Các sự kiện Scroll (Cuộn) gồm scrollstart (khởi động cuộn) và scrollstop

(dừng cuộn) Các sự kiện Page (Trang) cho phép bạn nhận được các thông báo: trước khi tạo một trang, khi một trang được tạo ra, ngay trước khi trang được hiển thị hoặc ẩn đi và khi trang được hiển thị và ẩn đi

Liệt kê 1 cho thấy một ví dụ về kết buộc một sự kiện cụ thể khi jQuery Mobile bắt đầu thực hiện

Liệt kê 1 Kết buộc với sự kiện mobileinit

$(document).bind("mobileinit", function(){

//apply overrides here

});

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

 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ó nhiều tham số cấu hình nữa mà bạn có thể ghi đè khi cần Xem tài liệu hướng dẫn jQuery Mobile (xem phần Tài nguyên) hoặc mã nguồn (xem phần Tải về), để biết thêm thông tin

Bạn cũng có thể kết buộc với các sự kiện khác cho phép bạn tạo các ứng dụng động dựa trên các

sự kiện touch (cảm ứng) và page (trang)

Về đầu trang

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 này đang bị các trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ Bảng 2 cho thấy cách sử dụng các thuộc tính data-*

để tạo ra các thành phần giao diện người dùng

Bảng 2 Các thuộc tính data-* cho các thành phần giao diện người dùng

Thành phần Thuộc tính data-* của HTML5

Các thanh công cụ Đầu trang (Header) và

Chân trang (Footer )

<div data-role="header">

<div data-role="footer">

Phần thân nội dung (content) <div data-role="content">

Các nút ấn (button) <a href="index.html" data-role="button"

data-icon="info">Button</a>

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

<div data-role="controlgroup">

<a href="index.html" data-role="button">Yes</a>

<a href="index.html" data-role="button">No</a>

<a href="index.html" data-role="button">Hell Yeah</a>

</div>

Các nút ấn trực tiếp (inline button)

<div data-inline="true">

<a href="index.html" data-role="button">Foo</a>

<a href="index.html" role="button" data-theme="b">Bar</a>

</div>

Phần tử Biểu mẫu (Trình đơn Select)

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

Các khung nhìn danh sách cơ bản

<ul data-role="listview">

<li><a href="index.html">One</a></li>

<li><a href="index.html">Two</a></li>

<li><a href="index.html">Three</a></li>

</ul>

Các hộp thoại

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

<a href="dialog.html" role="button" data-inline="true"

data-rel="dialog" data-transition="pop">Open dialog</a>

Các hiệu ứng chuyển tiếp (transition) <a href="index.html" transition="pop"

data-back="true">

Tài liệu hướng dẫn jQuery Mobile có một danh sách đầy đủ về cú pháp data-* được hỗ trợ

Về đầu trang

Cấu trúc của một trang JQuery Mobile

Phần này bàn về cấu trúc chung của một trang JQuery Mobile jQuery Mobile có các hướng dẫn

về cấu trúc của chính các trang đó Nói chung, một cấu trúc trang nên có các phần sau đây:

Thanh Đầu trang (Header)

Thông thường chứa tiêu đề trang và nút Back (Quay lại)

Nội dung (Content)

Nội dung của ứng dụng của bạn

Thanh Chân trang (Footer)

Thường chứa các phần tử điều hướng, thông tin bản quyền hoặc bất cứ thứ gì bạn cần thêm vào phần chân trang

Hình 2 cho thấy các ví dụ về các phần khác nhau

Hình 2 Kết cấu chung của một ứng dụng web jQuery Mobile

Các thanh công cụ đầu trang và chân trang hỗ trợ các tùy chọn xác định vị trí toàn màn hình và

cố định Vị trí cố định làm cho các thanh công cụ không thay đổi khi cuộn trang Vị trí toàn màn hình làm việc giống như vị trí cố định ngoại trừ các thanh công cụ được hiển thị chỉ khi nhấn vào trang đó (để cung cấp một trải nghiệm dễ dàng, đầy đủ nội dung) Phần còn lại của phần này khám phá mã HTML cho một cấu trúc trang tổng quát

Bản thân định nghĩa của một kiểu tài liệu HTML là !DOCTYPE html>, mà nó cũng định nghĩa một kiểu tài liệu HTML5

Phần đầu HTML nạp ba thành phần jQuery Mobile quan trọng:

 jQuery Core library — Thư viện jQuery lõi

 jQuery Mobile library — Một phần đặc trưng-di động của khung công tác jQuery

 jQuery Mobile CSS — CSS định nghĩa các phần tử giao diện người dùng jQuery Mobile lõi Nó định nghĩa các hiệu ứng chuyển tiếp và các tiện ích giao diện người dùng khác nhau, chẳng hạn như các thanh trượt và các nút ấn và sử dụng nhiều các biến đổi Webkit

và hình ảnh động

Liệt kê 2 cho thấy phần đầu HTML

Liệt kê 2 Phần đầu HTML

<html>

<head>

<meta charset="utf-8" />

<title>Intro to jQuery Mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile

/1.0a2/jquery.mobile-1.0a2.min.css" />

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2

/jquery.mobile-1.0a2.min.js"></script>

</head>

Phần tiếp theo của mã HTML định nghĩa chính trang đó; hãy xem cách sử dụng thuộc tính data-role="page" Liệt kê 3 hiển thị một ví dụ

Liệt kê 3 Định nghĩa một khối trang

<body>

<div data-role="page" id="page1">

Liệt kê 3 định nghĩa một trang Thuộc tính id chỉ cần khi nhiều khối trang cục bộ nằm trên tài liệu của tệp HTML giống nhau, nhưng cách thực hành tốt là định nghĩa một ID duy nhất

Một số liệt kê mã tiếp theo cho thấy cách định nghĩa các phần đầu trang, nội dung và chân trang khác nhau của trang này Thanh đầu trang thường chứa tiêu đề trang và nút ấn Back, như trong Liệt kê 4

Liệt kê 4 Phần thanh đầu trang của trang

<div data-role="header">

<h1>Header Bar</h1>

</div><! /header >

Trong trường hợp này, thanh đầu trang chỉ gồm một văn bản tiêu đề của đầu trang H1 Phần lớn nội dung của bạn xuất hiện sau phần đầu trang, như cho thấy dưới đây Ví dụ trong Liệt kê 5 chỉ hiển thị một đoạn mã đơn giản, nhưng đây là nơi mà bạn sẽ thêm các danh sách, các ấn nút, các biểu mẫu và v.v

Liệt kê 5 Phần nội dung của trang

<div data-role="content">

<p>Content Section</p>

</div><! /content >

Thanh chân trang là nơi mà bạn thường đặt các phần tử điều hướng và thông tin bản quyền, như trong Liệt kê 6

Liệt kê 6 Phần thanh chân trang

<div data-role="footer">

<h4>Footer Bar</h4>

</div><! /footer >

</div><! /page >

</body>

</html>

Phần chân trang ví dụ trong Liệt kê 6 rất đơn giản Việc thêm một thanh điều hướng vào thanh chân trang không quá phức tạp, như trong Liệt kê 7

Liệt kê 7 Thêm một thanh điều hướng vào phần chân trang

<div data-role="footer" class="ui-bar">

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

<a href="index.html" data-role="button">Today</a>

<a href="index.html" data-role="button">Tomorrow</a>

<a href="index.html" data-role="button">Week</a>

<a href="index.html" data-role="button">No date</a>

</div>

</div><! /footer >

Hình 3 cho thấy phần thanh chân trang kết quả có thanh điều hướng mới được bổ sung