گذر jQuery Mobile

jQuery Mobile شامل افکت‌های CSS است که به شما امکان می‌دهد روش باز شدن صفحات را انتخاب کنید.

افکت‌های انتقال jQuery Mobile

jQuery Mobile مجموعه‌ای از اثرات برای انتقال از یک صفحه به صفحه بعد دارد.

توجه:برای ایجاد افکت‌های انتقال، مرورگر باید از تغییرات سه‌بعدی CSS3 پشتیبانی کند:

پشتیبانی مرورگر

  • Internet Explorer 10 از تغییرات سه‌بعدی پشتیبانی می‌کند (نسخه‌های قدیمی‌تر پشتیبانی نمی‌کنند)
  • Opera هنوز از تغییرات سه‌بعدی پشتیبانی نمی‌کند

افکت‌های انتقال می‌توانند به هر لینک یا فرم‌های ارسال شده با استفاده از ویژگی data-transition اعمال شوند:

<a href="#anylink" data-transition="slide">به صفحه دوم برو</a>

جدول زیر نشان‌دهنده انتقال‌های موجود برای استفاده با ویژگی data-transition است:

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

توجه:در jQuery Mobile، اثر تاریک و روشن در همه لینک‌ها به صورت پیش‌فرض است (اگر مرورگر پشتیبانی کند).

توجه:تمام اثرات پشتیبانی می‌کنند عملکرد معکوس، به عنوان مثال، اگر می‌خواهید صفحه از چپ به راست حرکت کند، نه از راست به چپ، از ویژگی data-direction با مقدار "reverse" استفاده کنید. این مقدار به صورت پیش‌فرض در دکمه بازگشت است.

مثال

<a href="#pagetwo" data-transition="slide" data-direction="reverse">کنده‌شده</a>

آزمایش کنید