آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش jQuery Mobile - انتقال ها
این امکان را فراهم می کند تا مقدارهای ویژگی را که در طول زمان مشخصی رخ می دهد تغییر دهید و با اعمال سبک های مختلف برای هر حالت، رفتار یک المان را از یک حالت به حالت دیگر تغییر دهید.
جدول زیر فهرستی از ترنزیشن های صفحه را که در چارچوب jQuery Mobile استفاده می شود، نشان می دهد −
| ردیف | انتقال و توضیحات | برای صفحات (Pages) | برای پنجره‌های مودال (Dialogs) |
|---|---|---|---|
| ۱ |
محو شدن (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 (پنجره مودال لغزش) |
| 6 |
اسلاید فید (slidefade) صفحه را از راست به چپ کشیده و صفحه بعدی را آهسته نمایش می‌دهد. |
صفحه اسلاید فید (Slidefade Page) | دیالوگ اسلاید فید (Slidefade Dialog) |
| 7 |
اسلاید آپ (slideup) صفحه را از پایین به بالا کشیده می‌کند. |
صفحه اسلاید آپ (Slideup Page) | دیالوگ اسلاید آپ (Slideup Dialog) |
| 8 |
اسلاید دان (slidedown) صفحه را از بالا به پایین کشیده می‌کند. |
صفحه اسلاید دان (Slidedown Page) | دیالوگ اسلاید دان (Slidedown Dialog) |
| 9 |
چرخیدن (turn) امکان چرخیدن به صفحه بعدی وجود دارد. |
صفحه چرخیدن (Turn Page) | دیالوگ چرخیدن (Turn Dialog) |
| 10 |
هیچکدام (none) شما نمی‌توانید از هیچ تأثیر انتقالی با استفاده از این ویژگی استفاده کنید. |
صفحه هیچکدام (None Page) | دیالوگ هیچکدام (None Dialog) |
تنظیم ترانزیشن و پیکربندی جهانی
به طور پیش فرض، صفحات در چارچوب با ترانزیشن fade همراه هستند. شما می‌توانید با اضافه کردن ویژگی data-transition به لینک، از ترانزیشن‌های دلخواه خود استفاده کنید. شما می‌توانید با استفاده از ویژگی defaultPageTransition به صفحه‌ها افکت ترانزیشن پیش فرض متفاوتی بدهید. برای دیالوگ‌ها، می‌توانید از ویژگی defaultDialogTransition استفاده کنید.
ترانزیشن پشتیبان (Fallback Transition)
تمام ترانزیشن‌ها از تحولات ۳بعدی پشتیبانی می‌کنند به جز ترانزیشن fade. دستگاه‌هایی که از تحولات ۳بعدی پشتیبانی نمی‌کنند، باید از ترانزیشن fade استفاده کنند. برخی از مرورگرها برای هر نوع ترانزیشن از تحولات ۳بعدی پشتیبانی نمی‌کنند، بنابراین می‌توانید از ترانزیشن fade به عنوان گزینه پشتیبانی ترانزیشن پیش فرض استفاده کنید.
حداکثر اسکرول برای انتقالات
هنگامی که از یک صفحه به صفحه دیگر اسکرول می کنید، انتقالات به صورت none تنظیم شده و موقعیت اسکرول سه برابر ارتفاع صفحه دستگاه خواهد بود. گاهی اوقات ، ممکن است در پاسخگویی کند شوید یا مرورگر هنگ کند وقتی روی هر المانی که به صفحات دیگر اشاره دارد کلیک می کنید. برای جلوگیری از این مشکلات ، ما از موقعیت اسکرول برای انتقال با استفاده از تابع getMaxScrollForTransition استفاده می کنیم.
حداکثر عرض برای انتقالات
می توانید هنگامی که عرض پنجره بزرگتر از پهنای پیکسل است ، انتقال را غیرفعال کنید. می توانید با استفاده از گزینه $.mobile.maxTransitionWidth که به صورت سراسری تنظیم شده است، حداکثر عرض برای انتقالات را پیکربندی کنید. این گزینه مقادیری مانند پهنای پیکسل یا مقدار false را می پذیرد و اگر مقدار آن در هنگام بزرگتر بودن پنجره از مقدار مشخص شده بیشتر نباشد ، انتقال به none تنظیم می شود.
انتقال های صفحه یکسان
شما می توانید با استفاده از گزینه allowSamePageTransition در متد change() از ابزار صفحه کانتینر ویجت، انتقال ها را به صفحه فعلی اضافه کنید.
ایجاد انتقال های سفارشی
شما می توانید با استفاده از گزینه $.mobile.transitionHandlers، انتقال های سفارشی را در صفحه ایجاد کنید که انتخابی از انتقال ها در وب سایت یا برنامه را گسترش می دهد.
مثال برای صفحات (Pages) :
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<body>
<div data-role = "page" id = "fade_page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>Welcome example.com!!! Click the link to go page two.</p>
<a href = "#fade_page2" data-transition = "fade">Page Two</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
<div data-role = "page" id = "fade_page2">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>Click the link to go page one.</p>
<a href = "#fade_page1">Page One</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>مثال برای پنجره‌های مودال (Dialogs) :
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>Welcome to example.com!!! Click the link to see dialog box.</p>
<a href = "#page2" data-transition = "fade">Page Two</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
<div data-role = "page" data-dialog = "true" id = "page2">
<div data-role = "header">
<h2>This is Dialog box</h2>
</div>
<div data-role = "main" class = "ui-content">
<p>Click the link to go page one.</p>
<a href = "#page1">Page One</a>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>