گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/06/08 - 13:43
كد :7827
در این مقاله نحوه اعمال افکت به انتقال صفحات در کتابخانه جی کوئری موبایل را توضیح خواهیم داد.
افکت انتقال بین صفحات در کتابخانه جی کوئری موبایل با کد های Css3 امکان پذیر است .
افکت انتقال بین صفحات در موبایل
کتابخانه جی کوئری افکت های انتقال بین صفحات زیادی دارد .
برای افکت گذاری به یک صفحه در لینک به آن صفحه از صفت data-transition استفاده می کنیم:
<a href="#anylink" data-transition="slide">Slide to Page Two</a>
در جدول زیر میتوانید افکت های مربوط به انتقال بین صفحات و جعبه های دیالوگ را مشاهده کنید:
|
افکت انتقال
|
توضیحات
|
مشاهده نتیجه در صفحات
|
مشاهده نتیجه در دیالوگ باکس
|
|
Fade
|
انتقال به صفحه بعد با افکت محو شدن
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
flip
|
انتقال به صفحه بعد با افکت چرخیدن
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
flow
|
انتقال به صفحه بعد با افکت جریان حرکتی
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
pop
|
انتقال به صفحه بعد با افکت چشمک زدن
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
slide
|
انتقال به صفحه بعد با افکت شیفت شدن به یک طرف
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
slidefade
|
انتقال به صفحه بعد با افکت شیفت شدن و محو شدن
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
slideup
|
انتقال به صفحه بعد با افکت حرکت روبه بالا
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
slidedown
|
انتقال به صفحه بعد با افکت حرکت روبه پایین
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
turn
|
انتقال به صفحه بعد با افکت چرخش
|
مشاهده نتیجه
|
مشاهده نتیجه
|
|
none
|
انتقال به صفحه بعد بدون افکت
|
مشاهده نتیجه
|
مشاهده نتیجه
|
افکت محو شدن برای تمام لینک ها برای کتابخانه جی کوئری موبایل بصورت پیشفرض فعال است . البته اگر مرورگر این افکت را به پشتیبانی کند.
نکته : اگر میخواهید افکت شما برعکس اجرا شود کافی است که صفت data-direction را با مقدار reverse استفاده کنید. .
مثال:
<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد