Sự kiện trang jQuery Mobile

Sự kiện trang jQuery Mobile

Các sự kiện làm việc với trang trong jQuery Mobile được chia thành bốn loại:

  • Khởi tạo trang - Trước khi tạo trang, khi trang được tạo và sau khi trang được khởi tạo
  • Tải và gỡ bỏ trang - Khi trang được tải từ bên ngoài, gỡ bỏ hoặc gặp lỗi
  • Chuyển đổi trang - Trước và sau khi chuyển đổi trang
  • Thay đổi trang - Khi trang bị thay đổi hoặc gặp lỗi

Để có thông tin chi tiết về tất cả các sự kiện jQuery Mobile, vui lòng truy cập Tài liệu tham khảo sự kiện jQuery Mobile.

Sự kiện Khởi tạo jQuery Mobile

Khi một trang tiêu chuẩn trong jQuery Mobile được khởi tạo, nó sẽ trải qua ba giai đoạn:

  • Trước khi tạo trang
  • Tạo trang
  • Khởi tạo trang

Mỗi sự kiện được kích hoạt ở từng giai đoạn đều có thể được sử dụng để chèn hoặc thực hiện mã.

Sự kiện Mô tả
pagebeforecreate Khi trang sắp được khởi tạo và jQuery Mobile bắt đầu tăng cường trang trước đó, sự kiện này sẽ được kích hoạt.
pagecreate Khi trang đã được tạo nhưng chưa hoàn thành việc tăng cường, sự kiện này sẽ được kích hoạt.
pageinit Sự kiện này được gây ra khi trang đã được khởi tạo và jQuery Mobile đã hoàn thành việc tăng cường trang.

Dưới đây là ví dụ minh họa khi tạo trang trong jQuery Mobile, khi nào gây ra mỗi loại sự kiện:

Mô hình

$(document).on("pagebeforecreate",function(event){
  alert("Gây ra sự kiện pagebeforecreate!");
}); 
$(document).on("pagecreate",function(event){
  alert("Gây ra sự kiện pagecreate!");
});
$(document).on("pageinit",function(event){
  alert("Gây ra sự kiện pageinit!");
});

Thử ngay

Sự kiện Load jQuery Mobile

Sự kiện tải trang thuộc về trang ngoại bộ.

Mỗi khi trang ngoại bộ được tải vào DOM, sẽ gây ra hai sự kiện. Đầu tiên là pagebeforeload, thứ hai là pageload (thành công) hoặc pageloadfailed (thất bại).

Bảng dưới đây giải thích các sự kiện này:

Sự kiện Mô tả
pagebeforeload Gây ra trước khi có yêu cầu tải trang nào được thực hiện.
pageload Gây ra sau khi trang đã được tải thành công và chèn vào DOM.
pageloadfailed Nếu yêu cầu tải trang thất bại, sự kiện này sẽ được gây ra. Mặc định, thông báo "Error Loading Page" sẽ được hiển thị.

Dưới đây là演示 pageload và pageloadfailed sự kiện hoạt động như thế nào:

Mô hình

$(document).on("pageload",function(event,data){
  alert("Gây ra sự kiện pageload!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Xin lỗi, trang yêu cầu không tồn tại.");
});

Thử ngay

Sự kiện chuyển đổi jQuery Mobile

Chúng ta còn có thể sử dụng sự kiện khi chuyển từ trang này sang trang khác.

Quá trình chuyển đổi trang liên quan đến hai trang: một trang "sắp đến" và một trang "đang đi" - các chuyển đổi này làm cho quá trình thay đổi trang hoạt động hiện tại (trang "sắp đến") sang trang mới (trang "đang đi") trở nên sống động hơn.

Sự kiện Mô tả
pagebeforeshow Gây ra trên trang "đang đi", trước khi hiệu ứng chuyển đổi bắt đầu.
pageshow Gây ra trên trang "đang đi", sau khi hiệu ứng chuyển đổi hoàn thành.
pagebeforehide Gây ra trên trang "sắp đến", trước khi hiệu ứng chuyển đổi bắt đầu.
pagehide Gây ra trên trang "sắp đến", sau khi hiệu ứng chuyển đổi hoàn thành.

Dưới đây là演示过渡时间工作原理的例子：

Mô hình

$(document).on("pagebeforeshow","#pagetwo",function(){ // Khi vào trang hai
  alert("Trang hai sắp hiển thị");
});
$(document).on("pageshow","#pagetwo",function(){ // Khi vào trang hai
  alert("Hiện đang hiển thị trang hai");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Khi rời trang hai
  alert("Trang hai sắp ẩn");
});
$(document).on("pagehide","#pagetwo",function(){ // Khi rời trang hai
  alert("Hiện đang ẩn trang hai");
});

Thử ngay