Sử dụng API của jQuery Mobile để điều khiển tùy chỉnh độ mịn pot

Sử dụng API của jQuery Mobile để điều khiển
tùy chỉnh độ mịn
Các tùy chọn toàn cầu
Các tùy chọn toàn cầu sau đây có sẵn thông qua API của jQuery Mobile và cho phép bạn thay
đổi cách jQuery Mobile hoạt động theo mặc định:
 Mở rộng sự kiện khởi tạo của jQuery Mobile.
 Tạo các vùng tên tùy chỉnh.
 Khởi tạo trang.
 Tùy chỉnh khóa URL của trang con.
 Thiết lập trang hoạt động và các lớp nút ấn.
 Thiết lập trang mặc định và các chuyển tiếp hộp thoại.
 Tùy chỉnh thông báo nạp và thông báo lỗi.
Mở rộng sự kiện khởi tạo của jQuery Mobile
jQuery Mobile gồm một sự kiện khởi tạo, được nạp thậm chí trước khi sự kiện document.ready
của jQuery được nạp. Trên thực tế, jQuery Mobile khởi động sự kiện khởi tạo của nó, gọi là
mobileinit, trên bản thân đối tượng tài liệu. Điều này cho phép bạn ghi đè và mở rộng các tùy
chọn toàn cầu mặc định của jQuery Mobile, là điểm khởi đầu cho toàn bộ bài này. Để mở rộng
sự kiện mobileinit, bạn cần thêm trình xử lý sự kiện JavaScript tùy chỉnh của mình trước khi
jQuery Mobile được nạp và sau khi khung công tác jQuery đã nạp (xem Liệt kê 1).

Liệt kê 1. Mở rộng sự kiện mobileinit của jQuery Mobile

<script type="text/javascript" .js"></script>
<script type="text/javascript" src="custom-jqm-mobileinit.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>

Để mở rộng sự kiện mobileinit trước tiên bạn cần kết buộc nó với một hàm tùy chỉnh. Liệt kê 2
cho thấy một ví dụ sử dụng phương thức bind (kết buộc) để mở rộng sự kiện mobileinit.

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

$(document).bind("mobileinit", function() {
// Override global options here
});

Khi bạn kết buộc thành công với sự kiện mobileinit, bạn có thể ghi đè lên các tùy chọn toàn cầu.
Để ghi đè lên các tùy chọn toàn cầu này, bạn có thể hoặc sử dụng phương thức extend (mở
rộng) của jQuery để mở rộng đối tượng $.mobile (xem Liệt kê 3) hoặc chỉ cần ghi đè lên các
đặc tính riêng lẻ bằng cách trực tiếp thiết lập chúng.

Liệt kê 3. Mở rộng đối tượng $.mobile

$(document).bind("mobileinit", function() {
$.extend( $.mobile , {
property = value
});
});

Nếu có nhiều đặc tính mà bạn muốn cập nhật, phương thức extend là một lựa chọn sạch hơn vì
bạn không cần phải viết đối tượng $.mobile nhiều lần. Tuy nhiên, nếu bạn chỉ có một đặc tính
mà bạn muốn cập nhật, để thiết lập riêng đặc tính đó phải mất vài dòng mã (xem Liệt kê 4).

Liệt kê 4. Ghi đè lên các giá trị của một đặc tính riêng lẻ

$(document).bind("mobileinit", function() {
$.mobile.property = value;
});

Đối tượng $.mobile là điểm khởi đầu để thiết lập tất cả các đặc tính.
Tạo các vùng tên tùy chỉnh
Bạn có thể tùy chỉnh các thuộc tính data- của HTML5, chẳng hạn như data-role, thông qua

các vùng tên. Một vùng tên cho phép bạn thêm một tên tùy chỉnh sẽ xuất hiện, ví dụ giữa phần
data- và -role của thuộc tính data-role. Đặc tính $.mobile cho phép bạn tùy chỉnh các vùng
tên là ns. Liệt kê 5 cho thấy một ví dụ về thiết lập một vùng tên tùy chỉnh khi sử dụng đặc tính
ns.

