المحتوى عن 'jquery mobile'. - أكاديمية حسوب

jquery mobile الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول

مزيد من المعلومات حول "الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول"

سنتحدث في درسنا الأخير من هذه السلسلة عن إنشاء القوائم ul-li، وكيف نطبق القالب على القوائم المرتبة وغير المرتبة، وسنشرح كيف نستخدم الصورة المصغرة (thumbnails) والأيقونات في القوائم، وكيف ننشئ نماذج البحث وتسجيل الدخول باستخدام عناصر النموذج، ويأتي كل هذا مع مقتطفات من الشيفرة البرمجية. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول إنشاء قائمة قياسية يمكنك باستخدام HTML إنشاء قائمة قياسية عن طريق إنشاء عنصر ul ووضع عناصر li داخله، وستتبع نفس الخطوات لإنشاء قائمة قياسية في jQuery Mobile وستحتاج إلى إضافة الخاصية data-role="listview"‎ إلى عنصر ul. المثال 51: القوائم باستخدام jQuery Mobile <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">List Items</li> <li>I am a list item!</li> <li>I am another list item!</li> <li data-role="list-divider">List Items with Links</li> <li><a href="#">I am a link in a list item!</a> </li> <li><a href="#">I am another link in a list item!</a> </li> </ul> </div> </div> </body> </html> تطبيق قالب على شكل عناصر القائمة لإضافة المرونة إلى شكل القائمة، تملك jQuery Mobile بعض خاصيات data لتنسيق الحاويات وفقاعات العد (count bubbles) وأزرار التقسيم (split buttons). لتطبيق قالب على قائمة مقسمة (list divider)، يمكنك إما تطبيق الخاصية data-theme مباشرةً أو يمكنك استخدام الخاصية data-divider-theme التي تطبقها على وسم ul الرئيسي. بالنسبة لفقاعات العد، استخدم الخاصية data-count-theme التي يمكنك وضعها على الوسم ul لتطبيق القالب على جميع فقاعات العد في القائمة، أو إلى عناصر فردية لتحديد الفرق بين قوائم عدّ القوالب المختلفة داخل قائمة معينة. استخدم الخاصيتين data-split-theme و data-split-icon لقالب أزرار التقسيم. تسمح لك الخاصية data-split-theme بتحديد القالب للزر الصحيح في أزرار التقسيم، ويمكنك تطبيقها إما على ul أو على عناصر فردية في القائمة. مثال 52: استخدام قوالب jQuery في مكونات القائمة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <section id="swatch-e" data-role="page" data-theme="e"> <header data-role="header" data-theme="e"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Theming list view elements</h3> <ul data-role="listview" data-split-icon="star" data-divider-theme="e" data-count-theme="a"> <li data-role="list-divider">Tutorial courses<span class="ui-li-count">3</span> </li> <li><a href="application.php">Microsoft Application</a><a href="order.php">Make order</a> </li> <li><a href="suite.php">Graphic suite</a><a href="apply.php">Apply now</a> </li> <li><a href="dkit.php">Developers kit</a><a href="request.php">Request now</a> </li> </ul> </div> <footer data-role="footer"> <h1>footer</h1> </footer> </section> </body> </html> إنشاء قائمة مركّبة لإنشاء قائمة مركبة (inset list) تفاعلية (تشبه عناصرها الأزرار)، ابدأ بإنشاء قائمة قياسية وأضف إليها الخاصية data-inset="true"‎ إلى عنصر ul. غيرنا السطر الأول لجعل القائمة مركبة: <ul data-role="listview" data-inset="true"> مثال 53: إنشاء قائمة مركّبة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">List Items</li> <li>I am a list item!</li> <li>I am another list item!</li> <li data-role="list-divider">List Items with Links</li> <li><a href="#">I am a link in a list item!</a> </li> <li><a href="#">I am another link in a list item!</a> </li> </ul> </div> </div> </body> </html> استخدام قائمة مرتَّبة تحتاج إلى البدء بعنصر ol وتضمين li داخله لإنشاء قائمة مرتبة. كل عنصر li سيُرقَّم تلقائيًّا بناءً على ترتيبه في القائمة. مثال 54: استخدام jQuery Mobile لإنشاء قائمة مرتبة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ol data-role="listview"> <li data-role="list-divider">Numbered List Items with Links</li> <li><a href="#">Polar</a> </li> <li><a href="#">Grizzly</a> </li> <li><a href="#">Brown</a> </li> <li><a href="#">Black</a> </li> </ol> </div> </div> </body> </html> مثال 55: استخدام jQuery Mobile لإنشاء قائمة مركبة مرتبة في حين لم تُعد القائمة المرتبة كقائمة مركبة مرتبة، إلا أنه يمكنك إنشاء واحدة باستخدام الخاصية data-inset="true"‎ على العنصر ol. <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ol data-role="listview" data-inset="true"> <li data-role="list-divider">Numbered List Items with Links</li> <li><a href="#">Polar</a> </li> <li><a href="#">Grizzly</a> </li> <li><a href="#">Brown</a> </li> <li><a href="#">Black</a> </li> </ol> </div> </div> </body> </html> إضافة عداد إلى القائمة في jQuery Mobile يحظى هذا النمط بشعبية في تطبيقات الرسائل أو البريد الإلكتروني لعرض رقم العناصر أو حساب عدد العناصر الموجودة في القسم الفرعي أو رابط، ويمكنك تكرار هذا النمط باستخدام عنصر يحتوي على الخاصية class="ui-li-count"‎ داخل عناصر li. مثال 56: استخدام jQuery Mobile لوضع عداد في قائمة قياسية <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">List Items with Links and a Count</li> <li><a href="#">Bugs<span class="ui-li-count">5</span></a> </li> <li><a href="#">Comments<span class="ui-li-count">12</span></a> </li> <li><a href="#">Suggestions<span class="ui-li-count">8</span></a> </li> <li><a href="#">Tickets<span class="ui-li-count">27</span></a> </li> </ul> </div> </div> </body> </html> إضافة الأيقونات والصور المصغرة إلى عناصر قائمة باستخدام jQuery عند تصميم قائمتك، قد ترغب في تضمين أيقونة أو صورة مصغرة مع كل عنصر في القائمة، وهذا ليس ممكنا فقط بل سهل أيضًا. إضافة صورة مصغّرة الصورة المصغّرة هي معاينة أو نسخة صغيرة من صورة أكبر، ويمكنك إضافة الصور المصغرة إلى عناصر القائمة عن طريق تضمينها داخل عنصر a في عنصر li. مثال 57: استخدام jQuery Mobile لإضافة صور مصغرة إلى عناصر القائمة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">List Items with Links and Thumbnails</li> <li> <a href="#"><img src="images/virgin.jpg" alt="A Virgin" />Virgin</a> </li> <li> <a href="#"><img src="images/tear.jpg" alt="Tears" />Tears</a> </li> <li><img src="images/scholar.jpg" alt="Scholars" />Scholars</li> <li><img src="images/studying.jpg" alt="Study" />Study</li> </ul> </div> </div> </body> </html> إضافة أيقونات إلى عناصر قائمة المثال 58: استخدام jQuery Mobile لإضافة أيقونات إلى عناصر القائمة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">List Items with Links and Thumbnails</li> <li> <a href="#"><img class="ui-li-icon" src="images/virgin.jpg" alt="A Virgin" />Virgin</a> </li> <li> <a href="#"><img class="ui-li-icon" src="images/tear.jpg" alt="Tears" />Tears</a> </li> <li><img class="ui-li-icon" src="images/scholar.jpg" alt="Scholars" />Scholars</li> <li><img class="ui-li-icon" src="images/studying.jpg" alt="Study" />Study</li> </ul> </div> </div> </body> </html> إنشاء قائمة مقسمة القائمة المقسمة (split list) هي قائمة تحتوي على عناصر تملك أكثر من رابط واحد. عندما تضيف عنصرين داخل عنصر li، يُنشئ jQuery Mobile قائمة مقسمة تلقائيًا. يأخذ العنصر الأول معظم مساحة عنصر القائمة تاركًا العنصر الثاني كقسم صغير مع مساحة لأيقونة على الجانب الأيمن من عنصر القائمة. بما أن القوائم المقسمة التي تنشئ تلقائيًا بإضافة رابطٍ ثانٍ، يمكنك خلط قوائم إضافية أخرى معًا. مثال 59: استخدام jQuery Mobile لإنشاء قائمة مقسمة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-split-theme="e"> <li data-role="list-divider">Split List</li> <li> <a href="#"> <h3>First link in a split list</h3> <p>The icon on the right is the default icon</p> </a> <a href="#" title="Second Link">Second link in a split list</a> </li> <li> <a href="#"> <img class="ui-li-icon" src="images/cable_car2.jpg" alt="Cars on route" /> <h3>Use with an icon</h3> <p>Yep, you can use icons with split lists</p> </a> <a href="#" title="Another link">Another split list link</a> </li> <li> <a href="#"> <img src="images/cable_car1.jpg" alt="Cars on wires" /> <h3>Use with a thumbnail</h3> <p>Wow, you can also use thumbnails in split lists.</p> </a> <a href="#" title="Titles are accessible">Another split list link</a> </li> </ul> </div> </div> </body> </html> محتوى قائمة البحث إذا كنت تستخدم القائمة لعرض عدد كبير من العناصر فيمكنك إرفاق مرشّح بحث لمساعدة المستخدمين في التنقل لإيجاد ما يريدون. إن إنشاء مرشّح البحث أسهل مما تعتقد، فكل ما يجب عليك فعله هو إضافة الخاصية data-filter="true"‎ إلى عنصر ul في قائمتك. مثال 60: استخدام jQuery Mobile لإنشاء محتوى قائمة البحث <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true"> <li data-role="list-divider">Secondary Names</li> <li>Okeagu Chioma</li> <li>Nonso Diobi(S.P)</li> <li>Ikenna Okoye</li> <li>Agu Chidera</li> <li>Onyeka Ibezim</li> <li>Maduka Abum</li> <li>Felix Onah</li> <li>Mmadueke Oluchukwu</li> <li>Nneka Ebeonadi</li> <li>Cosmas Ugwuoke</li> <li>Chisom Okonkwo</li> <li>Marvelous Nnaemeka</li> <li>Umenna Julius</li> <li>Leonard Onah</li> <li>Ferdinand Okoro</li> <li>Shedrack Onah</li> <li>Umenna Vera</li> </ul> </div> </div> </body> </html> تخصيص مرشح بحث عن نصوص في قائمة مركبة مثال 61: استخدام jQuery Mobile لإنشاء مرشح بحث عن نصوص في قائمة مركبة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Listing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Listing using jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true" data-filter-placeholder="Find Album..." data-inset="true"> <li data-role="list-divider">Adice</li> <li>Punishment</li> <li>Disgrace</li> <li>Disdain</li> <li>Insult</li> <li>Angry</li> <li>Ways mobile jQuery</li> </ul> </div> </div> </body> </html> تحسين النماذج مع jQuery Mobile يدعم jQuery Mobile النماذج (forms) في أجهزة الهاتف، فأُعيد صقل كل عنصر ليكون متاحًا ويمكن استخدامه بسهولة على أجهزة الهاتف، ضع في اعتبارك أن بعض أنماط النماذج تختلف قليلا على المنصة ومتصفح الهاتف الذي تستخدمه. مثال 62: استخدام jQuery Mobile لبناء نموذج تسجيل دخول بسيط <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Forms in jQuery Mobile</h1> </div> <div data-role="content"> <form id="login" name="login" action="login.php" method="POST"> <label for="username">Username: </label> <input type="text" name="username" id="username" value="" /> <br /> <label for="password">Password:</label> <input type="password" name="password" id="password" value="" /> <br /> <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" /> <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" /> </form> </div> </div> </body> </html> مثال 63: استخدام الخاصية data-role="fieldcontain"‎ لترصيف العناصر في نموذج تسجيل الدخول البسيط لاحظ أن هنالك فرق بسيط في الشيفرة البرمجية عن سابقه <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Forms in jQuery Mobile</h1> </div> <div data-role="content"> <form id="login" name="login" action="login.php" method="POST"> <div data-role="fieldcontain"> <label for="username">Username: </label> <input type="text" name="username" id="username" value="" /> <br /> </div> <div data-role="fieldcontain"> <label for="password">Password:</label> <input type="password" name="password" id="password" value="" /> <br /> </div> <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" /> <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" /> </form> </div> </div> </body> </html> تظهر الصورة في أسفل العناصر المنظمة لنموذج تسجيل الدخول البسيط الآن رأينا استخدام عناصر النص، دعنا نلقي نظرة على بعض عناصر الإدخال الأخرى في jQuery Mobile. أزرار الانتقاء ومربعات الاختيار ستفيدك أزرار الانتقاء عندما ترغب في تقديم أكثر من خيار واحد إلى المستخدم لكن يجب عليه أن يختار أحدها فقط، ويشبه ذلك اختبارات متعددة الاختيار أو نماذج "ملء الفقاعة". أزرار الانتقاء في jQuery Mobile متطورة أكثر من أزرار الانتقاء القياسية عبر استخدام عنصر التسمية لعرض زر الانتقاء على شريط سهل اللمس. يجب عليك لإنشاء زر انتقاء البدء بإنشاء عنصر الإدخال واستخدام الخاصية type="radio"‎. وقد ترغب أيضا بإعطاء زر الانتقاء خاصية القيمة والمُعرّف. لجعل أزرار الانتقاء متعددة تعمل معًا، يجب عليك إعطائها جميعًا نفس الاسم، أي يجب أن يشبه زر الانتقاء لهذا المقتطف: <input type="radio" name="radio-1" id="radio-1" value="Option 1" /> يمكنك جمع أزرار الانتقاء معًا داخل عنصر div أو عنصر fieldset باستخدام controlgroup، وسيعرضون دون فواصل بينها. إذا استخدمت عنصر fieldset فيمكنك أيضا استخدام عنصر legend لإعطاء وصف للمجموعة. إذا أردت عرض أزرار الانتقاء بشكل أفقي يمكنك استخدام الخاصية data-role="controlgroup"‎ والخاصية data-type="horizontal"‎ لكن ستكون أزرار الانتقاء كصف من الأزرار القياسية عوضًا عن سطر من أزرار الانتقاء. تشبه مربعات الاختيار أزرار الانتقاء، لكنها تسمح للمستخدم باختيار العدد الذي يرغب به من العناصر بدلا من تحديد عنصر واحد. وتمامًا مثل أزرار الانتقاء، يجب عليك إرفاق عنصر واصف (label) لكل عنصر checkbox حتى يتمكن jQuery Mobile من إنشاء شريط سهل اللمس. يجب عليك لإنشاء مربعات الاختيار البدء بعنصر الإدخال وإضافة الخاصية type="checkbox"‎، ويجب أن يشبه مربع الاختيار لهذا المقتطف: <input type="checkbox" name="checkbox-1" id="checkbox-1" /> يمكنك جمع مربعات الاختيار معا باستخدام عنصر الحاوية (container) مع الخاصية data-role="controlgroup"‎. مثال 64: إنشاء أزرار انتقاء ومربعات الاختيار في نموذج باستخدام jQuery Mobile. <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Forms in jQuery Mobile</h1> </div> <div data-role="content"> <form id="login" name="login" action="login.php" method="POST"> <div class="ui-grid-a"> <div class="ui-block-a"> <fieldset> <legend>Radio Buttons:</legend> <input type="radio" name="radio-group-1" id="radio1" value="Male" checked="checked" /> <label for="radio1">Male</label> <input type="radio" name="radio-group-1" id="radio2" value="Female" /> <label for="radio2">Female</label> </fieldset> <fieldset data-role="controlgroup"> <legend>Using a controlgroup:</legend> <input type="radio" name="radio-group-2" id="radio3" value="Boy" checked="checked" /> <label for="radio3">Boy</label> <input type="radio" name="radio-group-2" id="radio4" value="Girl" /> <label for="radio4">Girl</label> </fieldset> </div> <div class="ui-block-b"> <fieldset> <legend>Checkboxes:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Advice</label> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Condemn</label> </fieldset> <fieldset data-role="controlgroup"> <legend>Grouping checkboxes:</legend> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Microsoft</label> <input type="checkbox" name="checkbox-4" id="checkbox-4" /> <label for="checkbox-4">Adobe</label> </fieldset> </div> </div> </form> </div> </div> </body> </html> العنصر select يختلف العنصر select قليلا عن بقية العناصر لأنه لا يقوم بتمديد عنصر الإدخال، وبدلا من ذلك يتصرف كحاوي لعناصر الخيارات. كل عنصر اختيار لديه قيمة ويحتوي على نص، ويظهر هذا النص عند الضغط عليه أو لمس العنصر select، وعندما يرى المستخدم عناصر الخيارات ويختار واحد منها، ستصبح قيمته هي قيمة العنصر select. نمط عنصر الاختيار في jQuery Mobile هو زر مع سهم يشير للأسفل، كما أنه يأخذ مساحة كبيرة حسب ما يتاح له و يمكن استخدامه مع حاوية تملك الخاصية data-role="fieldcontain"‎ لوضع تسمية وتحديد العناصر على نفس السطر (إذا كان هنالك مساحة كافية على الشاشة). مثال 65: استخدام jQuery Mobile لإنشاء عنصر select في نموذج <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Forms in jQuery Mobile</h1> </div> <div data-role="content"> <form id="login" name="login" action="login.php" method="POST"> <label for="size-select">Select your Size:</label> <select name="size-select" id="size-select"> <option value="small">small</option> <option value="medium">medium</option> <option value="large">large</option> </select> <div data-role="fieldcontain"> <label for="radius-select">Choose a Radius</label> <select name="radius-select" id="radius-select"> <option value="radius-5">5</option> <option value="radius-15">15</option> <option value="radius-25">25</option> </select> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Set Time:</legend> <label for="hour-select">Hour</label> <select name="hour-select" id="hour-select"> <option>Hour</option> <option value="hour-08">08</option> <option value="hour-09">09</option> <option value="hour-10">10</option> </select> <label for="minute-select">Minute</label> <select name="minute-select" id="minute-select"> <option>Minute</option> <option value="minute-10">10</option> <option value="minute-20">20</option> <option value="minute-30">30</option> </select> </fieldset> </div> </form> </div> </div> </body> </html> عناصر إدخال إضافية تملك أجهزة الهاتف طرقًا أخرى جديدة لجمع مدخلات المستخدم، كان بعضها موجود لمتصفحات حواسيب سطح المكتب لبعض الوقت، لكن لم تُستخدم كفاية لتُعتبر شائعة. عند التفكير في ميزات التحكم أو الإدخال المختلفة للهاتف، غالبا ما ستتضمن شريط تمرير لتغيير الإعدادات، مفتاح تبديل إعداد إلى آخر وميزة البحث، وكلها مدعومة في jQuery Mobile. شريط التمرير (slider) يُستخدم شريط التمرير في الصفحات التي يجب فيها على المستخدم أن يضغط/يلمس ويسحب لتحديد قيمة بدلا من كتابتها، وهذا يجعل لشريط التمرير فوائد كثيرة كالتحكم في مستوى الصوت، أو السطوع، أو حتى للاستخدام على الصفحات التي تقوم بعمليات حسابية. ألق نظرة على الشيفرة البرمجية التالية وحاول معرفة ما تفعله كل خاصية: <input type="range" name="slider" id="slider" value="10" min="0" max="100" /> يبحث jQuery Mobile على type="range"‎ لإنشاء شريط التمرير، ونعم، حتى لو كان نوعه type="range"‎ فهو شريط تمرير. لا يوجد شيء مميز حول الخاصيتين name و id، فهما يعملان بنفس الطريقة التي تعمل بها عناصر الإدخال الأخرى. ومع ذلك، فإن الخاصية value مهمة لأنها تحدد أين يبدأ زر المنزلق/المقبض. تحدد الخاصية min أقل قيمة يمكن الوصول إليها. وأما الخاصية max فهي تحدد أقصى قيمة مسموح بها. يجب عليك استخدام تسمية مع كل شريط تمرير تُضمّنه في صفحتك، وينبغي أن يتم هذا ليس فقط للعرض وقابلية الوصول، بل لأنه مطلوب عند استخدام jQuery Mobile. مثال 66: استخدام jQuery mobile لإضافة أشرطة تمرير داخل النموذج <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Forms in jQuery Mobile</h1> </div> <div data-role="content"> <form id="volume" name="volume" action="volume.php"> <div data-role="fieldcontain"> <label>Bass:</label> <input type="range" name="" id="" min="10" max="110" value="80" /> </div> <div data-role="fieldcontain"> <label>Mid:</label> <input type="range" name="" id="" min="0" max="90" value="80" /> </div> <div data-role="fieldcontain"> <label>Treble:</label> <input type="range" name="" id="" min="5" max="105" value="80" /> </div> </form> </div> </div> </body> </html> زر القاطعة (flip toggle switch) يشبه زر القاطعة عملية النفي الثنائية (not) المطبقة على بت واحد، إما أنه مشتغل (on) أو أنه مطفأ (off)، وهذا المفتاح شائع في الإعدادات حيث يمكنك تشغيل أجزاء مختلفة من الهاتف أو تطفئها. ستحتاج لإنشاء زر القاطعة إلى البدء بعنصر select يملك عنصري option، ومن ثم تضيف الخاصية data-role="slider"‎ إلى العنصر select. وكما في عناصر الإدخال الأخرى، يمكنك وضع الزر داخل حاوية باستخدام data-role="fieldcontain"‎ لإبقاء التسمية والزر في نفس السطر (إذا كانت المساحة متوفرة). مثال 67: استخدام jQuery Mobile لإنشاء زر قاطعة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Flip in Forms using jQuery Mobile</h1> </div> <div data-role="content"> <form id="flip" name="flip" action="flipswitch.php"> <label for="flip-1">Brightness:</label> <select name="flip-1" id="flip-1" data-role="slider"> <option value="Bright">Bright</option> <option value="Dark">Dark</option> </select> <div data-role="fieldcontain"> <label for="flip-2">Flip switch:</label> <select name="flip-2" id="flip-2" data-role="slider"> <option value="Loud">Loud</option> <option value="Silent">Silent</option> </select> </div> </form> </div> </div> </body> </html> حقل البحث حقل البحث هو نوع جديد من المدخلات والذي هو جزء من مميزات HTML5، هذا الحقل هو حقل نص مُحسّن يحتوي على أيقونة لمساعدة المستخدمين على معرفة ما هو عليه، وعندما يبدأ المستخدم بكتابة شيء معين ستظهر أيقونة عند الضغط عليها أو لمسها ستحذف جميع مدخلات نص المستخدم في الحقل. لإنشاء حقل بحث، استخدم هذا المقتطف: <input type="search" name="search-input" id="search-input" value="" /> كما في العناصر الأخرى التي تناولناها حتى الساعة، تأكد من تضمين التسمية (label) لزيادة إمكانية الوصول إلى النموذج، ويمكنك أيضا استخدام حاوية مع data-role="fieldcontain"‎ لإبقاء التسمية وحقل البحث في نفس السطر إذا كانت هنالك مساحة كافية على الشاشة. مثال 68: إنشاء حقل بحث باستخدام jQuery Mobile <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Forms with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Search in Forms using jQuery Mobile</h1> </div> <div data-role="content"> <form id="search-form" name="search-form" action="search.php" method="get"> <label for="search-1">Search the site:</label> <input type="search" name="search-1" id="search-1" value="" /> <div data-role="fieldcontain"> <label for="search-2">Find:</label> <input type="search" name="search-2" id="search-2" value="" /> </div> </form> </div> </div> </body> </html> استخدام الإضافات يمكنك إضافة الإضافات بطرق مختلفة لأنها تغطي أي شيء ترغب في إضافته إلى المكتبة الرئيسية. بعض الإضافات عبارة على ملفات JavaScript التي تُضمّنها مع jQuery Mobile، والأخريات هي عبارة عن ملفات CSS إضافية. سنلقي نظرة سريعة على استخدام إضافة 960 شبكة (960 grid) مع صفحة تستخدم jQuery Mobile. إن ‏960‏ grid‏‏ عبارة عن نظام شبكة مشهور في مواقع ويب سطح المكتب، فهي تسمح للصفحات بأن تكون مرنة وتسمح للمحتوى بالتمدد والتقلص استنادًا إلى المساحة القابلة للعرض في المتصفح. Jquery Mobile هو بوابة لإضافة 960 grid لهذا النظام ويمكنك الحصول عليها من هنا. مثال 69: استخدام إضافات jQuery Mobile في إعدادات شيفرة HTML قياسية <!DOCTYPE html> <html> <head> <title>Developing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>960gs plugin example</h1> </div> <div data-role="content"> <div class="container_12"> <div class="grid_2"><a href="#" data-role="button">2 column</a> </div> <div class="grid_6"> <a href="#" data-role="button">6 column</a> <p>The fluid grid allows this layout to adapt to screen size</p> <p>You can see how it adjusts by changing device orientation</p> <p>When orientation changes, the size of the columns changes</p> </div> <div class="grid_4"> <a href="#" data-role="button">4 column</a> </div> </div> </div> </div> </body> </html> عرض تجريبي: تخطيط مواقع بسيطة لكن متجاوبة العرض التجريبي الأول: تخطيط ومعاينة موقع ملف عرض تجريبي 2: تخطيط الأجهزة اللوحية عرض تجريبي 3: تخطيط سطح المكتب عرض تجريبي 4: مثال jQuery Mobile بسيط ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 6 لصاحبه Andrew اقرأ أيضًا الدرس السابق: الأيقونات والأزرار وإنشاء تنسيقات مخصصة إنشاء تطبيقات ويب ذات صفحة وحيدة باستخدام jQuery

