صفحات jQuery Mobile

دخول jQuery Mobile

إشارة:على الرغم من أن jQuery Mobile يعمل مع جميع الأجهزة المحمولة، قد يواجه مشاكل التوافق على أجهزة الكمبيوتر المكتبية (بسبب دعم CSS3 المحدود).

لذلك نوصي بك باستخدام متصفح Chrome من Google للحصول على أفضل تجربة قراءة في هذا الدرس.

مثال

<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>

آزمایش کنید