آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش jQuery Mobile - صفحه بندی
کاربر می‌تواند با صفحات jQuery Mobile (صفحه) تعامل کند که محتوا را به نمایش‌های منطقی و نمایش‌های صفحه تقسیم می‌کند. نمایش صفحه می‌تواند با استفاده از انتقال‌های صفحه (page transitions) انیمیشن داشته باشد. صفحات چندگانه می‌توانند با استفاده از سند HTML ایجاد شوند و بنابراین نیازی به درخواست محتوا از سرور نیست.
جدول زیر انواع صفحات را به تفصیل نشان می‌دهد:
| شماره سریال | نوع و توضیحات |
|---|---|
| ۱ | صفحه تک (Single Page)
یک صفحه تک با استفاده از روش استاندارد نوشتن الگو در سند HTML ایجاد می‌شود. |
| ۲ | الگوی چند صفحه‌ای (Multi-Page Template)
صفحات چندگانه می‌توانند در یک سند HTML تنها شامل چند div با ویژگی data-role = "page" باشند که همه با هم بارگذاری می‌شوند. |
| ۳ | صفحات پنجره‌ای (Dialogs Page)
صفحات پنجره‌ای محتوا را در یک لایه تعاملی بالای صفحه باز می‌کنند. |
توافق‌ها، نه الزامات
-
عناصر دارای ویژگی data-role مانند هدر، فوتر، صفحه و محتوا برای ارائه قالب و ساختار پایه یک صفحه استفاده می‌شوند.
-
برای اسناد صفحه تک، استفاده از بسته بندی صفحه برای خودکارشدن اختیاری است.
-
عنصر ساختاری می‌تواند برای یک صفحه وب با چیدمان سفارشی حذف شود.
-
برای مدیریت صفحات، بسته بندی صفحه توسط چارچوب در صورت عدم وجود در علامت‌گذاری وارد می‌شود.
پیش‌بارگیری (Prefetching) صفحات
با اضافه کردن ویژگی data-prefetch، می‌توانیم صفحات را در DOM به صورت پیش‌بارگیری (Prefetch) کنیم در قالب‌های صفحه تک. برای کسب اطلاعات بیشتر اینجا کلیک کنید.
حافظه نهان DOM
هنگامی که حافظه مرورگر در DOM پر شده و صفحات متعددی بارگیری می‌شوند، مرورگر موبایل به دلیل این اتفاق ممکن است کند شود یا حتی کرش کند. روش ساده‌ای برای نظم دادن به DOM وجود دارد:
-
وقتی یک صفحه از طریق ajax بارگیری می‌شود، اشاره‌گر آن به حذف صفحه از DOM در هنگام هدایت به صفحه دیگر است.
-
صفحه قبلی که قبلاً بازدید کرده‌اید، هنگام بازبینی می‌تواند از حافظه نهان (Cache) بازیابی شود.
-
به جای حذف صفحات، می‌توانید به jQuery Mobile بگویید که آن‌ها را در DOM نگه دارد با استفاده از خط زیر −
$.mobile.page.prototype.options.domCache = true;
-
Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously.
pageContainerElement.page({ domCache: true });