1 أغسطس 2019

jquery mobile الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة

هشام رزق الله أضاف مقال في jQuery

مزيد من المعلومات حول "الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة"

في درسنا الخامس اليوم، سنتحدث عن المجموعة المدمجة من الأيقونات، ووضع الأيقونة، وإنشاء أزرار مخصصة، واستخدام النماذج اللونية (swatches)، وإنشاء قوالب مخصصة …إلخ. جميع الأمثلة ستكون مدعومة بمقتطفات من الشيفرة البرمجية. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول إضافة الأيقونات إلى الأزرار تسمح لنا هذه الصور أو الأيقونات معرفة ما هو الزر دون الحاجة إلى قراءة محتواه الذي يدل على وظيفته، كما أنها تجعل بعض الأزرار تظهر يحجم أقل إذا لم يكن هنالك مساحة كافية الأمر الذي يساعد على توضيح ما يفترض القيام به. استخدام مجموعة الأيقونات المضمنة في jQuery يأتي jQuery Mobile مع مجموعة مدمجة من الأيقونات التي يمكنك استخدامها على أزرارك لتساعدك على جعل التصميم أفضل لأجهزة الهاتف. يمكنك تطبيق هذه الأيقونات على الأزرار بإضافة الخاصية data-icon=""‎ إلى العنصر الذي تستخدمه كزر. القيمة الموجودة في هذه الخاصية هي الأيقونة التي تريد عرضها في الزر؛ فعلى سبيل المثال، إذا أردت عرض أيقونة البحث في الزر استخدم الخاصية data-icon="search"‎ على العنصر الذي تستخدمه كزر. الأيقونات الموجودة هي: السهم الأيسر – data-icon="arrow-l"‎ السهم الأيمن – data-icon="arrow-r"‎ السهم العلوي – data-icon="arrow-u"‎ السهم السفلي – data-icon="arrow-d"‎ حذف – data-icon="delete"‎ الجمع – data-icon="plus"‎ الطرح – data-icon="minus"‎ التأكد – data-icon="check"‎ أداة – data-icon="gear"‎ التحديث – data-icon="refresh"‎ التقدم إلى الأمام – data-icon="forward"‎ الرجوع إلى الخلف – data-icon="back"‎ الشبكة – data-icon="grid"‎ نجمة – data-icon="star"‎ إنذار – data-icon="alert"‎ معلومة – data-icon="info"‎ منزل – data-icon="home"‎ بحث – data-icon="search"‎ مثال 38: إضافة أيقونات إلى الزر يمكن إنشاء أزرار الروابط عن طريق استخدام -role="button"‎. يملك كل زر أيقونة مختلفة عن طريق استخدام data-icon="back"‎، و dataicon="home"‎، و data-icon="forward"‎ وسيضيف هذا أيقونات jQuery الافتراضية إلى الأزرار الموجود في الصور في الأسفل: <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Default icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" data-fullscreen="false"> <div data-role="header" data-position="fixed"> <a href="#" data-icon="back">Previous</a> <h1>jQuery Default Icon </h1><a href="#" data-icon="gear">Settings</a> </div> <div data-role="content"> <a href="#" data-role="button" data-icon="back">Back</a> <a href="#" data-role="button" data-icon="home">Home</a> <a href="#" data-role="button" data-icon="forward">Forward</a> </div> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="features.html" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="supports.html">Supports</a> </li> <li><a href="contacts.html">Contacts</a> </li> </ul> </div> </div> </div> </body> </html> وضع أيقونات jQuery Mobile الافتراضية في أماكن مختلفة في الزر هذا هو السلوك الافتراضي لمكان الأيقونة على الأزرار، يمكننا تغيير مكان الأيقونة باستخدام خاصية data-iconpos=""‎ مع القيمة top، أو right، أو bottom وستكون الأيقونة في المكان الذي تخبرها بها، يمكننا أيضا استخدام القيمة notext لإبقاء الأيقونة على الزر وحذف النص، وهذا سيغير من حجم الزر ليكون أكبر بقليل من حجم الأيقونة نفسها ويمكن أن يكون مفيدا عندما تحتاج إلى وضع عدة أزرار على سطر واحد لشاشة صغيرة. مثال 39: استخدام الخاصية data-iconpos في تحديد مكان الأيقونة في الزر <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Default icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" data-fullscreen="false"> <div data-role="header" data-position="fixed"> <a href="#">Buy Me</a> <h1>Full Screen </h1><a href="#">Apply Now</a> </div> <div data-role="content"> <p>Use of data-iconpos Attribute in defining Icon placement in button</p> <a href="#" data-role="button" data-icon="back">Back</a> <a href="#" data-role="button" data-icon="home" data-iconpos="top">Home</a> <a href="#" data-role="button" data-icon="forward" data-iconpos="right">Forward</a> <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom">Config</a> <a href="#" data-role="button" data-icon="info" data-iconpos="notext">information</a> </div> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="features.html" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="supports.html">Supports</a> </li> <li><a href="contacts.html">Contacts</a> </li> </ul> </div> </div> </div> </body> </html> إنشاء أيقونات مخصصة ربما لاحظت أن جميع الأيقونات المتضمنة موجودة في أعلى دائرة أو قرص، وهذا سيساعد على إبراز الأيقونة وعملها على أي لون خلفية، يجب أن يناسب هذا القرص مساحة 18×18 بيكسل، وهذا معناه أنه عندما تصمم زر مخصص، ستحتاج إلى إضافة مساحة بعض البيكسلات حتى لا تظهر الأيقونة مقتطعة أو خارج مكانها عن وضع القرض. أنشئنا قرص الأيقونة وأضفنا الأيقونة باستخدام مقتطف شيفرة البرمجيةCSS: <style> .ui-icon-custom-cart-icon { background-image: url("godwins_customize_cart-icon.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-custom-cart-icon { background-image: url("customised_cart-icon.png"); background-size: 18px 18px; } } </style> ثم أضفه إلى شيفرة HTML الخاص بنا كما هو موضح أدناه: <div data-role="content"> <a href="#" data-role="button" data-icon="custom-cart-icon">Customised Cart icon</a> </div> مثال 40: تطبيق زر مخصص على الزر استخدمنا الخاصية data-icon ومررنا لها قيمة مخصصة، تُستخدم القيمة custom-cart-icon لتوليد صف باسم ui-icon-custom-cart-icon: <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> .ui-icon-custom-cart-icon { background-image: url("godwins_customize_cart-icon.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-custom-cart-icon { background-image: url("customised_cart-icon.png"); background-size: 18px 18px; } } </style> </head> <body> <div data-role="page" data-fullscreen="false"> <div data-role="header" data-position="fixed"> <a href="#" data-icon="back">Previous</a> <h1>Custom Icon </h1><a href="#" data-icon="gear">Settings</a> </div> <div data-role="content"> <a href="#" data-role="button" data-icon="custom-cart-icon">Customised Cart icon</a> </div> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="features.html" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="supports.html">Supports</a> </li> <li><a href="contacts.html">Contacts</a> </li> </ul> </div> </div> </div> </body> </html> يُستخدم استعلام الوسائط (media query) للتحقق من دعم متصفح الهاتف للأيقونات عالية الدقة، إذا كان المتصفح يدعمهم، فستعمل شيفرة CSS الموجودة داخل media-query. الخاصية background-image تشير إلى ملف عالي الدقة. يجب أن تتناسب الصورة مع مساحة 18×18 بيكسل، فبدون تعيين هذه الخاصية، ستحاول الصور الأكبر التوسع وسيكون أغلبها مخفي مع إبقاء جزء صغير من الأيقونة المخصصة ظاهر. استخدام الأيقونات والأصناف على الرغم من أن CSS3 يساعد على تقليل حجم الملف، لاتزال بعض الأصول (assets) الثابتة تُستخدم أيضا، لذا جُمعوا معا للتقليل من عدد الملفات الذي يتم تحميلهم عند الحاجة. يستخدم القالب الحالة 5 ملفات صور ثابتة: ajax-loader.png—هذا هو المُحمل المتحرّك. icons-18-white.png—يحتوي على 22 أيقونة بيضاء. icons-18-black.png—يحتوي على 22 أيقونة سوداء. icons-36-white.png—يحتوي على 22 أيقونة بيضاء ذات دقة عالية. icons-36-black.png—يحتوي على 22 أيقونة سوداء ذات دقة عالية. الملف ajax-loader.png هو صور للمُحمّل الذي يظهر عند تحميل الصفحات عبر AJAX، أبعاد الصورة هي35×35 بيكسل وتُحمل عن طريق المتصفح عند تحميل الصفحة. ملفا icons-18-white.png وicons-18-black.png هي نقوش متحركة أفقيا بحجم 776×18 لكل منها، وتحتوي على 22 أيقونة أو صورة بحجم 18×18 بيكسل مفصولة بمساحة 18 بيكسل، أغلب الأيقونات في هذا الملف لا تأخذ مساحة 18×18 كاملة، وهذا لأن القرص الدائري يعمل عبر CSS كخلفية لمساعدة الأيقونات على البقاء ظاهرة على أي مكان تكون فيه. كل صورة لديها ما بين 2 و 4 بيكسل مساحة فارغة حول الحواف لإفساح المجال للقرص. ملفا icons-36-white.png و icons-36-black.png هي نقوش متحركة تحتوي على نفس الصور كما في الملفات الأولى، ولكن الفرق أنَّ الأيقونات هنا بحجم 36×36 بيكسل مع مساحة 36 بينهم لتستخدم في شاشات العرض عالية الدقة، مثال شاشات Retina™‎. تُحمل هذه الأيقونات عالية الدقة فقط على الأجهزة التي تدعمهم، لذلك لا تقلق حول بطء التحميل على الأجهزة التي لا تستخدمها، ويتم هذا عبر هذا المقتطف الذي يتحقق من توافق الأجهزة: @media only screen and(-webkit - min - device - pixel - ratio: 1.5), only screen and(min--moz - device - pixel - ratio: 1.5), only screen and(min - resolution: 240 dpi) {} إذا كان الجهاز لا يلبي متطلبات استعلام الوسائط، فسيتخطى الشيفرة البرمجية التي بداخله ولن تُحمّل. إضافة قوالب jQuery Mobile ونماذج ألوان إلى موقعك في jQuery Mobile، القالب (theme) هو تصميم مرئي موحد يُطبّق على الواجهة. من الناحية العملية، يحدد القالب كل شيء من الخطوط إلى إسقاط الظلال إلى الألوان. تماشيًا مع فكرة فصل التخطيط من اللون والنسيج (texture)، يمكن لقالب jQuery Mobile الحصول على عدة نماذج للألوان، فنماذج الألوان (Swatches) هي مجموعة من الأنماط المُعرَّفة التي يمكن أن تُطبَّق عند استخدام القالب. افتراضيًا، يوجد 5 نماذج للألوان متضمنة في jQuery Mobile، يمكنك تغيير النموذج الافتراضي المُطبَّق على صفحة كاملة بتضمين الخاصية data-theme مع قيمة النموذج الذي تريد تحميله، وعند تحميل الصفحة، جميع المكونات ما عدا الرأس ستحصل على مخطط ألوان ذلك النموذج. نموذج اللون (swatch) هو مفهوم اللون الموحد (unified color) الذي يحكم ألوان الخلفية والنص والظلال والأيقونة ...إلخ. قالب jQuery Mobile الافتراضي يتضمن 5 نماذج (تسمى a، و b، و c، و d و e) ويوفر كل نموذج تركيز بصري، فسيكون التركيز البصري أكثر وضوحًا مع النموذج a (عادةً نص أبيض على خلفية سوداء)، والنموذج d هو الأكثر ليونة. النموذج e يمثِّل حالة "الخطأ" (error)، وستكون في معظم الحالات النموذج c هو النموذج الافتراضي في jQuery Mobile، لكن من السهل اختيار نموذج مختلف باستخدام الخاصية data-theme، فيمكن تطبيق هذه الخاصية على أي عنصر وسيُطبَّق تلقائيًّا على العناصر الفرعية. ومع ذلك، تمت إضافة الخاصية data-theme="b"‎ إلى الشيفرة الأساسية اللازمة لإعداد الصفحة، وستغير هذه الخاصية النموذج المُطبّق على كامل الصفحة. إنتبه إلى أنَّه لن يُغيَّر النموذج للرأس والذيل، ويجب عليك لتغييرهما تضمين الخاصية data-theme بشكل منفصل. المثال 41: إضافة قوالب jQuery mobile ونماذج ألوان إلى الشيفرة الأساسية لإعداد صفحة <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Swatches</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"> <h1>Single Swatch</h1> </div> <div data-role="content"> <p>Look at the button!</p> <a href="#" data-role="button">I am a button</a> <ul data-role="listview" data-inset="true"> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </div> </div> </body> </html> المثال 42: إضافة نماذج ألوان مشتركة في jQuery mobile <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <section id="swatch-default" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Default Swatch</h3> <ul data-role="listview"> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> <li><a href="#swatch-e">View swatch e</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> <section id="swatch-a" data-role="page" data-theme="a"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch A</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> <li><a href="#swatch-e">View swatch e</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> <section id="swatch-b" data-role="page" data-theme="b"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch B</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> <li><a href="#swatch-e">View swatch e</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> <section id="swatch-c" data-role="page" data-theme="c"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch C</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> <li><a href="#swatch-e">View swatch e</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> <section id="swatch-d" data-role="page" data-theme="d"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch D</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-e">View swatch e</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> <section id="swatch-e" data-role="page" data-theme="e"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch E</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer content</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> </body> </html> النموذج الافتراضية النموذج A القطعة B النموذج C النموذج D النموذج E وإليك بعض الصور لعنصر إدخال من نوع خيار متعدد بنماذج متعددة: خلط عدة نماذج مع بعضها بعضًا يمكنك خلط ومطابقة النماذج داخل الصفحة، مما يتيح لك السيطرة الدقيقة على مظهر التطبيق. المثال 43: خلط النماذج الافتراضية المشتركة في jQuery mobile <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <section id="swatch-mixed" data-role="page" data-theme="e"> <header data-role="header" data-theme="b"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Mixing Swatches</h3> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> </div> <footer data-role="footer" data-theme="d"> <h1>Okeagu Godwin</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps" data-theme="d"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> </body> </html> تحديد النموذج المراد تطبيقه على العناصر عن طريق الأصناف بدءًا من الجزء العلوي، يمكنك أن ترى أن كل من الصفحة وأقسام الرأس لا تستخدم الخاصية datatheme لذلك سيُستخدم القالب الافتراضي على هذه الأقسام. المثال 44: خلط النماذج الافتراضية المشتركة فيjQuery mobile بتحديد النموذج المطبَّق على على العناصر حسب قيمة خاصية الصنف <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Swatches</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Class Swatch</h1> </div> <div data-role="content" class="ui-body-a"> <p>The body or content area is using class="ui-body-a"</p> <a href="#" data-role="button" class="ui-btn-up-e">class="ui-btn-up-e"</a> <ul data-role="listview" data-inset="true" class="ui-bar-d"> <li>This list</li> <li>is using</li> <li>class="ui-bar-d"</li> </ul> </div> </div> </body> </html> على الرغم من استخدام أصناف قليلة، إلا أنه يمكنك تخصيص كل جانب من أنماط jQuery Mobile عن طريق استبدال الأصناف كما يلي: ui-bar-(a-z) ui-body-(a-z) ui-btn-up-(a-z) ui-btn-down-(a-z) ui-btn-active ui-corner-all -ui-br ui-icon ui-icon-alt ui-overlay ui-shadow للإطلاع على كافة الأصناف التي يمكنك استخدامها، افتح ملف CSS غير المضغوط أو ملف CSS المُصغَّر الذي هو جزء من إطار jQuery Mobile وستجد تعليقات في هذا الملف وهو مفيد حقًا عندما تريد إنشاء أنماطك المخصصة. دعنا نلقي نظرة حول كيفية إنشاء أنماطنا الخاصة وتضمينها. التعديل على نموذج ألوان موجود تُعرّف نموذج ألوان القالب في jQuery Mobile عن طريق CSS، لذلك فهي سهلة التعديل لتناسب الاحتياجات الفردية الخاصة بك. تُقسم النماذج إلى أقسام في ورقة أنماط jQuery Mobile وهي واضحة. أفضل طريقة لتعديل القالب هي عن طريق إنشاء ورقة أنماط للأنماط المطلوبة ومن ثم تحميلها بعد تحميل ورقة أنماط jQuery Mobile، وهذا مفيد بشكل خاص إذا كنت تستخدم CDN لخدمة ورقة أنماط jQuery Mobile. تطبيق قالب مخصص الآن، أنت قادر على تخصيص أنماط jQuery Mobile باستخدام أصناف CSS، وحان الوقت الآن لتعديل الأنماط الافتراضية وتضمين الأنماط الخاصة بك. وللقيام بذلك ستحتاج إلى تعديل ملف CSS الموجود، أو إنشاء واحد خاص بك وإضافته إلى الصفحة. لأنني أعتقد في استخدام أساليب غير تدميرية عند تعلم شيء جديد، أنشأت ورقة أنماط CSS جديدة وأضفتها إلى صفحتنا. على سبيل المثال، لنفترض أننا نريد تغيير اللون الأصفر من النموذج E إلى الأخضر، يمكننا فعل ذلك بسهولة عن طريق تغيير بعض قواعد CSS. لاحظ أنني قمت بتضمين ورقة أنماط النموذج E بعد ورقة أنماط jQuery Mobile مما يضمن أن أنماطي ستحل محل الأنماط الافتراضية. مثال 45: تطبيق قالب مخصص <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> /* Change: #fceda7 to #a7fcaf #fadb4e to #5afa4e #f7c942 to #5cf742 #33ff33 to #9efaa2 #fe3 to #33ff33 #fcf0b5 to #b5fcb5 #e79952 to #52e760 #fbe26f to #76fb6f */ .ui-bar-e { border: 1px solid #5cf742; background: #5afa4e; background-image: -moz-linear-gradient(top, #a7fcaf, #5afa4e); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a7fcaf), color-stop(1, #5afa4e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',EndColorStr='#5afa4e')"; } .ui-body-e { border: 1px solid #5cf742; background: #9efaa2; background-image: -moz-linear-gradient(top, #fff, #9efaa2); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #9efaa2)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#9efaa2')"; } .ui-btn-up-e { border: 1px solid #5cf742; background: #5afa4e; text-shadow: 0 1px 1px #33ff33; background-image: -moz-linear-gradient(top, #a7fcaf, #5afa4e); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a7fcaf), color-stop(1, #5afa4e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',EndColorStr='#5afa4e')"; } .ui-btn-hover-e { border: 1px solid #52e760; background: #76fb6f; background-image: -moz-linear-gradient(top, #b5fcb5, #76fb6f); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b5fcb5), color-stop(1, #76fb6f)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#b5fcb5',EndColorStr='#76fb6f')"; } .ui-btn-down-e { border: 1px solid #5cf742; background: #a7fcaf; background-image: -moz-linear-gradient(top, #5afa4e, #a7fcaf); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5afa4e), color-stop(1, #a7fcaf)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5afa4e',EndColorStr='#a7fcaf')"; } </style> </head> <body> <section id="swatch-e" data-role="page" data-theme="e"> <header data-role="header" data-theme="e"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h3>Swatch E</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a> </li> <li><a href="#swatch-a">View swatch a</a> </li> <li><a href="#swatch-b">View swatch b</a> </li> <li><a href="#swatch-c">View swatch c</a> </li> <li><a href="#swatch-d">View swatch d</a> </li> </ul> <p>Some sample form elements and buttons:</p> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-courses">Select Your Courses:</label> <select id="select-courses" name="select-courses" data-native-menu="false" multiple="multiple"> <option value="choose" data-placeholder="true">Choose...</option> <optgroup label="Microsoft Supports"> <option value="Word">Word</option> <option value="Powerpoint">Powerpoint</option> <option value="Excel">Excel</option> <option value="Access">Access</option> </optgroup> <optgroup label="Graphic Suite"> <option value="CorelDraw">CorelDraw</option> <option value="Adobe Photoshop" disabled="disabled">Adobe Photoshop</option> <option value="Photoshine">Photoshine</option> <option value="Paint">Paint</option> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="star">Yes</a> <a href="#" data-role="button" data-icon="alert">No</a> <a href="#" data-role="button" data-icon="home">Cancel</a> </div> </div> <footer data-role="footer"> <h1>Footer</h1> </footer> <div data-role="footer" data-position="fixed" data-id="rps"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-statepersist">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </section> </body> </html> إنشاء نموذج مخصص سيكون لديك خيارات مختلفة عندما يتعلق الأمر بإنشاء نموذج ألوان. يمكنك إما تغيير النموذج الموجود (وهذا ما فعلناه مسبقًا) أو بناء واحد جديد من الصفر، أو نسخ واحد والتعديل عليه وتغيير الإعدادات حسب تفضيلك. وهنالك خيار آخر وهو "إنشاء قالبك الخاص باستخدام ThemeRoller". لإنشاء نموذج خاصة بك، سننسخ نموذجًا من النماذج الموجودة ومن ثم نُعدِّل على الأنماط كما نريد. ستجد في الأسفل نموذجًا كاملًا نسخناه وغيّرناه إلى نموذج مخصص. مثال 46: نموذج كامل – نسخ a وتعديله ليتحول إلى النموذج f <style> .ui-bar-f { border: 1px solid #4a4a4a; background: #333333; color: #ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -webkit-gradient(linear, left top, left bottom, from( #014D88), to( #111)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#014D88, #111); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#014D88, #111); /* FF3.6 */ background-image: -ms-linear-gradient(#014D88, #111); /* IE10 */ background-image: -o-linear-gradient(#014D88, #111); /* Opera 11.10+ */ background-image: linear-gradient(#014D88, #111); } .ui-bar-f, .ui-bar-f input, .ui-bar-f select, .ui-bar-f textarea, .ui-bar-f button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-f .ui-link-inherit { color: #fff; } .ui-bar-f .ui-link { color: #F7E065; font-weight: bold; } .ui-bar-f .ui-link:hover { color: #FFFF7F; } .ui-bar-f .ui-link:active { color: #FFFF7F; } .ui-bar-f .ui-link:visited { color: #FFFF7F; } .ui-body-f, .ui-dialog.ui-overlay-f { border: 1px solid #3f3f3f; background: #444444; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -webkit-gradient(linear, left top, left bottom, from( #0C8DD2), to( #014D88)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#0C8DD2, #014D88); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#0C8DD2, #014D88); /* FF3.6 */ background-image: -ms-linear-gradient(#0C8DD2, #014D88/); /* IE10 */ background-image: -o-linear-gradient(#0C8DD2, #014D88); /* Opera 11.10+ */ background-image: linear-gradient(#0C8DD2, #014D88); } .ui-body-f, .ui-body-f input, .ui-body-f select, .ui-body-f textarea, .ui-body-f button { font-family: Helvetica, Arial, sans-serif; } .ui-body-f .ui-link-inherit { color: #fff; } .ui-body-f .ui-link { color: #FFFF7F; font-weight: bold; } .ui-body-f .ui-link:hover { color: #FFFF7F; } .ui-body-f .ui-link:active { color: #FFFF7F; } .ui-body-f .ui-link:visited { color: #FFFF7F; } .ui-btn-up-f { border: 1px solid #222; background: #065BDB; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #1065E4), to( #065BDB)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#1065E4, #065BDB); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#1065E4, #065BDB); /* FF3.6 */ background-image: -ms-linear-gradient(#1065E4, #065BDB); /* IE10 */ background-image: -o-linear-gradient(#1065E4, #065BDB); /* Opera 11.10+ */ background-image: linear-gradient(#1065E4, #065BDB); } .ui-btn-up-f a.ui-link-inherit { color: #fff/; } .ui-btn-hover-f { border: 1px solid 000; background: #444444; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #1A6FEF), to( #1065E4)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#1A6FEF, #1065E4); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#1A6FEF, #1065E4); /* FF3.6 */ background-image: -ms-linear-gradient(#1A6FEF, #1065E4); /* IE10 */ background-image: -o-linear-gradient(#1A6FEF, #1065E4); /* Opera 11.10+ */ background-image: linear-gradient(#1A6FEF, #1065E4); } .ui-btn-hover-f a.ui-link-inherit { color: #fff; } .ui-btn-down-f { border: 1px solid #014D88; background: #012E50; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #013B66), to( #0261A9)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#013B66, #0261A9/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#013B66, #0261A9); /* FF3.6 */ background-image: -ms-linear-gradient(#013B66, #0261A9); /* IE10 */ background-image: -o-linear-gradient(#013B66, #0261A); /* Opera 11.10+ */ background-image: linear-gradient(#013B66, #0261A9); } .ui-btn-down-f a.ui-link-inherit { color: #fff; } .ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f { font-family: Helvetica, Arial, sans-serif; text-decoration: none; } </style> نسخنا وعدلنا على النموذج a وأنشأنا منه النموذج f. أسرع طريقة لبدء التعديلات هو عمل بحث واستبدال (search-and-replace) على كامل الملف لـ ‎-a واستبدالها بخط فاصل (-) مع حرف لاسم النموذج. عند إجراء بحث واستبدال، تأكد من عدم استبدال ‎-o أو ‎-m أو ‎-w أو ‎-g أو ‎-i لأنه إما ستخرّب النمط أو ستلغي دعمه للمتصفحات الاخرى. القالب f هو شيفرة HTML معاينة في متصفح هاتف. المثال 47: قالب f المعدل في إعدادات شيفرة HTML القياسية <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> .ui-bar-f { border: 1px solid #4a4a4a; background: #333333; color: #ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -webkit-gradient(linear, left top, left bottom, from( #014D88), to( #111)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#014D88, #111); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#014D88, #111); /* FF3.6 */ background-image: -ms-linear-gradient(#014D88, #111); /* IE10 */ background-image: -o-linear-gradient(#014D88, #111); /* Opera 11.10+ */ background-image: linear-gradient(#014D88, #111); } .ui-bar-f, .ui-bar-f input, .ui-bar-f select, .ui-bar-f textarea, .ui-bar-f button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-f .ui-link-inherit { color: #fff; } .ui-bar-f .ui-link { color: #F7E065; font-weight: bold; } .ui-bar-f .ui-link:hover { color: #FFFF7F; } .ui-bar-f .ui-link:active { color: #FFFF7F; } .ui-bar-f .ui-link:visited { color: #FFFF7F; } .ui-body-f, .ui-dialog.ui-overlay-f { border: 1px solid #3f3f3f; background: #444444; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -webkit-gradient(linear, left top, left bottom, from( #0C8DD2), to( #014D88)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#0C8DD2, #014D88); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#0C8DD2, #014D88); /* FF3.6 */ background-image: -ms-linear-gradient(#0C8DD2, #014D88/); /* IE10 */ background-image: -o-linear-gradient(#0C8DD2, #014D88); /* Opera 11.10+ */ background-image: linear-gradient(#0C8DD2, #014D88); } .ui-body-f, .ui-body-f input, .ui-body-f select, .ui-body-f textarea, .ui-body-f button { font-family: Helvetica, Arial, sans-serif; } .ui-body-f .ui-link-inherit { color: #fff; } .ui-body-f .ui-link { color: #FFFF7F; font-weight: bold; } .ui-body-f .ui-link:hover { color: #FFFF7F; } .ui-body-f .ui-link:active { color: #FFFF7F; } .ui-body-f .ui-link:visited { color: #FFFF7F; } .ui-btn-up-f { border: 1px solid #222; background: #065BDB; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #1065E4), to( #065BDB)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#1065E4, #065BDB); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#1065E4, #065BDB); /* FF3.6 */ background-image: -ms-linear-gradient(#1065E4, #065BDB); /* IE10 */ background-image: -o-linear-gradient(#1065E4, #065BDB); /* Opera 11.10+ */ background-image: linear-gradient(#1065E4, #065BDB); } .ui-btn-up-f a.ui-link-inherit { color: #fff/; } .ui-btn-hover-f { border: 1px solid 000; background: #444444; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #1A6FEF), to( #1065E4)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#1A6FEF, #1065E4); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#1A6FEF, #1065E4); /* FF3.6 */ background-image: -ms-linear-gradient(#1A6FEF, #1065E4); /* IE10 */ background-image: -o-linear-gradient(#1A6FEF, #1065E4); /* Opera 11.10+ */ background-image: linear-gradient(#1A6FEF, #1065E4); } .ui-btn-hover-f a.ui-link-inherit { color: #fff; } .ui-btn-down-f { border: 1px solid #014D88; background: #012E50; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, left top, left bottom, from( #013B66), to( #0261A9)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#013B66, #0261A9/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#013B66, #0261A9); /* FF3.6 */ background-image: -ms-linear-gradient(#013B66, #0261A9); /* IE10 */ background-image: -o-linear-gradient(#013B66, #0261A); /* Opera 11.10+ */ background-image: linear-gradient(#013B66, #0261A9); } .ui-btn-down-f a.ui-link-inherit { color: #fff; } .ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f { font-family: Helvetica, Arial, sans-serif; text-decoration: none; } </style> </head> <body> <div data-role="page" data-theme="f"> <div data-role="header" data-theme="f"> <h1>Custom Styles</h1> </div> <div data-role="content"> <div data-role="collapsible" data-collapsed="false" data-content-theme="f"> <h3>Different Swatch</h3> <p> This collapsed content area uses a different style for the collapsed content than the rest of the page. </p> <a href="#" data-role="button" data-theme="f"> We just create an "F theme" of blue colour </a> </div> </div> <div data-role="footer" data-theme="f"> <h1>Script-Tutorials.com</h1> </div> </div> </body> </html> عناصر قالب الموقع لقد تعلمت للتو أنه يمكنك استخدام الأصناف لتغيير جوانب مختلفة من قالب موقعك، لكن توجد خيارات إضافية يمكنك استخدامها عند تغيير قالب للمكونات الفردية. تملك بعض المكونات إعدادات افتراضية يجب عليك معرفتها. الأزرار تستخدم الأزرار تلقائيًا نماذج الألوان المرتبطة بالحاوية الرئيسية، فإذا وضعت الزر في كتلة حاوية تستخدم النموذج b، فإن الزر المحتوى فيها سيستخدم النموذج b أيضًا. يمكنك تغيير هذا باستخدام الخاصية data-theme على الزر مباشرةً لتغيير النموذج الذي يستخدمه. يُظهر لك هذا المقتطف في سطر واحد كيفية تغيير قالب الزر باستخدام وفق ما ذكرنا آنقًا: <a href="#" data-role="button" data-theme="e"></a> مثال 48: استخدام قالب jQuery في مكونات موقع الزر <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Themeing Components</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Themeing button </h1> </div> <div data-role="content"> <a href="#" data-role="button" data-theme="e">Theme E in button</a> </div> </div> </body> </html> الأشرطة (bars) تتضمن مكونات الأشرطة أقسام رأس وذيل الصفحة، إذ تستخدم النموذج الافتراضي لكن يمكن تغييره لاستخدام أي نموذج آخر تفضله عن طريق إضافة الخاصية data-theme. المقتطف المتكون من سطر واحد التالي يظهر لك استخدام عنصر div لإنشاء قسم الرأس الذي يستخدم الخاصية data-theme لتغيير النموذج المطبق عليه. <div data-role="header" data-theme="e"><h1>Using the e swatch</h1></div> المثال 49: استخدام قالب jQuery في مكونات أشرطة الموقع <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Themeing Components</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="e"> <h1>Using the e swatch</h1> </div> </div> </body> </html> كتل المحتوى يمكن أن يكون تغيير قالب محتوى الكتلة صعب قليلا، فـ jQuery يفترض أنك لا تطبق الخاصية data-theme مباشرةً على قيم المحتوى لصفحتك، وذلك لأن قسم المحتوى قد لا يأخذ كامل المساحة المرئية في الصفحة. عند حدوث هذا، ستُقطع الخلفية فجأة وستبدو الصفحة مكسورة. بدلًا من ذلك، يجب عليك تطبيق النموذج الذي تريد استخدامه عن طريق استخدام الخاصية data على العنصر الذي يحتوي الخاصية data-role="page"‎. يمكن لكتل المحتوى أن تتقبل خاصية قالب أخرى وهي data-content-theme، التي ستطبق على المحتوى الذي بداخل الحاويات القابلة للطي، ويمكن أن تطبق أيضا على العنصر الذي يحتوي الخاصية data-role="page"‎ وستتوارثه عناصره الفرعية. المثال 50: استخدام قالب jQuery في مكون كتل محتوى الموقع <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Themeing Components</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"> <h1>Custom Styles</h1> </div> <div data-role="content"> <div data-role="collapsible" data-collapsed="false" data-content-theme="e"> <h3>Different Swatch</h3> <p> This collapsed content area uses a different style for the collapsed content than the rest of the page. </p> </div> </div> </div> </body> </html> عند استخدام الخاصيتين data-theme و data-content-theme على عنصر، يطغى نموذج الألوان المستخدم في الخاصية data-content-theme عادةً على النموذج المستخدم في الخاصية datatheme وهذا يفسر لماذا ترى فقط النموذج الموجود في data-content-theme عند محاولتك لاستخدام الخاصيتين في حاوية الصفحة. ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 5 لصاحبه Andrew اقرأ أيضًا الدرس التالي: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول الدرس السابق: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي

