جی کوئری موبایل-انتقال ها
جی کوئری موبایل امکان استفاده از افکت های CSS3 را به شما می دهد. این باعث می شود که شما بتوانید انتخاب کنید که یک صفحه چطور باز شود.
افکت های انتقال(transition) در جی کوئری موبایل
جی کوئری موبایل افکت های مختلفی را برای نحوه ی انتقال(transition) از یک صفحه به صفحه ی دیگر دربر دارد.
نکته: برای دست یافتن به افکت انتقال، مرورگر مورد نظر باید تبدیل سه بعدی CSS3 را پشتیبانی کند:
12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
اعداد داخل جدول بالا، اولین ورژن مرورگری را مشخص می کند که به طور کامل از تبدیل سه بعدی(3D Transforms) پشتیبانی می کند.
با استفاده از خصوصیت data-transition افکت مورد نظر می تواند به هر لینک یا ارسال فرم، اضافه شود:
<a href="#anylink" data-transition="slide">Slide to Page Two</a>
جدول زیر، انتقال های امکان پذیر را مشخص می کند. این انتقال ها می توانند با استفاده از خصوصیت data-transition برای هر دوی صفحات و گفتگوها استفاده شوند:
انتقال | توضیحات | برای صفحات | برای گفتگوها |
---|---|---|---|
fade |
پیش فرض. در صفحه ی بعدی محو می شود. |
امتحان کنید | امتحان کنید |
flip |
چرخش ناگهانی به صفحه ی بعد. |
امتحان کنید | امتحان کنید |
flow |
دور انداختن صفحه ی جاری و آمدن صفحه ی بعد. |
امتحان کنید | امتحان کنید |
pop |
رفتن به صفحه ی بعد مانند پاپ آپ |
امتحان کنید | امتحان کنید |
slide |
حرکت صفحه جاری از راست به چپ |
امتحان کنید | امتحان کنید |
slidefade |
حرکت از راست به چپ و محو شدن صفحه جاری |
امتحان کنید | امتحان کنید |
slideup |
حرکت از پایین به بالا و رفتن به صفحه بعد |
امتحان کنید | امتحان کنید |
slidedown |
حرکت از بالا به پایین و رفتن به صفحه بعد |
امتحان کنید | امتحان کنید |
turn |
چرخش به صفحه بعد |
امتحان کنید | امتحان کنید |
none |
بدون افکت انتقال |
امتحان کنید | امتحان کنید |
افکت fade در جی کوئری موبایل، در تمام لینک ها، پیش فرض است(در صورتی که مروگر از آن پشتیبانی کند). |
نکته: تمام افکت های بالا همچنین از عملیات معکوس/وارونه پشتیبانی می کنند. بعنوان مثال، اگر بخواهید صفحه ی مورد نظرتان از سمت چپ به راست، افکت slide را اجرا کند، کافی است به جای راست به چپ، از خصوصیت data-direction با مقدار "reverse" استفاده کنید.
مثال
- نوشته شده توسط احسان عباسی
- بازدید: 6087