وظائف jQuery Mobile

وظائف jQuery Mobile

jQuery Mobile يقدم خمس أنماط مختلفة من المواضيع، من "a" إلى "e" - كل موضع يحتوي على أزرار وأشرطة ومربعات محتوى وأكثر، بألوان مختلفة. موضع jQuery Mobile يتكون من عدة تأثيرات مرئية وألوان.

لإعداد مظهر التطبيق، استخدم خاصية data-theme، وقم بتخصيص هذه الخاصية بحرف:

<div data-role="page" data-theme="a|b|c|d|e">
قيمة وصف مثال
a المبدئي. نص أبيض على خلفية سوداء. اختبار
b نص أبيض على خلفية زرقاء / نص أسود على خلفية رمادية اختبار
c نص أسود على خلفية رمادية فاتحة اختبار
d نص أسود على خلفية بيضاء اختبار
e نص أسود على خلفية برتقالية اختبار

نصيحة:دمج النمط الذي تحبه!

بافتراض، يستخدم jQuery Mobile "النمط a" لرأس الصفحة وقدم الصفحة، و "النمط c" للنصوص في رأس الصفحة (رمادي فاتح). ومع ذلك، يمكنك دمج النمط بسهولة.

الصفحة والنصوص والقدم الموضوعية

مثال

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

تجربة بنفسك

النافذة الموضوعية

مثال

<a href="#pagetwo" data-rel="dialog">انتقل إلى صفحة الحوار الموضوعية</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

تجربة بنفسك

الزر الموضوعي

مثال

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

تجربة بنفسك

الرموز الموضوعية

مثال

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

تجربة بنفسك

الزر الموضوعي في رأس الصفحة و قدم الصفحة

مثال

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">المنزل</a>
  <h1>مرحبًا بك في صفحتي الرئيسية</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">البحث</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">زر 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">زر 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">زر 3</a>
</div>

تجربة بنفسك

الشريط الإضافي الموضوعي

مثال

<div data-role="footer" data-theme="e">
  <h1>أدخل نص القدم هنا</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">زر 1</a></li>
      <li><a href="#" data-icon="arrow-r">زر 2</a></li>
      <li><a href="#" data-icon="arrow-r">زر 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >زر 4</a></li>
    </ul>
  </div> 
</div>

تجربة بنفسك

الزر القابل للطي والمحتوى الموضوعي

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>انقر علي - أنا قابلة للطي!</h1>
  <p>أنا المحتوى الموسع.</p>
</div>

تجربة بنفسك

القائمة الموضوعية

مثال

<ul data-role="listview" data-theme="e">
  <li><a href="#">نقطة القائمة</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">نقطة القائمة</a></li>
  <li><a href="#">نقطة القائمة</a></li>
</ul>

تجربة بنفسك

أزرار تقسيم موجهة

مثال

<ul data-role="listview" data-split-theme="e">

تجربة بنفسك

قائمة قابلة للطي موجهة

مثال

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

تجربة بنفسك

نموذج موجه

مثال

<label for="name">اسمك الكامل:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">اختر اللون المفضل:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">أحمر</option>
  <option value="green">أخضر</option>
  <option value="blue">أزرق</option>
</select>

تجربة بنفسك

نموذج قابل للطي موجه

مثال

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>انقر هنا - أنا قابلة للطي!</legend>

تجربة بنفسك

إضافة أنماط جديدة

يُسمح لك jQuery Mobile أيضًا بإضافة أنماط جديدة إلى الصفحات المحمولة.

يرجى تعديل ملف CSS (مثل jQuery Mobile الموزع) لإضافة أو تعديل أنماط جديدة. كل ما تحتاجه هو نسخ جزء من النمط، وإعادة تسمية الفئة باستخدام الحرف (f-z)، ثم تعديل الألوان والخطوط وفقًا لما تفضله.

يمكنك أيضًا إضافة أنماط جديدة باستخدام فئة الموضوع في وثيقة HTML - أضف فئة ui-bar-(a-z) لتقسيم الأدوات، وأضف فئة ui-body-(a-z) لتقسيم المحتوى：

مثال

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

تجربة بنفسك