Liệt kê 5. Tạo một vùng tên tùy chỉnh

$(document).bind("mobileinit", function() {
$.mobile.ns = "my-custom-ns";
});

Vùng tên tùy chỉnh được sử dụng trong Liệt kê 5 sẽ tạo ra data-my-custom-ns-role chứ không
phải là data-role, cho phép bạn nhằm vào các vùng tên này qua các bộ chọn CSS. Việc nhằm
vào các vùng tên tùy chỉnh thông qua các bộ chọn CSS cho phép thêm một cách nữa để thiết kế
một chủ đề tùy chỉnh cho các tiện ích di động sử dụng những vùng tên đó.
Khởi tạo trang
jQuery Mobile gồm có một đặc tính có tên là autoInitializePage quyết định việc trang web
đó có cần được khởi tạo không. Theo mặc định, giá trị của đặc tính này được thiết lập là đúng
(true), do đó trang này luôn được khởi tạo khi tài liệu đã sẵn sàng. Tuy nhiên, bằng cách mở rộng
đối tượng $.mobile, bạn có thể thiết lập đặc tính là sai (false) và xử lý khởi tạo trang tại một
thời điểm sau đó. Liệt kê 6 cho thấy một ví dụ về cách bạn có thể trì hoãn tạm thời việc khởi tạo
trang này trong khi các kịch bản lệnh khác đang chạy. Nếu bạn có một lượng lớn mã JavaScript
phía khách đang chạy trên trang web, thì việc trì hoãn khởi tạo cho đến khi DOM hoàn tất tải lên
và JavaScript phía máy khách có thể chạy có lẽ là một ý tưởng tốt.

Liệt kê 6. Thiết lập khởi tạo tự động cho các trang web di động

<!DOCTYPE HTML>
<html>
<head>

<title>Understanding the jQuery Mobile API</title>
<script type="text/javascript" ery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.autoInitializePage = false;
});
</script>
<script type="text/javascript" src="jquery.mobile.js"></script>
</head>

<body>

<div data-role="page">
<div data-role="content">
<ul data-role="listview" id="my-list"></ul>
</div>
</div>

<script type="text/javascript">
$('#my-list').html('<li><a href="page-2.html">Link to another
page</a></li>');
$.mobile.autoInitializePage = true;
</script>

</body>
</html>

Tùy chỉnh khóa URL trang con
Khi tham chiếu tới các trang con, jQuery Mobile sử dụng một khóa tham số URL là ui-page
theo mặc định. Bạn có thể thay đổi khóa này thông qua một đặc tính của đối tượng $.mobile có

tên là subPageUrlKey. Bất kỳ giá trị chuỗi nào mà đặc tính này được cập nhật đều phản ánh
trong các URL trang con do tiện ích (widget) tạo ra. Ví dụ, nếu bạn sử dụng một subPageUrlKey
tùy chỉnh nhận giá trị là my-page, URL mặc định của web-page.html&ui-page=value sẽ trở
thành web-page.html&my-page=value.
Ngoài việc cung cấp một cách để tạo ra các URL hấp dẫn hơn, các khóa URL trang con tùy
chỉnh cũng có thể cung cấp một cách để rút ngắn các URL hoặc thiết lập các giá trị của chúng
bằng một giá trị nào đó đặc trưng hơn cho trang web đang sử dụng chúng.
Thiết lập trang hoạt động và các lớp nút ấn
Khi một trang web gồm có khung công tác jQuery Mobile, có một lớp CSS mặc định được tự
động áp dụng cho phần tử ui-page. Để thay đổi giá trị mặc định, là ui-page-active, bạn chỉ
cần thay đổi đặc tính activePageClass của đối tượng $.mobile. Nhờ cập nhật lớp này, CSS
mặc định có liên quan đến khung công tác sẽ không còn áp dụng kiểu dáng của nó cho lớp ui-
page-active vì lớp này không còn tồn tại nữa. Vì vậy, điều quan trọng là tạo ra lớp CSS tùy
chỉnh riêng của bạn tương ứng với giá trị mà bạn cung cấp cho đặc tính này.
Thiết lập trang mặc định và các chuyển tiếp hộp thoại
Theo mặc định, các trang và các hộp thoại đều gồm có một hiệu ứng chuyển tiếp trong jQuery
Mobile khi xử lý các thay đổi trang thông qua Ajax. Chuyển tiếp trang mặc định là slide, còn
chuyển tiếp hộp thoại mặc định là pop. Để thay đổi các giá trị này, bạn cần nhằm vào đặc tính
defaultPageTransition hoặc defaultDialogTransition. Liệt kê 7 cho thấy cách dễ dàng để
thay đổi các giá trị của những đặc tính này.

Liệt kê 7. Thiết lập các chuyển tiếp mặc định cho trang và hộp thoại

$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "fade";
$.mobile.defaultDialogTransition = "fade";
});

