جی کوئری موبایل-رویداد جهت

چاپ

رویداد orientationchange در جی کوئری موبایل

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

Mobile

برای استفاده از رویداد orientationchange کافی است آن را به شیء window اضافه نمایید: 

کد

$(window).on("orientationchange",function(){
  alert("The orientation has changed!");
});

تابع فراخوانی شده می تواند یک آرگومان داشته باشد که عبارت است از شیء event. این شیء جهت دستگاه موبایل را برمی گرداند که عبارت است از : "portrait" و  "landscape" . عبارت اول برای زمانی برگردانده می شود که دستگاه در وضعیت عمودی قرار دارد و عبارت دوم نیز زمانی برگردانده می شود که دستگاه در وضعیت افقی باشد: 

مثال

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});
خودتان امتحان کنید »

به دلیل اینکه رویداد orientationchange در شیء window تعریف می شود، بعنوان مثال ما می توانیم از خصوصیت window.orientation  برای ست کردن استایل های متفاوت برای تشخیص حالات portrait و landscape استفاده کنیم: 

مثال

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});
خودتان امتحان کنید »
Note

خصوصیت window.orientation برای حالت portrait مقدار 0 را برمی گرداند و برای حالت نمایش landscape مقدار 90 یا 90-  را برمی گرداند.