باسلام خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش jQuery موبایل همراه ما هستند. در مورد منطقه و توضیحات آیکون ها درجی کوئری موبایل صحبت شد. در این قسمت transition یا افکت های انتقال درجی کوئری موبایل و تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل را مورد بررسی قرار خواهیم داد. با ما همراه باشید.
transition یا افکت های انتقال درجی کوئری موبایل اجازه می دهد تا مقادیر ویژگی ها را که طی مدت مشخص شده رخ می دهند تغییر دهید و رفتار یک عنصر از یک حالت به حالت دیگر را با استفاده از سبک های مختلف برای هر حالت تغییر دهد.
در جی کوئری موبایل افکت های انتقال گوناگونی برای نحوه ی انتقال یا transition از یک صفحه به صفحه ی دیگر وجود دارد.
جدول زیر لیستی از برخی از انتقال صفحه مورد استفاده در چارچوب جی کوئری موبایل را نشان می دهد.
transition یا افکت های انتقال درجی کوئری موبایل:
ردیف | افکت های انتقال و شرح | برای صفحات | برای گفتگو ها |
۱ | fade یا محو شدن شما می توانید عناصر را در صفحه ی بعدی محو کنید. | Fade Page | Fade Dialog |
۲ | flip یا چرخش چرخش ناگهانی به صفحه بعد. | Flip Page | Flip Dialog |
۳ | pop یا پاپ شما می توانید پنجره popup ایجاد کنید یا رفتن به صفحه ی بعد مانند پاپ آپ | Pop Page | Pop Dialog |
۴ | flow دور انداختن صفحه ی جاری و آمدن صفحه ی بعد | Flow Page | Flow Dialog |
۵ | slide حرکت صفحه جاری از راست به چپ | Slide Page | Slide Dialog |
۶ | slidefade حرکت از راست به چپ و محو شدن صفحه جاری | Slidefade Page | Slidefade Dialog |
۷ | slideup حرکت از پایین به بالا و رفتن به صفحه بعد | Slideup Page | Slideup Dialog |
۸ | slidedown حرکت از بالا به پایین و رفتن به صفحه بعد | Slidedown Page | Slidedown Dialog |
۹ | turn چرخش به صفحه بعد | Turn Page | Turn Dialog |
۱۰ | none بدون افکت انتقال | None Page | None Page |
نکته: تمام افکت های بالا همچنین از عملیات معکوس/وارونه پشتیبانی می کنند.
به عنوان مثال،اگر بخواهید صفحه ی مورد نظرتان از سمت چپ به راست، افکت slide را اجرا کند، کافی است به جای راست به چپ، از خصوصیت data-direction با مقدار “reverse” استفاده کنید.
افکت fade در جی کوئری موبایل، در تمام لینک ها، پیش فرض است(در صورتی که مروگر از آن پشتیبانی کند).
شما می توانید با افزودن ویژگی افکت data-transition به لینک، از تغییرات سفارشی استفاده کنید.
به عبارتی با استفاده از خصوصیت data-transition افکت مورد نظر می تواند به هر لینک یا ارسال فرم، اضافه شود.
شما می توانید با استفاده از گزینه defaultPageTransition در سطح جهانی از افکت های انتقال پیش فرض مختلف برای صفحات استفاده کنید.
برای گفتگو، شما می توانید از گزینه defaultDialogTransition استفاده کنید.
در ادامه تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل به افکت انتقال Fallback می پردازیم.
همه انتقال ها افکت های ۳D را به جز افکت انتقال fade ساپورت می کنند.
دستگاه هایی که از افکت های ۳D پشتیبانی نمی کنند، باید از انتقال fade استفاده کنند.
بعضی از مرورگرها برای هر نوع انتقال از تغییرات سه بعدی پشتیبانی نمی کنند.
بنابراین می توانید از حالت fade به عنوان fallback پیش فرض افکت انتقال استفاده کنید.
با استفاده از متد fallback می توانید هر یک از عناصر موجود در یک مجموعه را بررسی کرده و عملیاتی بر روی آنها انجام دهید.
رویداد scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد .
هنگامی که شما از یا به صفحه پیمایش می کنید، انتقال ها به صورت none تنظیم شده اند و موقعیت اسکرول سه برابر ارتفاع صفحه دستگاه خواهد بود.
گاهی اوقات شما ممکن است پاسخ کندی بگیرید.
همچنین یا مرورگر ممکن است هنگامی که شما بر روی هر عنصر حرکت کلیک می کنید خراب شود؛
بنابراین برای جلوگیری از این مشکلات ما با استفاده از تابع getMaxScrollForTransition از موقعیت اسکرول برای انتقال استفاده می کنیم.
در بعضی سایت ها با کلیک روی بوک مارک ها، صفحه ی وب به صورت آرام و نرم اسکرول می شود.
به صورت پیشف رض اسکرول در صفحات وب یک دفعه ای و خیلی تند انجام می شود.
ولی اگر بخواهید این کار را زیباتر و روان تر انجام بدهید باید از جاوا اسکریپت کمک بگیرید .
و اگر بخواهید باز هم راحت تر این کار را بکنید باید از jQuery بهره بگیرید .
شما می توانید انتقال را زمانی که عرض پنجره بالاتر از pixel width است غیرفعال کنید. می توانید حداکثر عرض برای انتقال را با استفاده از گزینه های معمول
mobile.maxTransitionWidth.$ تنظیم کنید، که به طور پیش فرض false تنظیم شده است.
آن می تواند مقداری مانند عرض پیکسل و یا مقدار false را بگیرد. زمانی که پنجره بالاتر از مقدار مشخص شده باشد، اگر آن یک مقدار false نباشد،انتقال به none تنظیم خواهد شد.
شما می توانید انتقال را به صفحه فعلی با استفاده از گزینه allowSamePageTransition از روش تغییر () widget container widget اضافه کنید.
شما می توانید تغییرات سفارشی را در صفحه ایجاد کنید با استفاده از گزینه mobile.transitionHandlers.$ که انتخاب انتقال در وب سایت یا برنامه را گسترش می دهد.
خب تا اینجا گزینه های مختلفی مانند افکت انتقال و پیکربندی در جی کوئری موبایل رو معرفی نمودیم.
در این قسمت transition یا افکت های انتقال درجی کوئری موبایل و تنظیم افکت انتقال و پیکربندی در جی کوئری موبایل را مورد بررسی دادیم .
در ادامه ی آموزش ، بعد از افکت انتقال و پیکربندی در جی کوئری موبایل، لایوت ها رو خواهیم داشت.
با ما همراه باشید.