Trong ví dụ này, chuyển tiếp cho cả các trang lẫn các hộp thoại là một hiệu ứng mờ dần. Khung
công tác gồm có sáu hiệu ứng chuyển tiếp dựa trên CSS: slide (trượt), slideup (trượt lên),

slidedown (trượt xuống), pop (bật lên), fade (mờ dần) và flip (lật). Bạn cũng có thể áp dụng
các hiệu ứng này trực tiếp trên các siêu liên kết bằng cách bao gồm thuộc tính data-
transition.
Tùy chỉnh thông báo nạp và thông báo lỗi
Hai tùy chọn toàn cầu khác mà khung công tác cho phép có quyền điều khiển là thông báo nạp
và thông báo lỗi. Thông báo nạp hiển thị một giá trị chuỗi ký tự là loading (đang nạp) theo mặc
định. Để cập nhật đặc tính này, bạn chỉ cần nhằm vào đặc tính loadingMessage (thông báo nạp).
Trong Liệt kê 8, tôi thay đổi thông báo nạp mặc định từ loading sang Please wait. (Xin vui
lòng chờ). Kết quả là, khi sử dụng Ajax để nạp các trang, một hộp thoại nhỏ xuất hiện với thông
báo nạp tùy chỉnh của tôi.

Liệt kê 8. Thiết lập thông báo nạp mặc định

$(document).bind("mobileinit", function() {
$.mobile.loadingMessage = "Please wait";
});

Giá trị mặc định của pageLoadErrorMessage là Error Loading Page. (Trang đang nạp có lỗi).
Tôi cập nhật thông báo này để thay đổi nó thành một cái gì đó thân thiện hơn với người dùng
trong Liệt kê 9.

Liệt kê 9. Thiết lập thông báo lỗi mặc định

$(document).bind("mobileinit", function() {
$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try
again.';
});

Về đầu trang
Móc nối vào các sự kiện jQuery Mobile

Bạn có thể mở rộng các kiểu sự kiện sau nhờ sử dụng API của jQuery Mobile:
 Các sự kiện cảm ứng
 Các sự kiện định hướng
 Các sự kiện cuộn
Các sự kiện cảm ứng
Có một số sự kiện cảm ứng có thể tùy chỉnh được trong jQuery Mobile. Tuy nhiên, những sự
kiện này chỉ có sẵn khi người dùng đang tương tác với một thiết bị có khả năng cảm ứng truy cập
trang web jQuery Mobile của bạn. Khi những sự kiện này có sẵn, bạn có thể khởi động bất kỳ mã
JavaScript tùy chỉnh nào như là một đáp ứng với năm sự kiện khác nhau: tap, taphold, swipe,
swipeleft, swiperight. Tên của mỗi sự kiện đó đã tự giải thích ý nghĩa, như bạn có thể thấy
trong Bảng 1.

Bảng 1. Customizable touch events for jQuery Mobile
Sự kiện Mô tả
tap (chạm
nhanh)
Khởi động khi một ai đó chạm nhanh vào màn hình.
taphold

(chạm và giữ)

