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

Mở rộng jQuery Mobile bằng cách thiết lập các tùy chọn toàn cầu, 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

Khung công tác jQuery Mobile là một cách nhanh chóng và dễ dàng để tạo ra các trang web cho thiết bị di động. Tuy nhiên, bạn có thể không biết rằng khung công tác này có một API thích hợp mà bạn có thể sử dụng để mở rộng chức năng cơ bản. Bài này cung cấp một tổng quan về một số các tính năng có ích nhất trong API đó và cung cấp cho bạn các ví dụ mã làm việc xuyên suốt bài này.

Kris Hadlock, Nhà phát triển và nhà thiết kế web, Studio Sedition

Photo of Kris HadlockKris Hadlock là nhà phát triển và thiết kế trang web theo hợp đồng từ năm 1996. Ông đã làm về các dự án cho các công ty như SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Le Cordon Bleu và Canon. Ông là tác giả của jQuery Mobile: Develop and Design - jQuery Mobile: Xây dựng và Thiết Kế (Peachpit), Ajax for Web Application Developers - Ajax dành cho các nhà phát triển ứng dụng Web (Sams) và The ActionScript Migration Guide - Hướng dẫn di trú ActionScript (New Riders). Kris là một nhà báo được đánh giá cao, ông phụ trách các chuyên mục và đã có nhiều bài viết cho các trang web và các tạp chí thiết kế, gồm IBM developerWorks, Peachpit.com, InformIT.com và Practical Web Design - Thực hành thiết kế web. Ông cũng là người sáng lập của trang www.studiosedition.com, một xưởng phát triển phần mềm và thiết kế web chuyên về tổng hợp biểu mẫu và chức năng.



20 11 2012

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ệ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" 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.

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--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" 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 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 pageLoadErrorMessageError 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.';
});

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ệnMô 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, horizontalDistanceThresholdverticalDistanceThreshold.
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 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ệ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.


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" 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-rolepage 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 $.mobileloadPage. 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ứcMô tả
$.mobile.path.parseUrlPhân tích cú pháp một URL thành một đối tượng có16 đặc tính
$.mobile.path.makePathAbsoluteChuyể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.makeUrlAbsoluteChuyển đổi một URL tương đối thành một URL tuyệt đối
$.mobile.path.isSameDomainSo sánh hai URL
$.mobile.path.isRelativeUrlXác định một URL là tương đối hay không
$.mobile.path.isAbsoluteUrlXác định một URL là tuyệt đối hay không
$.mobile.path.baseLàm việc với các phần tử cơ bản đã tạo

Kết luận

Khung jQuery Mobile sử dụng rất đơn giản, nhưng đừng để cho sự đơn giản của nó đánh lừa bạn. Có nhiều thứ xảy ra bên trong và có rất nhiều cách để bổ sung chức năng tùy chỉnh để cung cấp các trang web và các ứng dụng di động mạnh mẽ. Bằng cách dùng API này, bạn có thể báo cho khung công tác này biết cách hoạt động theo mặc định ra sao, tăng tốc độ nạp trang bằng cách làm việc với các phương thức đã trưng ra và thậm chí ràng buộc vào mọi tương tác xảy ra ở phía máy khách.


Tải về

Mô tảTênKích thước
Sample jQuery Mobile web page with API codejquery-mobile-api.zip115KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Tải về và tham khảo các tệp CSS và JavaScript của jQuery Mobile.
  • Tải về và dùng thử Xem trước Công nghệ di động của IBM, một tập các mẫu mã và các dịch vụ để giúp bạn bắt đầu xây dựng các ứng dụng di động để mở rộng và tích hợp vào doanh nghiệp. Bài xem trước này gồm có một dịch vụ thông báo RESTful; PhoneGap, một khung công tác nguồn mở để xây dựng các ứng dụng di động lai; một thời gian chạy của WebSphere Application Server nhẹ; và mã mẫu ví dụ để cho bạn xem tất cả hoạt động thế nào.
  • Gói tính năng WebSphere Application Server cho Web 2.0 và Di động của IBM gồm có Bộ công cụ Dojo 1.7 của IBM, các khối xây dựng ứng dụng Internet phong phú (RIA) và di động mới và một thành phần biểu đồ dựa trên Dojo. Với các công cụ Rational kèm theo, Gói tính năng này giúp bạn nhận được các ứng dụng WebSphere ban đầu được phát triển cho các trình duyệt máy tính để bàn và thích ứng và triển khai chúng cho các thiết bị di động.
  • Đánh giá các sản phẩm của IBM theo cách phù hợp với bạn nhất: Tải về nó để dùng thử, dùng thử nó trực tuyến, sử dụng nó trong một môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để tìm hiểu cách thực hiện kiến trúc hướng dịch vụ có hiệu quả.

Thảo luận

  • Hãy tham gia vào cộng đồng developerWorks. Kết nối với những người dùng developerWorks khác trong khi khám phá các blog, các diễn đàn, các nhóm và các wiki dựa vào nhà phát triển.

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=846575
ArticleTitle=Sử dụng API của jQuery Mobile để điều khiển tùy chỉnh độ mịn
publish-date=11202012