25 يوليو 2019

jquery mobile الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي

هشام رزق الله أضاف مقال في jQuery

مزيد من المعلومات حول "الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي"

في درسنا الرابع من هذه السلسلة، سنتابع الحديث حول الخاصية data-‎، وربط الصفحات الخارجية، واستخدام نظام الشبكة (grid system)، وبناء محتوى قابل للطي. بالإضافة إلى ذلك، ستتعلم كيف تنشئ تذييل ورأس وشريط تنقل ...إلخ. وكل ذلك مدعوم بأجزاء من شيفرات برمجية عملية. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول الصفحات الخارجية يتعامل jQuery Mobile مع الصفحات الخارجية أيضًا. فإذا ربطت صفحة منفصلة بدلًا من مُعرِّف عنصر data-role="page"‎ داخل المستند الحالي، سيجري jQuery Mobile إجراء جلب غير متزامن (asynchronous fetch) للصفحة المطلوبة ويدمجها في الصفحة الحالية ليسمح لها بتشغيل دوال إدارة الصفحة. لإضافة صفحة خارجية إلى الشيفرة البرمجية السابقة، أنشئ ملفًا باسمexpage.html وضمّن الشيفرة الآتية وغيّر الرابط في شيفرة الصفحة الثالثة والذي هو: <p><a href="#page1" data-role="button">Go back to First Page</a></p> إلى: <p><a href="expage.html" data-role="button">Go to external Page</a></p> مثال 22: ربط صفحة خارجية <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <p>This content will be ignored.</p>  <section id="page4" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <p>External Page!</p> <p><a href="#page1" data-role="button">Go to First Page</a>.</p> </div> <footer data-role="footer"> <h1>footer</h1> </footer> </section>  <h3>This content will be ignored as well.</h3> </body> </html> عند معاينة هذا السكربت، سترى الصورة الأولى؛ ولكن عند الانتقال من الصفحة السابقة للسكربت السابق، ستظهر لك الصورة الثانية. تجاوز جلب الصفحة غير المتزامن ستحتاج في بعض الأحيان إلى تحميل الصفحة بشكل طبيعي بدلًا من جعل jQuery Mobile يجلبه بشكل غير متزامن ويُضمّنه إلى DOM الحالي. يمكنك تجاوز تحميل AJAX بطريقتين: تحديد الخاصية الهدف على الرابط (مثل "‎_blank") أو بتحديد الخاصية rel="external"‎ على الرابط. رصف المحتوى في شبكة الشبكة (grid) هي أداة لتنظيم الكائنات، ويستخدم jQuery Mobile النظام الشبكي لمساعدتك في رصف المحتوى؛ هذا النظام مفيد لأنه يساعدك على إنشاء صفحات متجاوبة مع عدة أجهزة وبذلك لست يأخذ هذا النظام على عاتقه تخمين كيفية عرض الصفحة على الأجهزة ذات الأحجام المختلفة بالشكل الذي خططت له. يسمح لك النظام الشبكي في jQuery Mobile بإنشاء أعمدة متساوية العرض. ولتطبيق نظام الشبكة (grid) على المحتوى، ستحتاج إلى إضافة صنف إلى الحاوية التي تريد استخدام الشبكة (grid) فيها، وصنف ثانوي إلى العناصر داخل الحاوية. أصناف حاوية الشبكة هي: ui-grid-a: تنشئ شبكة من عمودين. ui-grid-b: تنشئ شبكة من 3 أعمدة. ui-grid-c: تنشئ شبكة من 4 أعمدة. ui-grid-d: تنشئ شبكة من 5 أعمدة. أصناف المحتوى هي: ui-block-a: تُستخدم على الكتلة الأولى. ui-block-b: تُستخدم على الكتلة الثانية. ui-block-c: تُستخدم على الكتلة الثالثة. ui-block-d: تُستخدم على الكتلة الرابعة. ui-block-e: تُستخدم على الكتلة الخامسة. عند استخدام شبكة على حاوية ذات عناصر بمحتوى أعرض من دقة الشاشة، سيُنقل المحتوى إلى صف جديد في الشبكة. هذا يساعد بقاء المحتوى منظم وقابل للعرض على مختلف الأجهزة متفاوتة العرض. مثال 23: تنظيم المحتوى عن طريق سطر الشبكة يشرح المثال كيفية ترصيف الأزرار وصناديق المحتوى على الصفحة باستخدام الشبكة. <!DOCTYPE html> <html> <head> <title>Script-Tutorials: Using a grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="page1" data-role="page"> <div data-role="header"> <h1>Using a grid</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 80px;"> This is first in the grid </p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 80px;"> This element is second in a grid </p> </div> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 80px;"> By reusing ui-block-a this wraps to a new row. </p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 80px;"> This is the final element in this grid </p> </div> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <a href="#" data-role="button">Link 1</a> </div> <div class="ui-block-b"> <a href="#" data-role="button">Link 2</a> </div> </div> </div> <div data-role="footer"> <h4>Using a grid to align : jQuery mobile supports</h4> </div> </div> </body> </html> ستعرض الأجهزة الأكبر محتوى منظم في الشبكة، إذ سيتمدد المحتوى للاستفادة من مساحة الشاشة آنذاك. التخطيطات الشبكية كما هو موضح في المثال السابق أعلاه، تخطيط الشبكة يعتمد على بنية div: أنشئ عنصر div لاحتواء الشبكة، ومن ثم أضف الخلية داخلها المتمثلة بعناصر div أيضًا. يُتعامل مع الصفوف المتعددة عن طريق إضافة المزيد من خلايا div والتي يجب أن تُصنَّف ليكون لكل عمود الصنف ui-block الخاص به. يأخذ العنصر div الحاوي صنفًا يبدأ بـ ui-grid: الصنف ui-grid-a لإنشاء شبكة من عمودين، و ui-grid-b لإنشاء شبكة من ثلاثة أعمدة، وهكذا حتى ui-grid-d لشبكة مؤلفة من خمسة أعمدة. تأخذ الخلية المتمثلة بعناصر div صنفًا يبدأ بـ ui-block بناءً على ترتيبها: الصنف ui-block-a للخلية الأولى، والصنف ui-block-b للخلية الثانية، وهكذا حتى الصنف ui-block-e للخلية الخامسة. المثال 24: تخطيط شبكة في موقع مخصص للهاتف باستخدام jQuery mobile <!DOCTYPE html> <html> <head> <title>Script-tutorials: Grid layout with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div class="content" data-role="content"> <h4>2 Colums</h4> <div class="ui-grid-b"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> </div> <h4>3 Columns</h4> <div class="ui-grid-b"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> <div class="ui-block-c"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION C</p> </div> </div> <h4>4 Columns</h4> <div class="ui-grid-c"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> <div class="ui-block-c"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION C</p> </div> <div class="ui-block-d"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION D</p> </div> </div> <h4>5 Columns</h4> <div class="ui-grid-d"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> <div class="ui-block-c"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION C</p> </div> <div class="ui-block-d"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION D</p> </div> <div class="ui-block-e"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION E</p> </div> </div> <h4>2 Rows of 3 Columns</h4> <div class="ui-grid-d"> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> <div class="ui-block-c"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION C</p> </div> <div class="ui-block-a"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION A</p> </div> <div class="ui-block-b"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION B</p> </div> <div class="ui-block-c"> <p class="ui-bar ui-bar-b" style="height: 40px;">DIVISION C</p> </div> </div> </div> <footer data-role="footer"> <h1>Alignment Grid-layou</h1> </footer> </section> </body> </html> بناء محتوى قابل للطي يمكن أن يكون المحتوى القابل للطي مخفيًا أو ظاهرًا مع وجود زر أو إمكانية لمسه لتغيير حالته (طيِّه إن كان مفتوحًا أو فتحه إن كان مطويًّا). ربما قد رأيت هذا النوع من السلوك على مواقع ويب أخرى سابقًا، خصوصًا في أقسام الأسئلة الشائعة. يكون عنوان الأسئلة والأجوبة غالبًا في مثل تلك المواقع ظاهرًا مع وجود زر مثل + أو - بجانبه للإِشارة إلى أنه يمكنك إظهار المحتوى وإخفاؤه. نفس هذه الوظيفة موجودة في jQuery Mobile. لإنشاء محتوى قابل للطي، إذ ستحتاج إلى إضافة الخاصية data-role="collapsible"‎ إلى العنصر الحاوي للعنصر الذي تريد جعله قابلًا للطي. المثال 25: بناء محتوى قابل للطي <!DOCTYPE html> <html> <head> <title>Script-tutorials: Collapsible Content</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="page1" data-role="page"> <div data-role="header"> <h1>Collapsible Content</h1> </div> <div data-role="content"> <div data-role="collapsible"> <h3>I'm a single collapsible element</h3> <p>I'm the content inside of the single collapsible element.</p> </div> <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>I'm expanded on page load</h3> <p>I am collapsible content that is visible on page load.</p> <p>That's because of the data-collapsed="false" attribute</p> </div> <div data-role="collapsible"> <h3>Expand me I have something to say</h3> <p>I am closed on page load, but still part of an accordion.</p> <div data-role="collapsible"> <h3>Wait, are you nested?</h3> <p>Yes! You can even nest your collapsible content!</p> </div> </div> </div> </div> <div data-role="footer"> <h4>Collapsible Content</h4> </div> </div> </body> </html> إضافة شريط أدوات في ترويسة الصفحة مثال 26: إعداد الترويسة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Header toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>I am a header toolbar</h1> </div> </div> </body> </html> مثال 27: إضافة زر إلى ترويسة الصفحة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Header toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline">  <a href="#">Purchase</a> <h1>I am a header toolbar</h1>  <a href="#">Apply</a> </div> </div> </body> </html> لاحظ أنه لا يتوجب علينا تطبيق الخاصية data-role لتنسيق الرابط مثل حالة الأزرار. سيكون تنسيق الرابط مثل الزر تلقائيًا عند وضعه داخل شريط أدوات الترويسة (header toolbar). افتراضيًا، يُعرَض الرابط الأول في شريط أدوات الترويسة على الجانب الأيسر من الشريط. إرفاق شريط أدوات للتنقل شريط أدوات التنقل (navigation toolbar أو navbar)، هي ودجة (widget) موجودة في jQuery Mobile، تسمح لك بإضافة أزرار تنقل إلى صفحتك. مثال 28: صفحة مع شريط تنقل داخل شريط أدوات ترويسة الصفحة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Header toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline">  <a href="#">Purchase</a> <h1>I am a header toolbar</h1>  <a href="#">Apply</a> <div data-role="navbar"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Blogs</a> </li> </ul> </div> </div> </div> </body> </html> تُنشَأ حاوية شريط التنقل كعنصر div مع الخاصية data-role="navbar"‎. لاحظ كيف أنَّ شريط التنقل مرتبط بشريط أدوات ترويسة الصفحة من خلال إنشائه داخله. سيحتوي العنصر ul على جميع الروابط التي نريد وضعها داخل شريط التنقل والتي تكون ضمن عناصر li. إضافة شريط أدوات الذيل تمامًا مثل شريط أدوات الترويسة، يمكنك إضافة شريط أدوات الذيل عن طريق إضافة الخاصية data-role="footer"‎ إلى حاوية العنصر. إليك جزء من شيفرة برمجية لإعداد شريط أدوات الصفحة: <div data-role="footer"> <h4>I am a footer toolbar</h4> </div> يجب أن يكون هذا الجزء مألوفًا لك إذ يشبه شريط أدوات الترويسة الذي تحدثنا عنه قبل قليل. لنقم بشيء جديد ونغيّر في شريط الأدوات الذيل عن طريق حذف العنصر h4 واستبداله ببعض الأزرار. مثال 29: إضافة وتنظيم الأزرار باستخدام مجموعة التحكم في ذيل الصفحة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Header toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline">  <a href="#">Purchase</a> <h1>I am a header toolbar</h1>  <a href="#">Apply</a> <div data-role="navbar"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Blogs</a> </li> </ul> </div> </div>  <div data-role="content"> <h3>CONTENT GOES HERE SHORTLY</h3> </div>  <div data-role="footer" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Features</a> <a href="#" data-role="button">Inquiry</a> <a href="#" data-role="button">Supports</a> </div> </div> </div> </body> </html> مثال 30: رصف الأزرار في شريط الأدوات في ذيل الصفحة يمكن استخدام خيارين لرصف الأزرار في شريط الأدوات في ذيل الصفحة: رصف المحتوى باستخدام الشبكة (grid): <div data-role="footer" class="ui-bar"> <div class="ui-grid-b"> <div class="ui-block-a"><a href="#" data-role="button">Features</a> </div> <div class="ui-block-b"><a href="#" data-role="button">Inquiry</a> </div> <div class="ui-block-c"><a href="#" data-role="button">Supports</a> </div> </div> </div> رصف المحتوى باستخدام مجموعة التحكم: <div data-role="footer" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Features</a> <a href="#" data-role="button">Inquiry</a> <a href="#" data-role="button">Supports</a> </div> </div> مثال 31: استخدام شريط التنقل في شريط أدوات ذيل الصفحة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Header toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline">  <a href="#">Purchase</a> <h1>I am a header toolbar</h1>  <a href="#">Apply</a> <div data-role="navbar"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Blogs</a> </li> </ul> </div> </div>  <div data-role="content"> <h3>CONTENT GOES HERE SHORTLY</h3> </div>  <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#">Features</a> </li> <li><a href="#">Inquiry</a> </li> <li><a href="#">Supports</a> </li> </ul> </div> </div> </div> </body> </html> شريط التنقل (navbar) هي ودجة موجودة في jQuery Mobile تسمح لك بإضافة روابط تنقل في صفحتك، وعلى غرار نظام الشبكة المدمج، فإن شريط التنقل قادر على احتواء خمسة أعمدة. ولإضافة شريط التنقل إلى صفحتك، يجب عليك استخدام عنصر الحاوية مع الخاصية data-role="navbar"‎. يجب أن يكون لديك داخل الحاوية قائمة غير مرتبة ul مع كل عمود داخل عنصر li. تموضع أشرطة الأدوات تُوضع أشرطة الأدوات في العادة قبل وبعد قسم المحتوى، وهذا معيارٌ في تطوير الويب. في بعض الأحيان، قد تريد إبقاء رأس وذيل الصفحة مرئيًّا دائمًا، خاصة عند استخدام شريط التنقل (navbar)، وتوجد طريقتين لفعل هذا. يمكنك إما استخدام تموضع شريط الأدوات الثابت أو تملئ به الشاشة. التموضع الثابت عند استخدام موضع ثابت، سيتحقق jQuery Mobile من الصفحة لمعرفة هل شريط الأدوات ظاهر في العرض أم لا، فإذا كان شريط الأدوات خارج العرض، فسيُدرج في أعلى الصفحة أو أسفلها (بالاعتماد على ما إذا كان شريط الأدوات في رأس أو ذيل الصفحة) ليكون ظاهرًا للمستخدم. لجعل شريط الأدوات يستخدم الموضع الثابت، تحتاج إلى إضافة الخاصية data-position="fixed"‎ إلى شريط الأدوات. مثال 31: شريط الأدوات الثابت شكل صفحة HTML قبل التمرير إلى الأسفل: شكل صفحة HTML بعد التمرير إلى الأسفل: شيفرة HTML هي: <!DOCTYPE html> <html> <head> <title>Script-tutorials: Toolbars with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <a href="#">Buy Me</a> <h1>Fixed example</h1><a href="#">Apply Now</a> </div> <div data-role="content"> <a href="#" data-role="button">A button!</a> <p style="height: 400px;">This has been styled to take up more space</p> <p>This way you can see what happens when you scroll down the page</p> <p>The toolbars will reappear when you stop scrolling</p> <p>You can hide them by clicking or tapping the screen</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </div> </body> </html> وضع ملئ الشاشة يرتبط وضع ملئ الشاشة كثيرًا بالوضع الثابت، والفرق الرئيسي هو وضع الشريط فوق الصفحة بدلًا من أن يكونوا جزءًا منها. يمكن أن ينشئ هذا بعض مشاكل التنقل كالروابط التي قد تكون متاحة في أسفل أو أعلى الصفحة من الأشرطة التي هي الآن تحتهم مباشرة. من الجيد استخدام وضع ملئ الشاشة عند عرض معرض صور أو مقاطع فيديو. في هذه الأمثلة، يمكن وضع عناصر التحكم في شريط التنقل، مما يُتيح للمستخدم فتح وإغلاق عناصر التحكم عند الحاجة. ستحتاج إلى إضافة الخاصية data-fullscreen="true"‎ إلى عنصر div الذي يملك أيضا الخاصية data-role="page"‎ لاستخدام وضع ملئ الشاشة. ويجب عليك التأكد من أن كل من أشرطة أدوات ترويسة وذيل الصفحة تحتوي على data-position="fixed"‎. يجب علينا تغيير هذا السطر من التعليمات البرمجية السابقة <div data-role="page"‎> إلى هذا السطر <div data-role="page" data-fullscreen="true"‎> مثال 32: شريط أدوات في وضع ملئ الشاشة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Toolbars with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" data-fullscreen="true"> <div data-role="header" data-position="fixed"> <a href="#">Buy Me</a> <h1>Full Screen </h1><a href="#">Apply Now</a> </div> <div data-role="content"> <a href="#" data-role="button">A button!</a> <p style="height: 400px;">This has been styled to take up more space</p> <p>This way you can see what happens when you scroll down the page</p> <p>The toolbars will reappear when you stop scrolling</p> <p>You can hide them by clicking or tapping the screen</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#">Features</a> </li> <li><a href="#">Supports</a> </li> <li><a href="#">Contacts</a> </li> </ul> </div> </div> </div> </body> </html> تذكر أنَّه يمكن الوصول إلى العناصر التي تغطيها أشرطة الأدوات عند استخدام وضع ملئ الشاشة عن طريق الضغط أو لمس في مكان ما على الشاشة لإخفاء الشريط. إضافة تنقل مستمر ليكن لدينا عنصر div مع الخاصيات data-role="footer"‎، و data-position="fixed"‎ و data-id="rps"‎، أول خاصيتين مطلوبتين لإنشاء شريط أدوات الذيل واستخدام التموضع الثابت، وأما بالنسبة للخاصية data-id=”rps”‎ فهي ستُبقِي شريط التنقل ظاهرًا أثناء التنقل بين الصفحات. ويعمل هذا فقط عندما تكون القيمة داخل الخاصية data-id هي نفسها في الصفحة الحالية التي ستنتقل إليها. مثال 31: إضافة تنقل مستمر معاينة الصفحة features.html: الانتقال إلى الصفحة supports.html: الانتقال إلى الصفحة contacts.html: المدخلات والأزرار تُنشئ العديد من أنواع عناصر الإدخال في HTML أزرارًا. في أي وقت تستخدم فيه عنصر إدخال مع الخاصية type مضبوطةً إلى إحدى القيم: submit، أو reset، و button، أو image، سيتحول عنصر الإدخال تلقائيًا إلى زر. بما أن أنواع المدخلات هذه تتحول تلقائيًا إلى أزرار، لا تحتاج إلى إضافة الخاصية data-role="button"‎ كما فعلت عند استخدام زر ذي رابط؛ فقط في حالة كنت تتساءل، يتحول عنصر الزر أيضًا تلقائيًا إلى نمط زر ولا يتطلب أي شيفرة إضافية. مثال 32: المدخلات والأزرار (عناصر النموذج) <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons / Inputs</h1> </div> <div data-role="content"> <p>Link-based button</p> <a href="#" data-role="button">Link-based</a> <p><button> Element</p> <button type="button">Button</button> <p><input type="submit"></p> <input type="submit" value="Submit" /> <p><input type="button"></p> <input type="button" value="Button" /> <p><input type="reset"></p> <input type="reset" value="Reset" /> <p><input type="image"></p> <input type="image" value="Image" /> </div> </div> </body> </html> تجاوز التنسيق الافتراضي للزر بشكل افتراضي، تملك الأزرار مظهرًا معينًا افتراضيًّا. لمَّا كان الزر يظهر بشكل جيد في أغلب الهواتف والأجهزة المحمولة، فإنه قد يظهر بمظهر غير جميل عندما يقترن بتصميمك. لحسن حظنا، يمكننا تحسين جمالية الزر يدويًّا. المثال 33: إنشاء أزرار مع زوايا مدورة ومربعة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-corners="false">Squared</a> <a href="#" data-role="button">Rounded</a> <a href="#" data-role="button" data-corners="false">Squared</a> </div> </div> </body> </html> إزالة الظل من الأزرار هنالك خيار آخر قد ترغب في تغييره وهو مظهر الظل أسفل الزر. يمكن تغيير هذا باستخدام الخاصية data-shadow="false"‎. لا تقتصر على استخدام خاصية data واحدة فقط لكل عنصر، بل يمكنك الجمع بينها للحصول على تنسيقات مختلفة. المثال34: تغيير مظهر الزر مع الخاصية data <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-shadow="false">No Shadow</a> <a href="#" data-role="button">Shadow</a> <a href="#" data-role="button" data-corners="false" data-shadow="false">Squared no Shadow</a> </div> </div> </body> </html> تغيير حجم الزر عندما أنشأنا سابقًا الزر، لم نقلق بشأن حجمه، في حين قد لا تحتاج إلى تغيير الحجم الافتراضي للزر، لكن قد تواجه بعض المشاكل أو بعض النتائج غير المتوقعة مع الحجم الافتراضي. مثال 35: تغيير عرض الزر الافتراضي مع الخاصية data <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button">Full Width Button</a> <a href="#" data-role="button" data-inline="true">Inline Button</a> </div> </div> </body> </html> أضفنا الخاصية data-inline="true"‎ إلى العنصر، وذلك يجعل الزر يستخدم مساحة تعادل المحتوى الذي بداخله فقط. المثال 36: وضع الزر في سطر <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-inline="true">An Inline Button</a> <a href="#" data-role="button" data-inline="true">Also an Inline Button</a> </div> </div> </body> </html> كلا الزرّين يملكان الخاصية data-inline="true"‎ وهذا يعني أن كلا الزرّين سيظهران بجانب بعضهما البعض، وإضافة المزيد من الأزرار مع استخدام نفس الخاصية سيستمر بوضعهم بجانب بعضهم البعض إلى أن يصل إلى الحد الأقصى لعرض الصفحة. ضبط عرض الزر وموقعه باستخدام الشبكة مثال 37: ضبط عرض الزر وموقعه باستخدام الشبكة <!DOCTYPE html> <html> <head> <title>Script-tutorials: Buttons jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><a href="#" data-role="button">Left</a> </div> <div class="ui-block-b"><a href="#" data-role="button">Right</a> </div> </div> </div> </div> </body> </html> في هذا المثال، يمكننا رؤية شبكة بسيطة مكونة من عمودين. الصنف ui-block-a ينظم المحتوى في العمود الأول من الشبكة في حين يرصف الصنف ui-block-b المحتوى في العمود الثاني. ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 4 لصاحبه Andrew اقرأ أيضًا الدرس التالي: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السابق: اتجاه الصفحة وأحداثها