Khởi động khi ai đó chạm nhẹ vào màn hình và tiếp tục giữ chạm vào màn hình
khoảng một giây.
swipe (vuốt)
Khởi động khi vuốt trang web theo chiều ngang hoặc theo chiều dọc. Sự kiện này
thực tế là sự kiện duy nhất có các đặc tính gắn kèm. Các đặc tính này là
scrollSupressionThreshold, durationThreshold,
horizontalDistanceThreshold và verticalDistanceThreshold.
swipeleft

(vuốt trái)
Khởi động khi vuốt trang web sang trái.
swiperight

(vuốt phải)
Khởi động khi vuốt trang web sang phải.

Để kết buộc bất kỳ sự kiện cảm ứng nào trong số này, bạn cần sử dụng sự kiện document.ready.
Khi tài liệu đã sẵn sàng, bạn có thể truy cập vào một phần tử và kết buộc sự kiện cảm ứng đã
chọn của bạn (xem Liệt kê 10).

Liệt kê 10. Kết buộc các sự kiện cảm ứng

<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script ry.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tap-hold-test").bind("taphold", function(event) {
$(this).html("Tapped and held");
});
});
</script>
<script src="jquery.mobile.js"></script>
</head>

<body>

<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li class="tap-hold-test">Tap and hold test</li>
</ul>
</div>
</div>
</body>
</html>

Như bạn có thể thấy, mã ở trên kết buộc một sự kiện cảm ứng taphold với một mục danh sách.
Khi tài liệu đã sẵn sàng, mục danh sách trong ví dụ này sẵn sàng đợi được tác động thông qua
jQuery. Vì vậy, nó được nhằm đến và được kết buộc với sự kiện taphold, làm thay đổi HTML
trong mục danh sách.
Các sự kiện định hướng
Trên các thiết bị điện thoại thông minh và máy tính bảng, có một sự kiện định hướng duy nhất
tên là orientationchange (thay đổi hướng). Sự kiện này khởi động khi xoay dọc hoặc xoay
ngang thiết bị. Để xác định xem thiết bị xoay theo hướng nào, bạn có thể truy cập vào đặc tính
orientation (định hướng), cung cấp một giá trị chỉ đọc là portrait (hướng thẳng đứng) hoặc
landscape (hướng nằm ngang). Việc kết buộc với sự kiện orientationchange yêu cầu bạn
nhằm vào phần tử body và sau đó sử dụng phương thức bind để kết buộc sự kiện này (xem Liệt
kê 11).

Liệt kê 11. Kết buộc sự kiện orientationchange với phần tử body

$(document).ready(function(){
$('body').bind('orientationchange', function(event) {

alert('orientationchange: '+ event.orientation);
});
});

Một điều cũng quan trọng là kết buộc sự kiện sau khi tài liệu đã sẵn sàng. Nếu không, bạn nhận
được kết quả không nhất quán do phần tử body có thể chưa có sẵn tại thời điểm kết buộc. Bạn
cũng có thể đưa mã này tiến một bước xa hơn bằng cách khởi động sự kiện orientationchange
khi tài liệu đã sẵn sàng (xem Liệt kê 12).

Liệt kê 12. Khởi động sự kiện orientationchange khi tài liệu đã sẵn sàng

$(document).ready(function(){
$('body').bind('orientationchange', function(event) {
alert('orientationchange: '+ event.orientation);
});

$('body').trigger('orientationchange');
});

Việc khởi động sự kiện khi tài liệu đã sẵn sàng cho phép bạn xác định hướng trang khi bắt đầu
nạp trang web. Điều này đặc biệt có ích trong tình huống ở đó bạn đang hiển thị nội dung dựa
trên định hướng trang hiện tại của các thiết bị đang sử dụng. Các giá trị định hướng trang cũng
có thể truy cập được thông qua CSS vì chúng được thêm vào phần tử HTML trong trang web của
bạn. Những tính năng mạnh mẽ này cho phép bạn thay đổi cách bố trí nội dung của bạn dựa trên
định hướng trang của thiết bị.
Các sự kiện cuộn
jQuery Mobile gồm có các sự kiện cuộn được khởi động khi người dùng cuộn trang web. Sự kiện
đầu tiên là sự kiện scrollstart (khởi động cuộn), được khởi động khi một quá trình cuộn trang
bắt đầu. Liệt kê 13 cho thấy cách bạn có thể kết buộc sự kiện này và thêm mã JavaScript tùy
chỉnh để chạy khi quá trình cuộn bắt đầu.

