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

API của jQuery Mobile cung cấp thêm một mức kiểm soát bổ sung đối với việc tuỳ chỉnh của trang web di động của bạn. Mọi thứ từ thiết lập tùy chỉnh các tùy chọn toàn cầu đến móc nối vào các sự kiện tương tác và làm việc với các phương thức được trưng ra đều có thể thực hiện được với API này và được trình bày trong bài này. Đến cuối bài này, bạn sẽ biết cách định nghĩa chi tiết các tùy chọn tùy chỉnh mà bạn muốn sử dụng trong trang web di động của mình cũng như cách viết mã tùy chỉnh để tương tác với khung công tác jQuery Mobile.

Bài này trình bày một sự tuyển chọn các đặc tính có ích, các sự kiện và các phương thức được trưng ra từ khung công tác jQuery Mobile. Mỗi phần giải thích các tùy chọn và cung cấp một mã mẫu ví dụ để cho thấy cách thực hiện nó. Để chạy bất kỳ các mã mẫu ví dụ nào, trước tiên bạn phải tải về phiên bản mới nhất của jQuery và khung công tác jQuery Mobile hoặc tham chiếu các tệp trực tiếp từ mạng phân phối nội dung (CDN) của jQuery từ trong tệp HTML của bạn (xem phần Tài nguyê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ệnmobileinit, 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).

<script type="text/javascript" src="jquery.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.

$(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.

$(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).

$(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 $.mobilecho 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.

$(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.

<!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <script type="text/javascript" src="jquery.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 subPageUrlKeytù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.

$(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ínhloadingMessage (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.

$(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.

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

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.

Để 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).

<!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <link rel="stylesheet" href="jquery.mobile.css" />
  <script src="jquery.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ệntaphold, 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ặclandscape (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).

$(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).

$(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ệnscrollstart (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.

$(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.

$(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.

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.

<!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) {
		$("#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ệnpagecreate. Sau đó, khi sự kiện pagecreate khởi động, bạn có thể gọi sự kiện loadPage (xem Liệt kê 16).

<!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).