jquery mobile الدرس الثالث: اتجاه الصفحة وأحداثها

هشام رزق الله أضاف مقال في jQuery

مزيد من المعلومات حول "الدرس الثالث: اتجاه الصفحة وأحداثها"

يتحدث هذا الدرس الجديد عن اتجاه صفحة الهاتف، وأحداث الصفحة (مثل pagebeforecreate، و pagecreate، و pageinit ...إلخ)، واللمس وأحداث التمرير (مثل swipe) وأحداث الفأرة الافتراضية. ستجد العديد من الأمثلة تشرح لك هذه الأحداث. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول التكيف مع حدث الاتجاه هنالك خيارين/وضعين لاتجاه الشاشة عند عرض جهاز الهاتف، فعند عرض الصفحة عموديًا (portrait)، هذا يعني أن ارتفاع الشاشة أكبر من عرضها، وعند عرض الصفحة أفُقيًّا (landscape)، سيكون عرض الصفحة أكبر من طولها. ما لم يُقفل الجهاز على وضع عرض واحد، يمكن أن تستدير الشاشة وسيتحول المحتوى تلقائيا للاستفادة من المساحة الإضافية، بينما يعالج jQuery Mobile تغيير حجم العديد من العناصر، قد تحتاج إلى تشغيل دالة معينة كلما تغيّر وضع الشاشة. المثال 7: استخدام الحدث orientationchange، حدث تغيير الاتجاه <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(){ if(window.orientation == 0) { $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"}); } else { $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"}); } }); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The orientationchange Event</h1> </div> <div data-role="main" class="ui-content"> <p>Try to rotate your device!</p> <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <title>Script-tutorials: Page orientaton Event</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).on('pageinit', function() { $(window).on('orientationchange', function(e) { $("#mode").html('orientation is currently '+e.orientation); }); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="mode"> <div data-role="header"><h1>Page orientaton Event</h1></div> <div data-role="main" class="ui-content"> <p>Content in orientation</p> <a href="pageexist.html" data-role="button">External Page Exist</a> <a href="page_notexist.html" data-role="button">No Page Exist</a> <p>Try to rotate your device!</p> <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> </div> <div data-role="footer"> <h1>Script-tutorials.com</h1> </div> </div> </body> </html> تهيئة الصفحة في jQuery mobile المثال 8: تهيئة الصفحة في jQuery mobile شيفرة الصفحة قبل تهيئة jQuery Mobile:  <section id="page1" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div data-role="content"> <p>First page!</p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section>  <section class="ui-page ui-body-c ui-page-active" data-url="page1" id="page1" data-role="page"> <header role="banner" class="ui-bar-a ui-header" data-role="header"> <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">jQuery Mobile</h1> </header> <div role="main" data-role="content" class="ui-content"> <p>First page!</p> </div> <footer role="contentinfo" class="ui-bar-a ui-footer" data-role="footer"> <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">Footer</h1> </footer> </section>  <section id="page1" data-role="page"> <header data-role="header"> <h1>Nice Tweet</h1> </header> <div data-role="content" class="content"> <p>Twitter feed goes here.</p> <p><a href="#page2" data-role="button">Settings</a></p> <p><img src="images/twitter-logo-hashtag.jpg" alt="Twitter settings" /></p> <p>Powered by jQuery Mobile</p> </div> <footer data-role="footer"> <h2>Because the world needed another Twitter app.</h2> </footer> </section>   <section id="page2" data-role="page"> <header data-role="header"> <h1> Nice Tweet: Settings</h1> </header> <div data-role="content" class="content"> <p>Settings go here. <a href="#page1" data-role="button">Go back</a></p> <p><img src="images/business-twitter-page-img.png" alt="Settings" /></p> <p style="text-align:center;">Powered by jQuery Mobile</p> </div> <footer data-role="footer"> <h2>Because the world needed another Twitter app.</h2> </footer> </section>  </body> </html> <script> $(document).ready(function() { // Refresh the feed on first load // (pretend we've written this function elsewhere) refreshFeed(); $("#page1").bind("pageshow", function(event, ui) { // Refresh the feed on subsequent page shows refreshFeed(); }) }) </script> أحداث اللمس عند تفاعل المستخدم مع موقعك عن طريق اللمس، ستعمل أحداث اللمس، ويمكنك الاستفادة من هذه الأحداث لعمل دوال مخصصة. استخدام أحداث tap الفرق الرئيسي بين حدث النقر click وحدث بدء اللمس touchstart هو حوالي 300 ملي ثانية. في حين أن هذا لا يبدو فارقًا كبيرًا في الوقت، لكن تأخير ثلث ثانية قد يجعل موقعك أو تطبيقك يبدو بطيئًا وغير متجاوب. بينما يُستخدم الحدث tap بشكل افتراضي على الروابط، والقوائم، وودجات وإضافات jQuery Mobile المتشابهة، يمكنك استخدام الحدث tap لتنفيذ دوال مخصصة في مختلف عناصر صفحتك. مثال 11: استخدام الحدثين tap و taphold <!DOCTYPE html> <html> <head> <title>Developing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).on("pageinit", function(){ $("#home").on('tap', '#image', function(event, ui) { var tapCaption = $(this).data("tap"); $("#caption").addClass("comment").html(tapCaption); }); $("#home").on('taphold','#caption', function(event, ui) { var $this = $(this); var tapholdCaption = $this.data("appTaphold"); $this.html(tapholdCaption); }); }); </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style type="text/css"> img {max-width: 100%} .comment {background: #FFF;border-radius: 5px; border: 2px solid #000;padding: 5px} </style> </head> <body> <div data-role="page" id="home"> <div data-role="header"><h1>Tap Events</h1></div> <div data-role="content"> <p>Tap or tap-and-hold the image below.</p> <img id="image" src="images/golden_gate.jpg" alt="An image of a river" data-tap="You tapped the picture, try tap-and-holding on this caption" /> <div id="caption" data-app-taphold="This picture was taken during a flood.">Caption</div> </div> </div> </body> </html> يجب ربط الحدثين tap و taphold إما في الدالة document.ready()‎ أو داخل الحدث pageinit. بما أننا نعلم بالفعل أنه من غير المستحسن استخدام الدالة document.ready()‎ مع jQuery Mobile، لذلك سنربط الحدث pageinit باستخدام الدالة ‎.on()‎. داخل الدالة، يمكنك رؤية الدالة ‎.on()‎ تربط الحدث tap إلى عنصر يملك الخاصية id="image"‎. استخدام أحداث التمرير من الشائع التمرير في الهاتف عند التنقل في معرض صور، وحذف بريد إلكتروني، وإحضار معلومات الاتصال …إلخ. يمكنك مع jQuery Mobile استخدام ثلاثة أحداث متعلقة بالتمرير هي: swipe، و swipeleft، و swiperight. تشبه عملية التمرير (swipe) في الهاتف المحمول عملية النقر والسحب (click-and-drag ) في الحاسوب. ليعمل أي حدث من أحداث التمرير، يجب أن يتحرك اللمس على أكثر من 30 بيكسل أفقيًا ويبقى 1 ثانية ليكتمل، كما أنه لا يجب أن يتحرك أكثر من 20 بيكسل عموديًا وإلا سيُلغى تشغيل الحدث. مثال 12: استخدام أحداث التمرير ستُعرض الصورة في الأسفل عند تمرير المربع إلى اليمين كما يظهر على متصفح هاتفك في جهازك المحمول. <!DOCTYPE html> <html> <head> <title>Developing with jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).on('pageinit', function() { $("#home").on('swipe','#swipe', function(event, ui) { $("#caption").html("Swipe detected!"); }); $("#home").on('swipeleft','#swipe-box', function(event, ui) { ("#caption").html("Swipe to the left detected!"); }); $("#home").on('swiperight','#swipe-box', function(event, ui) { $("#caption").html("Swipe to the right detected!"); }); }); </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style type="text/css"> #swipe-box { width: 200px; height: 200px; background: #FFF; border: 2px solid #000 } .comment { background: #FFF; border-radius: 5px; border: 2px solid #000; padding: 5px } </style> </head> <body> <div data-role="page" id="home"> <div data-role="header"><h1>Swipe Events</h1></div> <div data-role="content"> <p id="swipe">Take a swipe this text or at the box below.</p> <div id="swipe-box"></div> <br /> <div id="caption" class="comment">Waiting for swipe...</div> </div> </div> </body> </html> أحداث الفأرة الافتراضية أحداث الفأرة الافتراضية هي حل لمشاكل التوافق بين متصفحات الهاتف والحاسوب، فعلى سبيل المثال، تدعم بعض المتصفحات حدثًا يسمى touchstart في حين بعض المتصفحات الأخرى لا تدعمه. تدعم متصفحات الحاسوب الحدث mousemove وتدعم الحومان (hover) عبر استخدام الحدث mouseover في حين تواجه أجهزة الهاتف صعوبةً في محاكاة أو استخدام الحدث الصحيح. هذه المشاكل حلتها jQuery Mobile عن طريق استخدام أحداث الفأرة الافتراضية، فعند تحميل صفحة مع jQuery Mobile، سيتأكد المتصفح من دعم الحدث. وستُدعم الأحداث آنذاك بناءً على أحداث الفأرة الافتراضية، بينما يحدث هذا في الخلفية، يمكنك ربط أحداث الفأرة الافتراضية لتشغيل دوال محدد أو حتى الحصول على بيانات يمكن استخدامها في دوال أخرى. أحداث الفأرة الافتراضية المتاحة هي: vmouseover vmousedown vmousemove vmouseup vclick vmousecancel ستجد في الأسفل جزءًا من شيفرة برمجية موجودة في الوسم <head> لاستخدام الأحداث vmousedown و vmousemove و vmouseover. المثال 13: مقتطف شيفرة برمجية لأحداث vmousedown، و vmousemove و vmouseover <script> $(function(){ $(document).on("vmousedown", "p", function() { $(this).append('<span style="color:#108040;">vmousedown...</span>'); }); }); </script> المثال 14: الحدث vmousedown في jQuery mobile بمجرد النقر على التسمية التوضيحية داخل المتصفح، سيُطلَق الحدث vmousedown. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Script-tutorials: vmousedown</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script> $( function(){ $(document).on("vmousedown", "p", function() { $(this).append('<span style="color:#108040;"> vmousedown...</span>'); }); }); </script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Vmousedown event example</h1></div> <div data-role="content"> <p>Touch here to see what happens.</p> </div> </div> </body> </html> المثال 15: الحدث vmouseup في jQuery mobile <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Script-tutorials: vmouseup</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(function() { $(document).on("vmouseup", "p", function() { $(this).append('<span style="color:#108040;"> vmouseup when you click i will not until you releases the click button up...</span>'); }); }); </script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>VmouseUp event example</h1> </div> <div data-role="content"> <p>Touch here to see what happens.</p> </div> </div> </body> </html> المثال 16: الحدث vmouseup في jQuery mobile <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Script-tutorials: vmouseover</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(function() { $(document).on("vmouseover", "p", function() { $(this).append('<span style="color:#108040;"> vmouseover I will not appear unless you move the pointer over that touche and see...</span>'); }); }); </script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>VmouseOver event example</h1> </div> <div data-role="content"> <p>Touch here to see what happens.</p> </div> </div> </body> </html> بناء موقعك الأول المخصص للهواتف باستخدام jQuery mobile الترويسة (Header) هذا القسم هو أول شيء يراه المستخدم، وقد يكون أبرز خاصية لموقع الهاتف، ويُعلم هذا المستخدمين بمكانهم، وقد يتضمن شريط بحث، وزر دعوة إلى إجراء (call-to-action)، و/أو شعار. قسم المحتوى (Content) يحتوي هذا القسم على ما يبدو عليه: أزرار، ونصوص وكل شيء آخر لم يتضمن في الأقسام الأخرى. يضم هذا القسم جوهر موقعك ويعرض كل ما تريد أن يراه المستخدم أو يقضي فيه وقته. تذييل الصفحة (Footer) غالبا ما يُتجاهل هذا القسم لكنه منطقة مهمة من موقعك، فيمكن أن يحتوي على كل شيء بدءًا من الروابط الإضافية إلى سطر بسيط لملكية الموقع. عند تطوير مواقع الويب للهواتف، يُحذَف في العادة هذا القسم ويُستبدل بشريط تنقل أو عنصر ثابت آخر. مثال 16: تخطيط أساسي للهواتف <!DOCTYPE html> <html> <head> <title>Script-tutorials: My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> Welcome message. </div> </div> </body> </html> مثال 17: إضافة ترويسة وتذييل إلى موقعك المخصص للهواتف <!DOCTYPE html> <html> <head> <title>Script-tutorials: My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> My First Mobile Site </div> <div data-role="content"> Welcome to my first mobile site. </div> <div data-role="footer"> Tutors footer! </div> </div> </body> </html> المثال 18: تنسيق المحتوى النصي في الموقع عبر تضمين وسوم التنسيق <!DOCTYPE html> <html> <head> <title>Script-tutorials: My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My First Mobile Site</h1> </div> <div data-role="content"> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any <strong>valid HTML</strong> on this page</p> <p style="text-align:center;">Powered by jQuery Mobile</p> </div> <div data-role="footer"> <h3>Tutors footer!</h3> </div> </div> </body> </html> المثال 19: إضافة صور ذات حجم متغير (متجاوبة) إلى الموقع <!DOCTYPE html> <html> <head> <title>My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> img { max-width: 100%; } </style> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My First Mobile Site</h1> </div> <div data-role="content"> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p> <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" /> <p style="text-align:center;">Powered by jQuery Mobile</p> </div> <div data-role="footer"> <h3>Tutor footer!</h3> </div> </div> </body> </html> المثال 20:الربط مع صفحة ثانية عبر الحدث vmouseup <!DOCTYPE html> <html> <head> <title>Script-Tutorials: My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> img { max-width: 100%; } </style> </head> <body> <div id="pageone" data-role="page"> <div data-role="header"> <h1>My First Mobile Site</h1> </div> <div data-role="content"> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any <strong>valid HTML</strong> on this page</p> <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" /> <a href="#pagetwo" data-role="button">Go to Page 2</a> <p style="text-align:center;">Powered by jQuery Mobile</p> </div> <div data-role="footer"> <h3>Tutor footer!</h3> </div> </div> <div id="pagetwo" data-role="page"> <div data-role="header"> <h1>My First Mobile Site</h1> </div> <div data-role="content"> <p>You've made it to page 2!</p> <p>Isn't that awesome?</p> <a href="#pageone" data-role="button">Go Back to Page 1</a> <p style="text-align:center;">Powered by jQuery Mobile</p> </div> <div data-role="footer"> <h3>Viva la footer!</h3> </div> </div> </body> </html> مثال 21: ثلاثة صفحات داخلية في ملف HTML واحد <!DOCTYPE html> <html> <head> <title>Script-Tutorials: My first mobile site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style> img { max-width: 100%; } </style> </head> <body>  <section id="page1" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div data-role="content" class="content"> <p>First page!</p> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p> <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" /> <p style="text-align:center;">Powered by jQuery Mobile</p> <p><a href="#page2" data-role="button">Go to Second Page</a> </p> </div> <footer data-role="footer"> <h1>Footer</h1> </footer> </section>   <section id="page2" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div data-role="content" class="content"> <p>Second page!</p> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p> <img src="images/cable_car2.jpg" alt="Cable Car" /> <p style="text-align:center;">Powered by jQuery Mobile</p> <p><a href="#page3" data-role="button">Go to Third Page</a> </p> </div> <footer data-role="footer"> <h1>Footer</h1> </footer> </section>   <section id="page3" data-role="page"> <header data-role="header"> <h1>jQuery Mobile</h1> </header> <div data-role="content" class="content"> <p>Third page!</p> <p>Welcome to my first mobile site.</p> <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p> <img src="images/alcatraz.jpg" alt="alcatraz" /> <p style="text-align:center;">Powered by jQuery Mobile</p> <p><a href="#page1" data-role="button">Go back to First Page</a> </p> </div> <footer data-role="footer"> <h1>Footer</h1> </footer> </section>  </body> </html> ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 3 لصاحبه Andrew اقرأ أيضًا الدرس التالي: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس السابق: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل

9 يوليو 2019

jquery mobile الدرس الأول: البداية، بناء وتقديم محتوى

هشام رزق الله أضاف مقال في jQuery

مزيد من المعلومات حول "الدرس الأول: البداية، بناء وتقديم محتوى"

في هذه السلسلة من الدروس، سنتحدث عن مكتبة jQuery Mobile ونتعرف عليها عن كثب والتي تساعدك على إنشاء مواقع ويب متجاوبة ومتوافقة مع الهواتف. تتضمن هذه السلسلة أكثر من 65 مثال تطبيقي عملي مع شيفراتها الكاملة. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول بدايتك مع jQuery Mobile ما هو jQuery Mobile المحمول يوفرjQuery Mobile مجموعة وفيرة من أدوات التطوير التي تجعل موقع ويب الموجه للهواتف متجاوبًا ومرنًا وبسيطًا. يُعرّف jQuery ببساطة على أنه مجموعة من إضافات وودجات (widgets) jQuery تهدف إلى توفير API متعدد المنصات لإنشاء تطبيقات ويب للهواتف. من حيث الشيفرات البرمجية، jQuery Mobile يشبه jQuery UI، لكن في حين أن jQuery UI موجه لتطبيقات سطح المكتب، فإن jQuery Mobile موجه للهواتف المحمولة. ما يجب معرفته حول إنشاء مواقع ويب للهواتف يجب عليك معرفة ثلاثة كلمات رئيسية عند تطوير مواقع ويب للهواتف، وهي أنه يجب أن يكون الموقع الموجه للهواتف: متجاوبًا: يتضمن كيف يبدو شكل الصفحة عند التنقل، وكيف يُضْغط على الزر وكيف تُحمّل البيانات على الهاتف. مرنًا: يعني أنه يمكن تخصيص الموقع عن طريق المستخدم ليناسب رغباته. بسيطًا: يعني أن الموقع يسهل تصفحه عن طريق الهاتف. ما يجب معرفته حول jQuery Mobile للمطورين أثّرت jQuery بشكل كبير على العالم الناشئ من تطوير وتصميم الويب، فلقد غيّرت من طريق تنفيذ واستخدام جافا سكربت على مواقع وتطبيقات الويب ولذلك اختارتها مايكروسوفت كإطار جافا سكربت المفضل، وضمّنت دعم الإكمال التلقائي (auto-completion) لـ jQuery داخل visual studio، وبالتالي فإن jQuery mobile هي امتداد مدعوم وموثوق لمكتبة jQuery. لماذا jQuery Mobile؟ (تحتاج إلى معرفة jQuery Mobile كمطور) كما أشرت في "ما يجب معرفته حول jQuery Mobile للمطورين”، أدى ظهور جيل أجهزة الهواتف إلى الحاجة إلى تطبيقات ويب متجاوبة ومرنة وبسيطة وبالتالي ارتفعت بسرعة الحاجة والطلب على jQuery mobile (إطار عمل jQuery)، وحان الآن الوقت بالنسبة لك كمعلم أو مبتدئ في API مواقع الهواتف الجوالة للقفز والمشاركة مع هذا المشروع. الجهاز الذي يُشغل jQuery Mobile يعتمد عمل jQuery في مختلف الأجهزة على المتصفح ونظام التشغيل. فالمتصفحات التي تدعم jQuery Mobile هي المتصفحات الحديثة التي تدعم وسوم HTML5 والقليل من CSS3. فالأجهزة التي تدعم jQuery mobile هي الحواسيب المكتبية والمحمولة، أنظمة الكل في واحد (all-in-one)، الأجهزة اللوحيّة، الهواتف الذكية، أندرويد، iOS، بلاك بيري (النسخ الحديثة)، webOS، ويندوز للهواتف، وأجهزة القراءة الإلكترونية، فيدعم jQuery mobile أجهزة كيندل kindle التي تتضمن متصفح مبني على Webkit تجريبي. ما يحتاجه المطور المحترف لإنشاء مواقع ويب للهواتف باستخدام jQuery Mobile لتطوير التطبيقات، ستستخدم: بالنسبة لنظام ويندوز التطبيقات: Komodo IDE، eclipse، iWeb، Microsoft FrontPage، Aptana studio، Dreamweaver، notepad++. وسنستخدم Dreamweaver في هذا الدرس. بالنسبة لنظام OsX التطبيقات: Coda، espresso، textwrangler، kod. لغات البرمجية التي يجب على مطور الويب معرفتها هي HTML5 و CSS3 وجافا سكربت. يتكون jQuery Mobile من أربعة ملفات: ملف جافا سكربت، ملف CSS، وملفي PNG. يُحمَّل ملف جافا سكربت بشكل مقصود بعد تحميل مكتبة jQuery الأساسية، ويقوم هذا الملف بمهام كثيرة مثل إنشاء الويدجات وتطبيق مستمعي الحدث (event listeners) وتفعيل API. ورقة أنماط CSS تحدد مخطط ومظهر عناصر صفحة jQuery Mobile، بالإضافة إلى تحديد الانتقالات (transitions) والرسوم المتحركة مع تحويلات CSS3. يمكنك تحميل كامل حزمة jQuery Mobile (مكتبة جافا سكربت، CSSـ والرسومات) أو يمكنك الوصول إليها عن طريق مشروع CDN، راجع صفحة تحميل مشروع jQuery Mobile للتفاصيل، سنستخدم CDN في أمثلتنا لهذا الدرس. DOCTYPE لبناء محتوى HTML لموقع الهاتف DOCTYPE انتقالي لـ HTML4 بالنسبة للمطورين الراضين باستخدام وسوم HTML المهملة لكن يريدون الانتقال إلى HTML 4 يمكنهم استخدام DOCTYPE الانتقالي والذي يسمح للمتصفح تحليل الوسوم المهملة وعرضها دون رمي (throw) أية أخطاء. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPE الصارم لـ HTML4 يمكن للمطورين الذي لا يرغبون بتضمين دعم للوسوم المهملة وإمكانية وجود أخطاء تنسيق عند استخدام وضع التوافق 'compatibility' استخدام DOCTYPE الصارم والذي يخبر المتصفح برمي أخطاء عند تضمين وسوم مهملة في ملف HTML عند محاولة تحميله، وسيكون هذا مفيدًا لضمان عملك على معيار HTML4. DOCTYPE من أجل HTML5 يعمل DOCTYPE للإصدار HTML5 تقريبًا على جميع المتصفحات القديمة وهو يُستخدم بالفعل على مواقع عديدة اليوم. لاستخدام HTML5 DOCTYPE في ملف HTML، استخدم المقتطف التالي: <!DOCTYPE html> هيكل الموقع الأساسي باستخدام HTML5 DOCTYPE <!DOCTYPE html> <html> <head><title></title></head> <body></body> </html> العمل مع هيكل HTML5 و CSS و جافا سكربت بناء وتقديم المحتوي في HTML5 <!DOCTYPE html> <html> <head> <title>Titles should be short descriptions of the page</title> <meta charset="utf-8"> </head> <body> <div> <h1>h1 tags should contain the most important information on your site</h1> <p>Paragraph tags should be where most of your text content lives, or used as a separation between sections.</p> <ul> <li>This is a list element</li> <li>This is another element, notice the bullets and indentation </li> </ul> <p>You probably noticed that I used a "div" tag to wrap these other tags in. I'm using it as a container.</p> </div> </body> </html> نعرف بالفعل ما تفعله هذه الشيفرة البرمجية، لكن دعنا نلقي نظرة حول شكله في الواقع. ستظهر لك الصورة في الأسفل شكل HTML الذي كتبناه: CSS في بناء وتقديم محتوى HTML5 اضغط على زر الإدخال بعد الوسم <title> </title> وأضف المقتطف كما هو موضح في رابط الصورة التالية لربط ملف الأنماط css. إلى ملف html. الرئيسي. يجب وضع الشيفرة البرمجية التالية في الملف hist.css @charset "utf-8"; /* CSS Document */ body { background:#0CF; font-family: Helvetica, Arial, sans-serif; font-size: 0.75em; } h1 { font-size: 200% } p { margin: 5px 0; padding: 0 3px; } #year{ text-align:center; font-weight:bold; font-size:200%; } .small { font-size: 80%; } تُظهر لك الصورة في الأسفل مظهر HTML الجديد بعد ربط ملف CSS . جافا سكربت في بناء وتقديم محتوى HTML5 ملخص لوضع وسوم جافا سكربت في ملفك: تحميل السكربتات في عنصر head: يجعلها تُحمّل أولا لكن قد تُؤثّر سلبا على وقت التحميل. تحميل السكربتات في body : تبدو فكرة جديدة لكنها تخلق مشاكل مع الصيانة وترمي (trows) تأخيرات التحميل المحتملة. تحميل السكربتات قبل إغلاق وسم body : سيبدو تحميل موقع أسرع لكن قد يؤدي ذلك إلى نتيجة غير مقصودة لنقص وظائف الموقع في الثواني الأولى للتحميل. دعنا نضع السكربتات في وسم head والتي هي الحالة المفضلة لكل مطور. <script src="js/javascript.js" type="text/javascript"></script> </head> يجب وضع السكربت التالي في ملف javascript.js // JavaScript Document window.onload = setYear; function setYear() { var currentYear = new Date(); document.getElementById('year').innerHTML = currentYear.getFullYear(); } ستوضح لك الصورة أدناه شكل HTML الجديد بعد ربط ملف js .. تعلمنا قليلا جول استخدام الحالي لهيكل HTML وربط CSS وتحميل السكربت (جافا سكربت)، والآن لنتعلم كيف نستخدم المهارات التي تعلمناها في jQuery mobile. ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 1 لصاحبه Andrew اقرأ أيضًا الدرس التالي: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل

jquery mobile الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل

هشام رزق الله أضاف مقال في jQuery

مزيد من المعلومات حول "الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل"

نواصل اليوم دروسنا حول jQuery Mobile، في هذا الدرس، سنطّلع على أمثلة تهيئة، وإنشاء صفحات، ومعاجلات الحدث (event handlers)، وتنقلات الصفحة وغيرها. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول تضمين jQuery Mobile في موقعك من السهل إضافة إطار jQuery إلى موقعك كسهولة إضافة أي ملف جافا سكربت خارجي. <!DOCTYPE html> <html> <head> <title>jQuery Mobile on Script Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> <body> <p>Site contents will be here</p> </body> </html> إنشاء صفحة بسيطة باستخدام jQuery Mobile تحدثنا بالفعل على الشيفرة البرمجية لبناء هيكل بسيط لموقع ويب للهواتف، لكننا لا يشبه مواقع الويب للهواتف، لننشئ إذا موقع يتكون من صفحة واحدة وزر حتى نفهم طريقة عمل jQuery Mobile. يعين jQuery Mobile الصفحات باستخدام الخاصية data-role. في ما وراء الكواليس، يحدد jQuery Mobile العناصر المبنية على هذه الخاصية ويعززها بشكل تدريجي بإضافة: أصناف CSS، أي ترميز لازم، إدارة للأحداث. تبدو هذه وكأنها طريقة معقدة للتعامل مع الأشياء، لماذا لا يكون لدينا صفحات عادية مرتبطة كالعادة؟ لكننا في هذا الدرس سنغطي عدة مميزات هامة لـ jQuery Mobile: تنقلات الصفحة من خلال التعامل مع الصفحات كمناطق محتوى منفصلة في ملف واحد، يمكن لـ jQuery Mobile إنشاء تنقلات سلسة للصفحات، مما يؤدي إلى مظهر مشابه للتطبيقات. إدارة التصفح يمكن لـ jQuery Mobile التعامل تلقائيًا مع تصفح الصفحة عن طريق توفير مميزات مثل أزرار العودة والربط العميق. الكفاءة لن يحتاج المتصفح إلى الوصول إلى الشبكة مرارًا وتكرارًا بما أن جميع الموارد موجودة في ملف واحد، كما هو الحال مع الملفات الفردية الأصغر حجمًا. سيساعد هذا على تخفيف بطء التطبيق واستنزاف بطارية الهاتف، لكن من جهة أخرى، سيكون وقت تحميل أطول لصفحات HTML الكبيرة التي تحتوي على العديد من العروض (views) الفردية لصفحة jQuery Mobile. ومع ذلك، بمجرد تحميل الملف، فإن السلوك سيصبح أسرع ولن يعتمد بالضرورة على الوصول إلى الشبكة. <!DOCTYPE html> <html> <head> <title>Script-tutorial: jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Single Page Site</h1></div> <div data-role="content"> <p>Look at the button!</p> <a href="https://www.script-tutorials.com" data-role="button">I am a button</a> </div> </div> </body> </html> المثال 1: إنشاء صفحة بسيطة باستخدام jQuery mobile <!DOCTYPE html> <html> <head> <title>Script-tutorial: jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Single Page Site</h1></div> <div data-role="content"> <p>Look at the button!</p> <a href="https://www.script-tutorials.com" data-role="button">I am a button</a> </div> </div> </body> </html> صفحة بسيطة مع زر واحد مرتبط إلى صفحة الحوار (dialog page) المثال 2: إنشاء صفحة بسيطة باستخدام jQuery Mobile مع زر يعمل وصفحة ثانية <!DOCTYPE html> <html> <head> <title>Script-tutorials: jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Single Page Site</h1></div> <div data-role="content"> <p>Look at the button!</p> <a href="#dpop" data-role="button" data-rel="dialog">I am a button</a> </div> </div> <div data-role="page" id="dpop" data-theme="d"> <div data-role="header"><h1>Clicked!</h1></div> <div data-role="content"> <p>clicked content!</p> <a href="#" data-rel="back" data-role="button">Go back</a> </div> </div> </body> </html> القسم 2.2: إطار عمل jQuery Mobile حدث تهيئة الهاتف يستخدم إطار عمل jQuery دالة ‎$(document).ready()‎ للتحايل على مشاكل التلاعب والتحميل عن طريق إعطائك صلاحية الوصول إلى دوالك في أقرب وقت. في حين أن هذا الأمر رائع للمواقع المتكونة من صفحة واحدة، لكنه سيصبح مشكلة صغيرة لإطار عمل jQuery Mobile. يستخدم jQuery Mobile طلبيات AJAX لتحميل محتويات كل صفحة بدلا من إعادة تحميل بنية DOM كاملة. تعمل دالة ‎$(document).ready()‎ مرة واحدة عند تحميل الصفحة، وليس عن طريق نداء AJAX، في jQuery Mobile، لا تعمل دالة ‎$(document).ready()‎ مرة واحدة في الصفحة، لكن مرة في الموقع ما لم يطلب المستخدم تحديث الصفحة، وهذا يعني أن بعض الإعدادات الافتراضية التي يجب تعيينها عن طريق jQuery Mobile لا يمكن تعيينها في دالة ‎$(document).ready()‎ لأنها لن تُطبّق في الصفحات الأخرى المتضمنة عن طريق AJAX. الحل هو تعيين وتغيير هذه الافتراضات باستخدام حدث mobileinit لأنه يعمل قبل دالة ‎$(document).ready()‎. يجب عليك تضمين إطار عمل jQuery لاستخدام حدثmobileinit ومن ثم إما عن طريق تضمين مباشر أو تضمين خارجي لملف جافا سكربت يحتوي على حدث الربط لحدث mobileinit وفي النهاية تضمين jQuery Mobile. مثال 3: تضمين jQuery، سكربت mobileinit مضمن و jQuery Mobile <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).on("mobileinit", function() { $.extend( $.mobile , { pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.' }); }); </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> تهيئة صفحة في jQuery Mobile يجب عليك اتباع نهج أقل حيوية (dynamic) وأكثر تخطيط لاستخدام حدث pageinit على صفحتك، فتوجد عدة طرق لإرفاق حدث pageinit في شيفرتك البرمجية ففي نسخ jQuery Mobile قبل 1.1، ستستخدم jQuery 1.6.4 وهذا يعني أنه يجب عليك استخدام دالة ‎.bind()‎ بدلا من دالة ‎.on()‎،وعند استخدام الإصدار 1.1 وما بعده من jQuery Mobile ستستخدم دالة ‎.on()‎ لربط الحدث. دالة ‎.on()‎ الموجودة في jQuery 1.7 هي توحيد لعدة دوال تُستخدم في ربط الأحداث، فبدلا من القلق على استخدام ‎.bind()‎ أو ‎.live()‎ أو ‎.delegate()‎ يمكنك الآن استخدام دالة ‎.on()‎ لإيجاد الأحداث، يمكنك معرفة المزيد من المعومات حول هذه الدالة عن طريق زيارة التوثيق. إذا كنت تستخدم إصدار jQuery Mobile قبل 1.1، تجنب استخدام التابع ‎.on()‎، ويجب عليك بدلا من ذلك استخدام دالة ‎.delegate()‎ أو ‎.live()‎. المثال 4: استخدام حدث سكربت pageinit و mobileinit بدلا من ‎$(document).ready()‎ ستظهر لك الصورة في الأعلى إذا كانت صفحة multipage_two.html غير متوفرة في رابط المباشر للمجلد. <!DOCTYPE html> <html> <head> <title>Script-Tutorials jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript"> $(document).on("mobileinit", function() { $.extend( $.mobile , { pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.' }); }); //THE TIED EVENT OF THE MULTIPAGE_TWO.HTML BEGINS $(document).on("pageinit","#pageinit2", function() { alert("pageinit is bound!"); }); //THE TIED EVENT OF THE MULTIPAGE_TWO.HTML ENDS </script> </head> <body> <div data-role="page"> <div data-role="header"><h1>pageinit event example</h1></div> <div data-role="content"> <p>The button below will use AJAX to load another page and trigger a bound event</p> <a href="multipage_two.html" data-role="button">Click to open a new page</a> </div> </div> </body> </html> السكربت أدناه يحتوي على حدث مرتبط في السكربت أعلاه لـ pageinit.html، وهذا سيُطلق (Trigger) تحميل الصفحة مباشرة من ذلك الملف. هذه multipage_two.html <!DOCTYPE html> <html> <head> <title>Script-tutorials: jQuery mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script> </head> <body> <div data-role="page" id="pageinit2"> <div data-role="header"><h1>pageinit event example </h1></div> <div data-role="content"> <p>Fantastic! I am a new page and was loaded through AJAX.</p> <a href="pageinit.html" data-role="button" data-rel="back">Amazing, now take me back</a> </div> </div> </body> </html> <img src="https://www.script-tutorials.com/demos/511/img6.png" data-lazy-src="https://www.script-tutorials.com/demos/511/img6.png" class=" lazyloaded"> <!DOCTYPE html> <html> <head> <title>Script-Tutorials jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).on("mobileinit", function() { $.extend( $.mobile , { pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.' }); }); $(document).on("pageinit","#pageinit2", function() { alert("pageinit is bound!"); }); </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>pageinit event example</h1></div> <div data-role="content"> <p>The button below will use AJAX to load another page and trigger a bound event</p> <a href="multipage_two.html" data-role="button">Click to open a new page</a> </div> </div> </body> </html> هذه هي الصفحة multipage_two.html: التنقل بين الصفحات تتكون العملية من صفحتين: صفحة "من” وصفحة "إلى”، هذه التنقلات تغيّر الصفحة من الصفحة الحالية (fromPage) إلى صفحة جديدة (toPage). إخفاء الصفحة وأحداث الظهور يفرق jQuery Mobile بين أحداث صفحة التحويل وأحداث إظهار وإخفاء الصفحة بسبب طبيعته غير المتزامنة، تحدث أحداث تحميل الصفحة عند تحميل الملف إلى المتصفح بطرية متزامنة، وعند تحميل الصفحة بهذه الطريقة، سيصبح التابع jQuery(document).ready()‎ متاحًا للاستعمال وسيشغل jQuery Mobile أحداث التهيئة الأخرى كذلك. كما رأينا، قد يحتوي ملف صفحة HTML الواحدة على عدة عروض (views) لـ jQuery Mobile، ويمكن للمستخدم الانتقال بين مناظر هذه الصفحة عدة مرات. هذه الصفحة لا تطلق أحداث تحميل الصفحة، وبدلا من ذلك، يوفر jQuery Mobile مجموعة من الأحداث التي تعمل في كل مرة يحدث فيها انتقال للصفحة، وكل واحدة من هذه الأحداث توفر مرجع إلى الحدث وكائنات واجهة المستخدم: pagebeforehide: ينطلق هذا الحدث في الصفحة التي يُنتقل منها قبل بدء عملية الانتقال. ستكون ui.nextPage الصفحة التي يُنتقل إليها أو كائن jQuery فارغ إذا لم يكن هناك أي صفحة. Pagebeforeshow: ينطلق هذا الحدث في الصفحة التي يُنتقل إليها قبل بدء عملية الانتقال. ستكون ui.prevPage الصفحة التي يُنتقل منها أو كائن jQuery فارغ إذا لم يكن هناك أي صفحة. Pagehide: ينطلق هذا الحدث في الصفحة التي يُنتقل منها بعد انتهاء عملية الانتقال. سيكون ui.nextPage كائن jQuery للصفحة التي يُنتقل إليها أو كائن jQuery فارغ إذا لم يكن هناك أي صفحة. Pageshow: ينطلق هذا الحدث في الصفحة التي يُنتقل إليها بعد انتهاء عملية الانتقال. سيحتوي ui.prevPage كائن jQuery للصفحة التي يُنتقل منها أو كائن jQuery فارغ إذا لم يكن هناك أي صفحة. توفر هذه الأحداث الأربعة نظير لنداء jQuery(document).ready()‎ لمناظر صفحة التطبيق. لاستخدام هذه الأحداث، ارفق مستمع الحدث (event listeners) إلى الصفحة المناسبة باستخدام jQuery.bind()‎، أو jQuery.live()‎، أو jQuery.delegate()‎. jQuery.bind()‎، و jQuery.live()‎، و jQuery.delegate()‎ هي توابع يملكها jQuery لربط المعالجات (handlers) إلى مستمعي الأحداث. للمزيد من التفاصيل، راجع توثيق jQuery، وهنا نستخدم jQuery.bind()‎: <script> $("#page1").bind("pagehide", function(event, ui) { var strAlert = ""; for (var thing in event) { strAlert += thing + " : " + event[thing] + "\n"; } alert(strAlert); }); </script> بالنسبة للصفحات المتكونة من نفس الملف، سيكون jQuery.bind()‎ كافيا. بالنسبة للصفحات التي ستُحمّل بشكل غير متزامن عن طريق jQuery Mobile، استخدم jQuery.delegate()‎ أو jQuery.live()‎. المثال 5: حدث pagebeforehide <!DOCTYPE html> <html> <head> <title>Script-tutorials: pagebeforehide Event</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).on("pagebeforehide","#pagetwo",function(){ alert("pagebeforehide event fired - pagetwo is about to be hidden"); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"><h1>pagebeforehide Event</h1></div> <div data-role="main" class="ui-content"> <p>Page One</p> <a href="#pagetwo" data-role="button">Go to Page Two</a> </div> <div data-role="footer"> <h1>Header</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"><h1>pagebeforehide Event</h1></div> <div data-role="main" class="ui-content"> <p>Page Two</p> <a href="#pageone" data-role="button">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html> المثال 6: حدث pagebeforeshow <!DOCTYPE html> <html> <head> <title>Script-tutorials: pagebeforehide Event</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo alert("pagetwo is about to be shown"); }); $(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo alert("pagetwo is now shown"); }); $(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo alert("pagetwo is about to be hidden"); }); $(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo alert("pagetwo is now hidden"); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"><h1>pagebeforehide Event</h1></div> <div data-role="main" class="ui-content"> <p>Page One</p> <a href="#pagetwo" data-role="button">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer 1</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"><h1>pagebeforehide Event</h1></div> <div data-role="main" class="ui-content"> <p>Page Two</p> <a href="#pageone" data-role="button">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer 2</h1> </div> </div> </body> </html> أحداث تحميل JQUERY MOBILE أحداث تحميل الصفحة للصفحات الخارجية. كلما تُحمّل صفحة خارجية في DOM، سيعمل حدثين، الأول هو pagecontainerbeforeload والثاني إما pagecontainerload (نجاح) أو pagecontainerloadfailed (فشل). ويرد في الجدول أدناه شرح لهذه الأحداث: الحدث الوصف pagecontainerbeforeload تشتغل قبل أي طلب لتحميل صفحة. pagecontainerload تشتغل بعد تحميل الصفحة بنجاح وتُدرج في DOM. pagecontainerload تشتغل إذا فشل طلب تحميل الصفحة، افتراضيًا ستُظهر رسالة “Error Loading Page”. تشتغل إذا فشل طلب تحميل الصفحة، افتراضيًا ستُظهر رسالة “Error Loading Page”. ستجد في الأسفل الشيفرة البرمجية لملف main.html المثال 7: حدث تحميل الصفحة عند وجود زر لتحميل الصفحة الخارجية، ستظهر هذه الصورة في المتصفح <!DOCTYPE html> <html> <head> <title>Script-tutorials: pagebeforehide Event</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).on("pagecontainerload",function(event,data){ alert("pagecontainerload event fired!\nURL: " + data.url); }); $(document).on("pagecontainerloadfailed",function(event,data){ alert("Sorry, requested page does not exist."); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"><h1>Load Events</h1></div> <div data-role="main" class="ui-content"> <p>Content data loaded or faile to load</p> <a href="pageexist.html" data-role="button">External Page Exist</a> <a href="page_notexist.html" data-role="button">No Page Exist</a> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html> ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 2 لصاحبه Andrew اقرأ أيضًا الدرس التالي: اتجاه الصفحة وأحداثها الدرس السابق: البداية، بناء وتقديم محتوى

2 يوليو 2019

البحث في الموقع

ابحث بالكلمات المفتاحية

ابحث باسم الكاتب

نوع المحتوى

التصنيفات

التصنيفات

التصنيفات

التصنيفات

التصنيفات

التصنيفات

التصنيفات

التصنيفات

التصنيفات

أسئلة وأجوبة

التصنيفات

الدورات

ابحث في

ابحث عن

تاريخ الإنشاء

بداية

نهاية

آخر تحديث

بداية

نهاية

رشح النتائج حسب

الحد الأدنى من الردود

أقل عدد من الإجابات

الحد الأدنى من المراجعات

أقل عدد مرات مشاهدة

تاريخ الانضمام

بداية

نهاية

المجموعة

النبذة الشخصية