Liệt kê 13. Kết buộc với sự kiện scrollstart

$(document).ready(function(){

$('body').bind('scrollstart', function(event) {
// Add scroll start code here
});

});

Một sự kiện khác, tên là scrollstop (dừng cuộn), áp dụng khi quá trình cuộn trang dừng lại.
Như bạn có thể thấy trong Liệt kê 14, kết buộc với sự kiện scrollstop làm việc giống như kết
buộc với sự kiện scrollstart.

Liệt kê 14. Kết buộc với sự kiện scrollstop

$(document).ready(function(){

$('body').bind('scrollstop', function(event) {
// Add scroll stop code here
});

});

Việc kết buộc với hai sự kiện này phải được thực hiện khi các tài liệu đã chính thức sẵn sàng.
Điều này bảo đảm rằng phần tử body tồn tại và có thể được kết buộc thành công các sự kiện. Ví
dụ, cả hai sự kiện này có thể có ích khi chạy mã JavaScript để hiển thị các tùy chọn ở phần dưới
của trang web khi trang đang cuộn — đây là cái được gọi là nạp rất chậm, (lazy loading), ở đây
các hình ảnh không được nạp khi trang web nạp lúc đầu. Điều này sẽ giữ cho thời gian nạp trang

ngắn trong khi vẫn cung cấp cùng một mức hấp dẫn trực quan khi nội dung được truy cập.
Về đầu trang
Làm việc với các phương thức được trưng ra
Chức năng sau có thể thực hiện được nhờ sử dụng các phương thức được trưng ra có sẵn thông
qua API của jQuery Mobile:
 Thay đổi các trang theo lập trình.
 Lặng lẽ nạp trang.
 Làm việc với các phương thức tiện dụng.
Thay đổi các trang theo lập trình
Một trong số các phương thức được trưng ra trong khung công tác jQuery Mobile là phương thức
cho phép bạn thay đổi các trang theo lập trình ngoài việc sử dụng mặc định các siêu liên kết và
gửi đi các biểu mẫu. Tất cả các đối tượng trực quan xuất hiện, từ nạp trang đến chuyển tiếp trang,
đều được kèm theo khi bạn thay đổi các trang theo lập trình. Liệt kê 15 cho thấy cách thay đổi
trang khi sử dụng phương thức changePage (thay đổi trang) của đối tượng $.mobile.

Liệt kê 15. Thay đổi trang khi sử dụng phương thức changePage

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile.css" />
<script type="text/javascript" ery.js"></script>
<script type="text/javascript">
$("#my-page").live('pagecreate', function(event) {
$("#alt-link").bind("click", function(event) {
$.mobile.changePage("page-2.html");
});
});
</script>
<script type="text/javascript" src="jquery.mobile.js"></script>

</head>

<body>

<div data-role="page" id="my-page">
<div data-role="content">
<ul data-role="listview" id="my-list"></ul>
</div>
</div>

