Qua các bài trước, chúng ta đã thấy được jQuery Mobile có thể làm gì giúp chúng ta tạo một giao diện website tương thích với các thiết bị di động. Tuy nhiên, có một vài thời điểm, chúng ta muốn thay đổi lại một vài ứng xử của jQuery Mobile để sử dụng các phương thức JavaScript hay các tiện ích thú vị. Đây là lúc chúng ta phải cấu hình lại jQuery Mobile.
Cấu hình jQuery Mobile
Chúng ta cấu hình một website dùng jQuery Mobile bằng cách viết đoạn mã lắng nghe sự kiện mobileinit như sau:
$(document).bind("mobileinit", function() {
//your customization here
})
Tất nhiên đoạn mã trên phải được đặt trong cặp thẻ <script> hay được đặt trong một tập tin JS, ví dụ config.js. Để sự kiện mobileinit có thể được lắng nghe, chúng ta cần đặt cặp <script> chứa đoạn mã này (hay liên kết đến tập tin config.js) phía trên cặp <script > liên kết đến thư viện jQuery Mobile:
<head>
<title>Configuration Demo</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
// your customization here
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
</head>
Hay:
<head>
<title>Configuration Demo</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="config.js > </script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
</head>
Nội dung bên trong đoạn mã lắng nghe sự kiện mobileinit đơn giản là cập nhật các giá trị cho các thuộc tính của đối tượng $.mobile:
$(document).bind("mobileinit", function() {
$.mobile.property = value;
})
Sau đây là danh sách các thuộc tính và giá trị tương ứng của đối tượng $.mobile:
| Thuộc tính | Giá trị và mô tả |
| ns | Là không gian tên của các thuộc tính dữ liệu tức là các thuộc tính có tiền tố (prefix) là data, ví dụ như data-role. Nếu muốn thay đổi các tiền tố, ví dụ dùng data_jqm thay vì data, chúng ta phải xác định một giá trị cụ thể tại đây. Ví dụ, nếu chúng ta gán giá trị là jqm thì thay vì dùng data-role = “page” chúng ta sẽ dùng data-jqm-role = “page”. |
| activeBtnClass | Thiết lập tên lớp dùng cho các button trong trạng thái kích hoạt. Giá trị mặc định là ui-btn-active. |
| activePageClass | Thiết lập tên lớp cho các trang đang được xem hiện tại. Giá trị mặc định là ui-page-active. |
| ajaxEnabled | Cho phép (dùng giá trị true) hay vô hiệu hóa (dùng giá trị false) tính năng Ajax trong trang |
| allowCrossDomainPages | Cho phép các trang từ xa có thể tải nội dung thông qua $.mobile.loadPage nếu dùng giá tri true. Mặc định là giá trị false. |
| autoInitializePage | Nếu được gán đến true sẽ cho phép jQuery Mobile thực thi $.mobile. initializePage khi tải. |
| defaultDialogTransition | Xác định các hiệu ứng khi ẩn hay hiển thị các hộp thoại. Giá trị cho thuộc tính này gồm fade, flip, pop, slide, slidedown, và slideup. Mặc định là pop. |
| defaultPageTransition | Xác định các hiệu ứng trong thời gian tải các trang. Giá trị cho thuộc tính này gồm fade, flip, pop, slide, slidedown, và slideup. Mặc định là slide. |
| gradea | Dùng để xác định điều gì cấu thành nên một trình duyệt tốt. Điều này được xử lý bởi jQuery Mobile nhưng nếu muốn tạo một vài tiêu chuẩn khác, chúng ta có thể định nghĩa một hàm trả về true (hay false) tại đây. |
| hashListeningEnabled | Tham chiếu đến khả năng lắng nghe sự thay đổi từ thuộc tính location.hash của trình duyệt. Mặc định là giá trị true và jQuery Mobile không làm gì, nhưng nếu muốn một vài ứng xử xảy ra, chúng ta có thể thiết lập đến giá trị false và viết một vài dòng mã. |
| ignoreContentEnabled | Bình thường, jQuery Mobile sẽ cải thiện mọi thứ trong khả năng cho phép. Chúng ta có thể vô hiệu hóa khả năng này của jQuery Mobile ở mức điều khiển hay đơn giản là thêm một bộ chứa (container), ví dụ div, với thuộc tính data-enhance=true. Lúc này, chúng ta cũng phải thiết lập thuộc tính ignoreContentEnabled đến giá trị true. Giá trị mặc định của ignoreContentEnabled là false. |
| linkBindingEnabled | Mặc định, jQuery Mobile lắng nghe tất cả các sự kiện click từ các liên kết. Nếu chúng ta muốn vô hiệu hóa khả năng này, linkBindingEnabled phải được gán đến false. |
| loadingMessage | Thiết lập nội dung khi trang đang được tải. Mặc định là loading. |
| loadingMessageTextVisible | Khi trang được tải, thường chỉ có hình ảnh mô tả quá trình tải trang được sử dụng. Nếu chúng ta muốn có thêm nội dung văn bản hiển thị kèm theo thì thiết lập giá trị thuộc tính này đến true. Mặc định là false. |
| loadingMessageTheme | Theme dùng cho hộp thoại tải trang. Mặc định là a. |
| minScrollBack | Trả về vị trí cuộn trang. Thuộc tính này hữu ích khi nội dung trang lớn và người dùng có thể cần quay lại vị trí trước đó sau khi xem nội dùng từ một trang khác. Mặc định, jQuery Mobile chỉ nhớ vị trí cuộn từ 150 trở lên. |
| pageLoadErrorMssage | Thông điệp xuất hiện đến người dùng khi xuất hiện lỗi tải trang. Thông điệp mặc định là Error Loading Page. |
| pageLoadErrorMessageTheme | Theme được dùng cho hộp thoại thông báo lỗi khi lỗi tải trang xuất hiện. Mặc định là theme e. |
| pushStateEnabled | Cho phép sử dụng tính năng HTML5 pushState khi điều hướng trang. Mặc định là true. |
| subPageUrlKey | jQuery Mobile hỗ trợ nhiều trang trong một tập tin bằng cách dùng tiền tố ui-page. Thuộc tính này cho phép chúng ta thay đổi tiền tố tùy ý. |
Tham khảo thêm tại: https://demos.jquerymobile.com/1.0rc2/docs/api/globalconfig.html
Ví dụ cho tập tin Test_ConfigureJS.html có nội dung phần <body> như sau:
<div data-role="page" id="first">
<div data-role="header">
<h1>Configuration Test</h1>
</div>
<div data-role="content">
<p>
<a href="#page2">Another Page</a><br/>
<a href="AnotherPage.html">Yet Another Page</a><br/>
</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>The Second</h1>
</div>
<div data-role="content">
<p>
This is the Second. Go <a href="#first">first</a>.
</p>
</div>
</div>
Phần <head> có nội dung:
<title>Configuration Demo</title> <meta name="viewport" content="width=device-width, initialscale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
Thực thi trang dùng Chrome, kết quả:
Chú ý: Chúng ta để ý tiêu đề của trình duyệt là Configuration Test chứ không phải là Configuration Demo. Xử lý vấn đề này có thể xem lại bài viết https://ngocminhtran.com/2019/05/03/jquery-mobile-header-va-footer/ .
Nhấn vào liên kết Another Page sẽ đến trang
Nhấn liên kết first sẽ trở lại trang Configuration Test. Trong trang Configuration Test nhấn vào liên kết Yet Another Page sẽ đến trang AnotherPage.html – là một tập tin chúng ta tạo và lưu trữ trong cùng thư mục với tập tin Test_ConfigureJS.html. Tuy nhiên, khi nhấn dòng liên kết này, kết quả lại xuất hiện thông điệp lỗi:
Lỗi xuất hiện do tính năng Ajax của jQuery Mobile và khắc phục có thể dùng thuộc tính data-ajax ( xem lại bài viết https://ngocminhtran.com/2019/03/18/jquery-mobile-cac-lien-ket-va-hieu-ung-ajax/ ) hay dùng thuộc tính cấu hình ajaxEnabled từ đối tượng $.mobile. Thêm đoạn mã sau đến phần <head> trong tập tin Test_ConfigureJS.html (chú ý vị trí đoạn mã):’
<title>Configuration Demo</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
Thực thi lại trang và nhấn liên kết Yet Another Page sẽ đến trang AnotherPage.html. Chúng ta cũng có thể thêm hiệu ứng chuyển trang bằng cách thêm đoạn mã sau:
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = "flip";
});
</script>
Lưu và thực thi lại trang. Nhấn liên kết Another Page sẽ thấy hiệu ứng chuyển trang và trong trang thứ hai khi nhấn liên kết first sẽ chuyển trở lại trang Configuration Test với cùng hiệu ứng (flip).
Các tiện ích jQuery Mobile
Các tiện ích và phương thức liên quan đến trang
Bảng dưới đây mô tả các thuộc tính và phương thức của đối tượng $.mobile liên quan đến trang và điều hướng giữa các trang.
| Thuộc tính, phương thức | Mô tả |
| activePage | Thuộc tính này là một ham chiếu đến trang hiện tại. |
| changePage(page,options) | Phương thức thay đổi đến trang khác. Tham số page có thể là một chuỗi URL hay một đối tượng jQuery DOM; tham số options là một đối tượng tùy chọn theo định dạng cặp key/value. Các đối tượng options có thề là:
· allowSamePageTransition: cho phép hiệu ứng chuyển trang nếu thiết lập giá trị true. · changeHash: xác định nếu URL thay đổi. · data: dữ liệu dạng chuỗi hay đối tượng được chuyển đến trang kế tiếp. · data-url: Giá trị được dùng cho URL trong trình duyệt. · pageContainer: cho phép thay đổi phần tử DOM chứa các trang đã được jQuery Mobile tạo mặc định. · reloadPage: Nếu một trang đã tồn tại sẵn trong trình duyệt, jQuery Mobile sẽ nạp nó từ bộ nhớ. Nếu thiết lập giá trị true đến reloadPage, jQuery Mobile sẽ tải lại trang. · role: Mặc định, jQuery Mobile sẽ tìm kiếm thuộc tính data-role của trang được tải để xác định vai trò của nó. Có thể thiết lập vai trò khác cho trang này với role. · showLoadMsg: Cho phép hiển thị hay vô hiệu hóa thông điệp tải trang. · transition: Xác định hiệu ứng chuyển trang. · type: Cho phép xác định phương thức HTTP dùng để tải trang. Mặc định là get. |
| loadPage(page,options) | Phương thức này được sử dụng sau phương thức changePage nếu tham số đầu tiên của changePage là một chuỗi URL. Tham số page của cả hai là giống nhau nhưng tham số thứ hai của loadPage chỉ giới hạn trong một số đối tượng: data, loadMsgDelay, pageContainer, reloadPage, role, và type. Các đối tượng này giống phương thức changePage ngoại trừ loadMsgDelay. Đối tượng này cung cấp thời gian để jQuery Mobile cố gắng nạp một trang qua bộ nhớ cache đầu tiên. |
| showPageLoadingMsg() | Cho phép hiển thị thông điệp khi trang đang tải. |
| hidePageLoadingMsg() | Cho phép ẩn thông điệp khi trang đang tải. |
Tham khảo thêm tại https://demos.jquerymobile.com/1.0rc2/docs/api/methods.html
Trong tập tin Test_ConfigureJS.html, chúng ta đã thêm liên kết first như sau:
This is the Second. Go <a href="#first">first</a>.
Bây giờ, chúng ta sẽ thay đổi lại thẻ <a> như sau:
This is the Second. Go <a id = "btnFirst">first</a>.
Kế tiếp thêm đoạn mã sau đến cuối phần nội dung trong <body> của tập tin Test_ConfigureJS.html:
<body>
...
<script>
$("#btnFirst").click(function() {
$.mobile.changePage("Test_ConfigureJS.html",
{transition:"slide"});
});
</script>
</body>
Ở đây, chúng ta dùng phương thức changePage để chuyển trang thay vì dùng tính năng mặc định của <a> với thuộc tính href. Hiệu ứng chuyển trang được dùng là slide (mặc định là flip như chúng ta đã định nghĩa phần trên).
Thực thi lại trang Test_ConfigureJS.html và nhấn liên kết Another Page sẽ chuyển sang trang thứ hai với hiệu ứng flip. Trong trang thứ hai, nhấn liên kết first sẽ trở lại trang Configuration Test với hiệu ứng slide.
Các tiện ích và phương thức liên quan đến đường dẫn và URL
Các phương thức sau liên quan đến đường dẫn và URL của ứng dụng. Chúng được truy cập thông qua đối tượng $.mobile.path:
| Phương thức | Mô tả |
| isAbsoluteUrl | Kiểm tra một url có phải là địa chỉ tuyệt đối hay không. |
| isRelativeUrl | Kiểm tra một url có phải là địa chỉ tương đối hay không. |
| isSameDomain(first url, second url) | So sánh hai địa chỉ first url và second url có cùng domain hay không. |
| makePathAbsolute(relative path, absolute path) | Nhận một đường dẫn tương đối relative path và so sánh nó với đường dẫn tuyệt đối absolute path và trả về một phiên bản đường dẫn tuyệt đối của đường dẫn tương đối relative path. |
| makeUrlAbsolute(relative url, absolute url) | Một phương thức gần giống makePathAbsolute nhưng làm việc với các url tuyệt đối. |
| parseUrl(url) | Nhận một url tương đối hay tuyệt đối và trả về một đối tượng chứa các thuộc tính: hash, host, hostname, href, pathname, port, protocol, và search. |
Bên cạnh các phương thức trên, chúng ta cũng có thể quan tâm đến các phương thức sau:
| Phương thức | Mô tả |
| fixedToolbars.hide() | Cho phép ẩn toolbar cố định |
| fixedToolbars.show() | Cho phép hiển thị toolbar cố đinh |
| silentScroll(position) | Cuộn trang đến một vị trí theo trục y và không phản ứng gì trước sự kiện scroll ( ngụ ý từ silent). |
Tham khảo thêm tại https://demos.jquerymobile.com/1.0rc2/docs/api/methods.html
Chúng ta sẽ minh họa cách dùng các phương thức isAbsoluteUrl, isRelativeUrl và makeUrlAbsolute bằng cách tạo tập tin Test_Utilities.html có nội dung phần <body> (tất nhiên phần <head> vẫn cung cấp đầy đủ thư viện jQuery Mobile) sau:
<div data-role="page">
<div data-role="header">
<h1>Utilities Test</h1>
</div>
<div data-role="content">
<form>
<div data-role="fieldcontain">
<label for="url">Enter a Relative URL:</label>
<input type="text" name="url1" id="url1" value="" />
<label for="url">Enter an Absolute URL:</label>
<input type="text" name="url2" id="url2" value="" />
<button id="btnCheck">Check</button>
</div>
</form>
<div id="result"><h1>Result</h1></div>
</div>
</div>
<script>
$("#btnCheck").click(function() {
var url1_val = $("#url1").val();
var url2_val = $("#url2").val();
var isRelaUrl = $.mobile.path.isRelativeUrl(url1_val);
var isAbsUrl = $.mobile.path.isAbsoluteUrl(url2_val);
if(isRelaUrl && isAbsUrl){
var makeURL = $.mobile.path.makeUrlAbsolute(url1_val,url2_val);
$("#result").html("<h1>"+ makeURL + "</h1>");
}
});
</script>
Đoạn mã <script> sẽ kiểm tra hai URL được nhập bởi người dùng, nếu URL đầu tiên là một Relative URL và URL thứ hai là một Absolute URL thì phương thức makeUrlAbsolute sẽ trả về một Absolute URL mới kết hợp hai URL trên.
Kết quả thực thi:
Nhập các URL và nhấn nút Check, kết quả:
Các tiện ích liên quan form và widget
Như trong bài https://ngocminhtran.com/2019/08/02/jquery-mobile-va-html-forms/ và https://ngocminhtran.com/2019/08/29/jquery-mobile-hop-thoai-bo-cuc-dang-luoi-va-kha-nang-thu-gon-hay-mo-rong-noi-dung/ đã đề cập, jQuery Mobile cung cấp nhiều đặc trưng cho form và widget (dạng danh sách). Nhưng điều gì sẽ xảy ra nếu chúng ta thêm một vài thành phần đến form hay widget sau khi trang đã tải? Xét tập tin Test_Form.html có nội dung phần <body> như sau:
<div data-role="page" id="third">
<div data-role="header">
<h1>List Updates</h1>
</div>
<div data-role="content">
<ul id="theList" data-role="listview" data-inset="true">
<li>Initial</li>
<li>Item</li>
</ul>
<form>
<div data-role="fieldcontain">
<label for="additem">New Item</label>
<input type="text" name="additem" id="additem" value="" />
</div>
<input type="button" id="testBtn" value="Add It">
</form>
</div>
</div>
Đoạn mã trên thêm một danh sách và một form đến trang. Danh sách được định dạng như một listview. Kết quả thực thi:
Bây giờ, chèn thêm một đoạn mã JavaScript (vào cuối nội dung phần <body> ở trên) để xử lý sự kiện Click cho nút Add It:
<script>
$("#testBtn").click(function() {
var itemToAdd = $.trim($("#additem").val());
if(itemToAdd == "") return;
$("#theList").append("<li>"+itemToAdd+"</li>");
});
</script>
Thực thi lại và nhập một nội dung bất kỳ vào mục New Item và nhấn nút Add It:
MyItem được chèn vào danh sách nhưng không theo định dạng chúng ta mong muốn. May mắn là, đối với danh sách dạng listview, có phương thức listview với giá trị tham số là refresh sẽ làm mới lại listview có sẵn và tất nhiên là cập nhật lại các thành phần mới thêm vào. Thêm phương thức listview đến đoạn mã JavaScript trên như sau:
<script>
$("#testBtn").click(function() {
var itemToAdd = $.trim($("#additem").val());
if(itemToAdd == "") return;
$("#theList").append("<li>"+itemToAdd+"</li>");
$("#theList").listview("refresh");
});
</script>
Thực thi lại
Có rất nhiều các thuộc tính và phương thức thú vị dùng cho các widget có thể tham khảo tại https://api.jquerymobile.com/category/widgets/
Trần Ngọc Minh Notes 
Ý kiến bài viết