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

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

jQuery Mobile میں صفحہ سے تعامل کے واقعات چار زمرے میں تقسیم کئے جاتے ہیں:

  • صفحہ تیاری - صفحہ کی تیاری سے پہلے، صفحہ کی تیاری کے دوران، اور صفحہ کی تیاری کے بعد
  • صفحہ لوڈ/Unload - جب بیرونی صفحہ لوڈ ہو، یا اُن کی ناکامی، یا صفحہ کی تیاری سے پہلے
  • صفحہ تبدیلی - صفحہ کی تبدیلی سے پہلے اور بعد میں
  • صفحہ تبدیلی - جب صفحہ تبدیل ہو یا ناکام ہو

جبکہ پورے jQuery Mobile واقعات کی مکمل معلومات کی خواہش ہو، اپنے ملازمت سائٹ پر جائیں jQuery Mobile واقعات مرجع دستور。

jQuery Mobile Initialization واقعہ

جب 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(){ // وقتی از صفحه دوم خارج می‌شوید
  alert("صفحه دوم به زودی پنهان می‌شود");
});
$(document).on("pagehide","#pagetwo",function(){ // وقتی از صفحه دوم خارج می‌شوید
  alert("صفحه دوم حالا پنهان شده");
});

آزمایش کنید