رویدادهای صفحه jQuery Mobile

رویدادهای صفحه jQuery Mobile

رویدادهایی که در jQuery Mobile با صفحه سروکار دارند، به چهار دسته تقسیم می‌شوند:

  • آماده‌سازی صفحه - پیش از ایجاد صفحه، در زمان ایجاد صفحه و پس از آماده‌سازی صفحه
  • بارگذاری/انتقال صفحه - وقتی صفحه خارجی بارگذاری می‌شود، یا لود می‌شود یا با خطا مواجه می‌شود
  • گذر از صفحه - پیش از و پس از گذر از صفحه
  • تغییر صفحه - وقتی صفحه تغییر می‌کند یا با خطا مواجه می‌شود

برای اطلاعات کامل در مورد تمام رویدادهای jQuery Mobile، لطفاً به دستورالعمل‌های رویداد jQuery Mobile.

رویداد آماده‌سازی jQuery Mobile

وقتی یک صفحه معمولی در jQuery Mobile در حال آماده‌سازی است، سه مرحله را می‌گذرد:

  • پیش از ایجاد صفحه
  • ایجاد صفحه
  • آماده‌سازی صفحه

رویدادهایی که در هر مرحله فعال می‌شوند، می‌توانند برای وارد کردن یا عمل کردن کد استفاده شوند.

رویداد توضیح
pagebeforecreate وقتی صفحه در حال آماده‌سازی است و پیش از اینکه jQuery Mobile صفحه را تقویت کند، این رویداد فعال می‌شود.
pagecreate وقتی صفحه ایجاد شده است، اما پیش از تکمیل تقویت، این رویداد فعال می‌شود.
pageinit این رویداد فعال می‌شود وقتی که صفحه به طور کامل инициالیزه شده و jQuery Mobile به پایان صفحه‌افزودن‌ها رسیده است.

در این مثال، زمان فعال شدن هر یک از رویدادها در زمان ایجاد صفحه در jQuery Mobile نشان داده شده است:

مثال

$(document).on("pagebeforecreate",function(event){
  alert("رویداد pagebeforecreate فعال شد!");
}); 
$(document).on("pagecreate",function(event){
  alert("رویداد pagecreate فعال شد!");
});
$(document).on("pageinit",function(event){
  alert("رویداد pageinit فعال شد!");
});

آزمایش کنید

رویدادهای بارگذاری jQuery Mobile

رویدادهای بارگذاری صفحه مربوط به صفحه خارجی هستند.

هر زمان که صفحه خارجی در DOM بارگذاری شود، دو رویداد فعال می‌شود. اولین رویداد pagebeforeload و دومین رویداد pageload (موفقیت) یا pageloadfailed (نا موفقیت).

در جدول زیر این رویدادها توضیح داده شده‌اند:

رویداد توضیح
pagebeforeload قبل از هر درخواست بارگذاری صفحه، فعال می‌شود.
pageload بعد از بارگذاری موفقیت‌آمیز صفحه و قرار گرفتن آن در DOM، فعال می‌شود.
pageloadfailed اگر درخواست بارگذاری صفحه شکست بخورد، این رویداد فعال می‌شود. به طور پیش‌فرض، پیام "Error Loading Page" نمایش داده می‌شود.

در اینجا اصل کارکرد رویدادهای pageload و pageloadfailed نشان داده شده است:

مثال

$(document).on("pageload",function(event,data){
  alert("رویداد pageload فعال شد！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("متاسفم، صفحه درخواست شده وجود ندارد.");
});

آزمایش کنید

رویدادهای انتقال jQuery Mobile

ما همچنین می‌توانیم از رویدادها در هنگام انتقال از یک صفحه به صفحه دیگر استفاده کنیم.

فرآیند انتقال صفحه شامل دو صفحه است: یک صفحه "آمدن" و یک صفحه "رفتن" - این انتقال‌ها فرآیند تغییر صفحه فعلی (صفحه "آمدن") به صفحه جدید (صفحه "رفتن") را جالب‌تر می‌کند.

رویداد توضیح
pagebeforeshow در صفحه "رفتن"، قبل از شروع انیمیشن انتقال.
pageshow در صفحه "رفتن"، در پایان انیمیشن انتقال.
pagebeforehide در صفحه "آمدن"، قبل از شروع انیمیشن انتقال.
pagehide در صفحه "آمدن"، در پایان انیمیشن انتقال.

در اینجا اصل کارکرد زمان انتقال نشان داده شده است:

مثال

$(document).on("pagebeforeshow","#pagetwo",function(){ // وقتی به صفحه دوم وارد می‌شوید
  alert("صفحه دو به زودی نمایش داده می‌شود");
});
$(document).on("pageshow","#pagetwo",function(){ // وقتی به صفحه دوم وارد می‌شوید
  alert("صفحه دوم حالا نمایش داده می‌شود");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // وقتی از صفحه دوم خارج می‌شوید
  
});
$(document).on("pagehide","#pagetwo",function(){ // وقتی از صفحه دوم خارج می‌شوید
  alert("صفحه دوم حالا پنهان است");
});

آزمایش کنید