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> [...]... 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ả Phân tích cú pháp một URL thành một đối tượng có16 đặc $ .mobile. path.parseUrl tính Chuyển đổi một đường dẫn tệp hoặc thư mục tương đối $ .mobile. path.makePathAbsolute 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... 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. .. đố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 . 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. 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