صفحات jQuery Mobile

ورود به jQuery Mobile

نکته:اگرچه jQuery Mobile برای همه‌ی دستگاه‌های موبایل مناسب است، ممکن است در رایانه‌های رومیزی نیز مشکلات سازگاری وجود داشته باشد (به دلیل پشتیبانی محدود از CSS3).

بنابراین در این آموزش، ما توصیه می‌کنیم از مرورگر گوگل کروم برای بهترین تجربه خواندن استفاده کنید.

مثال

<body>
<div data-role="page">
  <div data-role="header">
    <h1>به وب‌سایت من خوش آمدید</h1>
  </div>
  <div data-role="content">
    <p>من یک توسعه‌دهنده‌ی موبایل هستم!</p>
  </div>
  <div data-role="footer">
    <h1>متن پاورقی</h1>
  </div>
</div>
</body>

آزمایش کنید

توضیح مثال:

  • data-role="page" صفحاتی است که در مرورگر نمایش داده می‌شوند
  • data-role="header" برای ایجاد نوار ابزار بالای صفحه استفاده می‌شود (معمولاً برای عنوان و دکمه‌های جستجو استفاده می‌شود)
  • data-role="content" محتوای صفحه را تعریف می‌کند، مانند متن، تصویر، فرم و دکمه‌ها و غیره
  • data-role="footer" برای ایجاد نوار ابزار پایین صفحه استفاده می‌شود

در این قالب‌ها، می‌توانید هر نوع عنصر HTML را اضافه کنید - پاراگراف، تصویر، عنوان، لیست و غیره.

نکته:ویژگی‌های data-* در HTML5 برای ایجاد یک رابط تعاملی "دوستانه با لمس" برای دستگاه‌های موبایل توسط jQuery Mobile استفاده می‌شوند.

افزودن صفحه در jQuery Mobile

در jQuery Mobile، می‌توانید چندین صفحه را در یک فایل HTML واحد ایجاد کنید.

لطفاً برای جدا کردن هر صفحه از یکدیگر از یک id منحصر به فرد استفاده کنید و از属性 href برای اتصال آن‌ها به یکدیگر استفاده کنید:

مثال

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">به صفحه‌ی دوم برو</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">برو به صفحه یک</a>
  </div>
</div>

آزمایش کنید

نکته:برنامه‌های وب با محتوای گسترده می‌توانند زمان بارگذاری را تحت تأثیر قرار دهند (مثلاً متن، لینک‌ها، تصاویر و اسکریپت‌ها و غیره). اگر نمی‌خواهید در صفحه‌ی لینک داخلی، از فایل‌های خارجی استفاده کنید:

<a href="externalfile.html">به صفحه‌ی خارجی برو</a>

استفاده از صفحه به عنوان پنجره‌ی صحبت

پنجره‌ی صحبت یک نوع视窗 برای نمایش اطلاعات یا درخواست ورودی است.

برای ایجاد یک پنجره‌ی صحبت هنگام کلیک کاربر بر روی یک لینک، به آن لینک data-rel="dialog" اضافه کنید:

مثال

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">برو به صفحه دو</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">برو به صفحه یک</a>
  </div>
</div>

آزمایش کنید