جی کوئیر موبائل پیج

ورود به jQuery Mobile

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

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

مثال

<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 واحد ایجاد کنید.

لطفاً از طریق یک شناسه منحصر به فرد، هر صفحه را جدا کنید و از ویژگی 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>

خود کا تجربہ کریئن