دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۹
  • فروردین

جلسه ۰۴ : افکت های انتقال درjQuery mobile

  • دسته‌بندی‌ها :
جلسه ۰۴ : افکت های انتقال درjQuery mobile
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      باسلام خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش jQuery موبایل همراه ما هستند. در مورد منطقه و توضیحات آیکون ها درجی کوئری موبایل صحبت شد. در این قسمت transition یا افکت های انتقال درجی کوئری موبایل و تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل را مورد بررسی قرار خواهیم داد. با ما همراه باشید.

      transition یا افکت های انتقال درجی کوئری موبایل

      transition یا افکت های انتقال درجی کوئری موبایل اجازه می دهد تا مقادیر ویژگی ها را که طی مدت مشخص شده رخ می دهند تغییر دهید و رفتار یک عنصر از یک حالت به حالت دیگر را با استفاده از سبک های مختلف برای هر حالت تغییر دهد.

      در جی کوئری موبایل افکت های انتقال گوناگونی برای نحوه ی انتقال یا transition از یک صفحه به صفحه ی دیگر وجود دارد.

      جدول زیر لیستی از برخی از انتقال صفحه مورد استفاده در چارچوب جی کوئری موبایل را نشان می دهد. 

      transition یا افکت های انتقال درجی کوئری موبایل:

      ردیف افکت های انتقال و شرحبرای صفحاتبرای گفتگو ها
      ۱fade یا محو شدن
      شما می توانید عناصر را در صفحه ی بعدی محو کنید.
      Fade PageFade Dialog
      ۲ flip یا چرخش
      چرخش ناگهانی به صفحه بعد.
      Flip PageFlip Dialog
      ۳pop یا پاپ
      شما می توانید پنجره popup ایجاد کنید یا رفتن به صفحه ی بعد مانند پاپ آپ
      Pop PagePop Dialog
      ۴flow
      دور انداختن صفحه ی جاری و آمدن صفحه ی بعد
      Flow PageFlow Dialog
      ۵slide
      حرکت صفحه جاری از راست به چپ
      Slide PageSlide Dialog
      ۶slidefade
      حرکت از راست به چپ و محو شدن صفحه جاری
      Slidefade PageSlidefade Dialog
      ۷slideup
      حرکت از پایین به بالا و رفتن به صفحه بعد
      Slideup PageSlideup Dialog
      ۸slidedown
      حرکت از بالا به پایین و رفتن به صفحه بعد
      Slidedown PageSlidedown Dialog
      ۹turn
      چرخش به صفحه بعد
      Turn PageTurn Dialog
      ۱۰none
      بدون افکت انتقال
      None PageNone Page

      نکته: تمام افکت های بالا همچنین از عملیات معکوس/وارونه پشتیبانی می کنند.

      به عنوان مثال،اگر بخواهید صفحه ی مورد نظرتان از سمت چپ به راست، افکت slide را اجرا کند، کافی است به جای راست به چپ، از خصوصیت data-direction با مقدار “reverse” استفاده کنید.

      تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل

      افکت fade در جی کوئری موبایل، در تمام لینک ها، پیش فرض است(در صورتی که مروگر از آن پشتیبانی کند).

      شما می توانید با افزودن ویژگی افکت data-transition به لینک، از تغییرات سفارشی استفاده کنید.

      به عبارتی با استفاده از خصوصیت data-transition افکت مورد نظر می تواند به هر لینک یا ارسال فرم، اضافه شود.

      شما می توانید با استفاده از گزینه defaultPageTransition در سطح جهانی از افکت های انتقال پیش فرض مختلف برای صفحات استفاده کنید.

      برای گفتگو، شما می توانید از گزینه defaultDialogTransition استفاده کنید.

      در ادامه تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل به افکت انتقال Fallback می پردازیم.

      افکت انتقال Fallback

      همه انتقال ها افکت های ۳D را به جز افکت انتقال fade ساپورت می کنند.

      دستگاه هایی که از افکت های ۳D پشتیبانی نمی کنند، باید از انتقال fade استفاده کنند.

      بعضی از مرورگرها برای هر نوع انتقال از تغییرات سه بعدی پشتیبانی نمی کنند.

      بنابراین می توانید از حالت fade به عنوان fallback پیش فرض افکت انتقال استفاده کنید.

      با استفاده از متد fallback  می توانید هر یک از عناصر موجود در یک مجموعه را بررسی کرده و عملیاتی بر روی آنها انجام دهید.

      حداکثر اسکرول یا Max Scroll برای انتقال در جی کوئری موبایل

      رویداد scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد .

      هنگامی که شما از یا به صفحه پیمایش می کنید، انتقال ها به صورت  none تنظیم شده اند و موقعیت اسکرول سه برابر ارتفاع صفحه دستگاه خواهد بود.

      گاهی اوقات شما ممکن است پاسخ کندی بگیرید.

      همچنین یا مرورگر ممکن است هنگامی که شما بر روی هر عنصر حرکت کلیک می کنید خراب شود؛

      بنابراین برای جلوگیری از این مشکلات ما با استفاده از تابع getMaxScrollForTransition از موقعیت اسکرول برای انتقال استفاده می کنیم.

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

      به صورت پیشف رض اسکرول در صفحات وب یک دفعه ای و خیلی تند انجام می شود.

      ولی اگر بخواهید این کار را زیباتر و روان تر انجام بدهید باید از جاوا اسکریپت کمک بگیرید .

      و اگر بخواهید باز هم راحت تر این کار را بکنید باید از jQuery بهره بگیرید .

      حداکثر عرض برای انتقال در جی کوئری موبایل

      شما می توانید انتقال را زمانی که عرض پنجره بالاتر از pixel width است غیرفعال کنید. می توانید حداکثر عرض برای انتقال را با استفاده از گزینه های معمول

      mobile.maxTransitionWidth.$ تنظیم کنید، که به طور پیش فرض false تنظیم شده است.

      آن می تواند مقداری مانند عرض پیکسل و یا مقدار false را  بگیرد. زمانی که پنجره بالاتر از مقدار مشخص شده باشد، اگر آن یک مقدار false نباشد،انتقال به none تنظیم خواهد شد.

      انتقال همان صفحه

      شما می توانید انتقال را به صفحه فعلی با استفاده از گزینه allowSamePageTransition از روش تغییر () widget container widget اضافه کنید.

      ایجاد تغییرات سفارشی

      شما می توانید تغییرات سفارشی را در صفحه ایجاد کنید با استفاده از گزینه mobile.transitionHandlers.$ که انتخاب انتقال در وب سایت یا برنامه را گسترش می دهد.

      خب تا اینجا گزینه های مختلفی مانند افکت انتقال و پیکربندی در جی کوئری موبایل رو معرفی نمودیم.

      کلام پایانی

      در این قسمت transition یا افکت های انتقال درجی کوئری موبایل و تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل را مورد بررسی دادیم .

      در ادامه ی آموزش ، بعد از افکت انتقال و پیکربندی در جی کوئری موبایل، لایوت ها رو خواهیم داشت.

      با ما همراه باشید.

      QR:  جلسه ۰۴ : افکت های انتقال درjQuery mobile
      به اشتراک بگذارید