<script type="text/javascript">
$('#my-list').append('<li><a href="page-2.html">Link to another
page</a></li>');
$('#my-list').append('<li><a href="#" id="alt-link">Link to another
page programmatically</a></li>');
</script>

</body>
</html>

Có một đối số bắt buộc, tên là to. Đối số này có thể là một chuỗi hoặc một đối tượng. Đối số to
có thể là một URL tuyệt đối hay tương đối. Đối số đối tượng cần là một đối tượng sưu tập
collection của jQuery — nói cách khác, một phần tử nội dòng đang được sử dụng như một trang
bổ sung. Ngoài ra còn có một số đặc tính tùy chọn mà bạn có thể chuyển giao như một đối
tượng:
 transition (chuyển tiếp)
 reverse (đảo ngược)
 changeHash (thay đổi hàm băm)
 role (vai trò)
 pageContainer (Thùng chứa trang)

 type (kiểu)
 data (dữ liệu)
 reloadPage (nạp lại trang)
Liệt kê 15 không sử dụng bất kỳ các đối số tùy chọn nào. Thay vào đó, nó chỉ đơn giản chuyển
giao tên của một tệp HTML khác.
Để sử dụng phương thức changePage, bạn cần làm một vài thứ. Trước tiên, bạn phải tạo ra một
phần tử div với một giá trị data-role là page và thêm một ID (mã định danh) cho nó. Với ID
này, bạn cần thêm sự kiện pagecreate chứ không phải là sự kiện document.ready của jQuery.
Bây giờ bạn có thể thêm các sự kiện nhấn chuột của mình. jQuery Mobile khuyến cáo rằng bạn
kết buộc một liên kết chứ không phải gọi trực tiếp sự kiện click (nhấn chuột). Và cuối cùng,
bạn có thể thay đổi trang này bằng cách sử dụng phương thức changePage.
Lặng lẽ nạp trang
Một phương thức thú vị khác của đối tượng $.mobile là loadPage. Bạn có thể sử dụng phương
thức loadPage để nạp các trang bên ngoài mà không cần hiển thị chúng. Đây là một cách có ích
để nạp trước các trang sao cho chúng hiển thị nhanh hơn khi người dùng nhấn vào một liên kết.
Để sử dụng phương thức này, bạn cần phải viết mã giống như khi bạn sử dụng phương thức
changePage. Trước tiên, bạn cần một phần tử page với một ID sao cho bạn có thể truy cập nó để
kết buộc sự kiện pagecreate. Sau đó, khi sự kiện pagecreate khởi động, bạn có thể gọi sự kiện
loadPage (xem Liệt kê 16).

Liệt kê 16. Nạp trước các trang bằng cách sử dụng phương thức loadPage

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#my-page").live('pagecreate', function(event) {
$.mobile.loadPage("page-2.html");

});
</script>
<script type="text/javascript" src="jquery.mobile.js"></script>
</head>

<body>

<div data-role="page" id="my-page">
<div data-role="content">
<ul data-role="listview" id="my-list">
<li><a href="page-2.html">Link to another page</a></li>
</ul>
</div>
</div>

</body>
</html>

Phương thức loadPage gồm có một đối số URL bắt buộc, có thể là một chuỗi ký tự biểu diễn
một URL tương đối hoặc tuyệt đối hoặc bạn có thể chuyển giao một đối tượng. Ngoài ra còn có
một đối số tùy chọn, chấp nhận một đối tượng có một hoặc nhiều đặc tính sau:
 role (vai trò)
 pageContainer (Thùng chứa trang)
 type (kiểu)
 data (dữ liệu)
 reloadPage (nạp lại Trang)
 loadMsgDelay (Giữ chậm thông báo tải)
Làm việc với các phương thức tiện dụng
Có một số trong các phương thức tiện dụng dựng sẵn cung cấp chức năng có ích khi phát triển
một trang web bằng cách sử dụng khung công tác jQuery Mobile (xem Bảng 2).

Bảng 2. Các phương thức tiện dụng dựng sẵn hiện tại với jQuery Mobile
Phương thức Mô tả
$.mobile.path.parseUrl
Phân tích cú pháp một URL thành một đối tượng có16 đặc
tính
$.mobile.path.makePathAbsolute
Chuyển đổi một đường dẫn tệp hoặc thư mục tương đối
thành một đường dẫn tuyệt đối
$.mobile.path.makeUrlAbsolute

Chuyển đổi một URL tương đối thành một URL tuyệt đối
$.mobile.path.isSameDomain

So sánh hai URL
$.mobile.path.isRelativeUrl

Xác định một URL là tương đối hay không
$.mobile.path.isAbsoluteUrl

Xác định một URL là tuyệt đối hay không
$.mobile.path.base

Làm việc với các phần tử cơ bản đã tạo