البرمجة: jQueryhttps://academy.hsoub.com/programming/javascript/jquery/?d=2البرمجة: jQueryarالدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخولhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%B3%D8%A7%D8%AF%D8%B3-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%A7%D9%84%D9%82%D9%88%D8%A7%D8%A6%D9%85-%D9%88%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D9%87%D8%A7-%D9%88%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D9%88%D8%AA%D8%B3%D8%AC%D9%8A%D9%84-%D8%A7%D9%84%D8%AF%D8%AE%D9%88%D9%84-r718/

سنتحدث في درسنا الأخير من هذه السلسلة عن إنشاء القوائم 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>

img1.png

تطبيق قالب على شكل عناصر القائمة

لإضافة المرونة إلى شكل القائمة، تملك 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>

img2.png

إنشاء قائمة مركّبة

لإنشاء قائمة مركبة (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>

img3.png

استخدام قائمة مرتَّبة

تحتاج إلى البدء بعنصر 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>

img4.png

مثال 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>

img5.png

إضافة عداد إلى القائمة في 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>

img6.png

إضافة الأيقونات والصور المصغرة إلى عناصر قائمة باستخدام 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>

img7.png

إضافة أيقونات إلى عناصر قائمة

المثال 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>

img8.png

إنشاء قائمة مقسمة

القائمة المقسمة (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>

img9.png

محتوى قائمة البحث

إذا كنت تستخدم القائمة لعرض عدد كبير من العناصر فيمكنك إرفاق مرشّح بحث لمساعدة المستخدمين في التنقل لإيجاد ما يريدون.

إن إنشاء مرشّح البحث أسهل مما تعتقد، فكل ما يجب عليك فعله هو إضافة الخاصية 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>

img10.png

تخصيص مرشح بحث عن نصوص في قائمة مركبة

مثال 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>

img11.png

تحسين النماذج مع 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>

img12.png

مثال 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>

تظهر الصورة في أسفل العناصر المنظمة لنموذج تسجيل الدخول البسيط

img13.png

الآن رأينا استخدام عناصر النص، دعنا نلقي نظرة على بعض عناصر الإدخال الأخرى في 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>

img14.png

العنصر 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>

img15.png

عناصر إدخال إضافية

تملك أجهزة الهاتف طرقًا أخرى جديدة لجمع مدخلات المستخدم، كان بعضها موجود لمتصفحات حواسيب سطح المكتب لبعض الوقت، لكن لم تُستخدم كفاية لتُعتبر شائعة.

عند التفكير في ميزات التحكم أو الإدخال المختلفة للهاتف، غالبا ما ستتضمن شريط تمرير لتغيير الإعدادات، مفتاح تبديل إعداد إلى آخر وميزة البحث، وكلها مدعومة في 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>

img16.png

زر القاطعة (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>

img17.png

حقل البحث

حقل البحث هو نوع جديد من المدخلات والذي هو جزء من مميزات 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>

img18.png

استخدام الإضافات

يمكنك إضافة الإضافات بطرق مختلفة لأنها تغطي أي شيء ترغب في إضافته إلى المكتبة الرئيسية. بعض الإضافات عبارة على ملفات 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>

img19.png

عرض تجريبي: تخطيط مواقع بسيطة لكن متجاوبة

  • العرض التجريبي الأول: تخطيط ومعاينة موقع ملف

img20.png

img21.png

  • عرض تجريبي 2: تخطيط الأجهزة اللوحية

img22.png

img23.png

  • عرض تجريبي 3: تخطيط سطح المكتب

img24.png

img25.png

  • عرض تجريبي 4: مثال jQuery Mobile بسيط

img26.png

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 6 لصاحبه Andrew

اقرأ أيضًا

]]>718Tue, 23 Jul 2019 10:45:40 +0000الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصةhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%AE%D8%A7%D9%85%D8%B3-%D8%A7%D9%84%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1-%D9%88%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9-r717/

في درسنا الخامس اليوم، سنتحدث عن المجموعة المدمجة من الأيقونات، ووضع الأيقونة، وإنشاء أزرار مخصصة، واستخدام النماذج اللونية (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>

img1.png

وضع أيقونات 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>

img2.png

إنشاء أيقونات مخصصة

ربما لاحظت أن جميع الأيقونات المتضمنة موجودة في أعلى دائرة أو قرص، وهذا سيساعد على إبراز الأيقونة وعملها على أي لون خلفية، يجب أن يناسب هذا القرص مساحة 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>

img3.png

يُستخدم استعلام الوسائط (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>

img5.png

المثال 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>
img6.png
النموذج الافتراضية
img7.png
النموذج A
img8.png
القطعة B
img9.png
النموذج C
img10.png
النموذج D
img11.png
النموذج E

وإليك بعض الصور لعنصر إدخال من نوع خيار متعدد بنماذج متعددة:

img12.pngimg13.pngimg14.png

خلط عدة نماذج مع بعضها بعضًا

يمكنك خلط ومطابقة النماذج داخل الصفحة، مما يتيح لك السيطرة الدقيقة على مظهر التطبيق.

المثال 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>

img15.png

تحديد النموذج المراد تطبيقه على العناصر عن طريق الأصناف

بدءًا من الجزء العلوي، يمكنك أن ترى أن كل من الصفحة وأقسام الرأس لا تستخدم الخاصية 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>

img16.png

على الرغم من استخدام أصناف قليلة، إلا أنه يمكنك تخصيص كل جانب من أنماط 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>

img17.pngimg18.png

إنشاء نموذج مخصص

سيكون لديك خيارات مختلفة عندما يتعلق الأمر بإنشاء نموذج ألوان. يمكنك إما تغيير النموذج الموجود (وهذا ما فعلناه مسبقًا) أو بناء واحد جديد من الصفر، أو نسخ واحد والتعديل عليه وتغيير الإعدادات حسب تفضيلك. وهنالك خيار آخر وهو "إنشاء قالبك الخاص باستخدام 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>

img19.png

عناصر قالب الموقع

لقد تعلمت للتو أنه يمكنك استخدام الأصناف لتغيير جوانب مختلفة من قالب موقعك، لكن توجد خيارات إضافية يمكنك استخدامها عند تغيير قالب للمكونات الفردية. تملك بعض المكونات إعدادات افتراضية يجب عليك معرفتها.

الأزرار

تستخدم الأزرار تلقائيًا نماذج الألوان المرتبطة بالحاوية الرئيسية، فإذا وضعت الزر في كتلة حاوية تستخدم النموذج 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>

img20.png

الأشرطة (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>

img21.png

كتل المحتوى

يمكن أن يكون تغيير قالب محتوى الكتلة صعب قليلا، فـ 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>

img22.png

عند استخدام الخاصيتين data-theme و data-content-theme على عنصر، يطغى نموذج الألوان المستخدم في الخاصية data-content-theme عادةً على النموذج المستخدم في الخاصية datatheme وهذا يفسر لماذا ترى فقط النموذج الموجود في data-content-theme عند محاولتك لاستخدام الخاصيتين في حاوية الصفحة.

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 5 لصاحبه Andrew

اقرأ أيضًا

]]>717Tue, 23 Jul 2019 10:45:35 +0000الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطيhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B9-%D8%B1%D8%A8%D8%B7-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%AE%D8%A7%D8%B1%D8%AC%D9%8A%D8%A9-%D9%88%D8%AA%D9%86%D8%B8%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AD%D8%AA%D9%88%D9%89-%D8%A8%D9%86%D8%B8%D8%A7%D9%85-%D8%A7%D9%84%D8%B4%D8%A8%D9%83%D8%A9-%D9%88%D8%A8%D9%86%D8%A7%D8%A1-%D9%85%D8%AD%D8%AA%D9%88%D9%89-%D9%82%D8%A7%D8%A8%D9%84-%D9%84%D9%84%D8%B7%D9%8A-r703/

في درسنا الرابع من هذه السلسلة، سنتابع الحديث حول الخاصية 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>
  <!-- Begin Page 4 -->
  <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>
  <!-- End Page 4-->
  <h3>This content will be ignored as well.</h3>
</body>
</html>

img1.png

img2.png

عند معاينة هذا السكربت، سترى الصورة الأولى؛ ولكن عند الانتقال من الصفحة السابقة للسكربت السابق، ستظهر لك الصورة الثانية.

تجاوز جلب الصفحة غير المتزامن

ستحتاج في بعض الأحيان إلى تحميل الصفحة بشكل طبيعي بدلًا من جعل 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>

img3.png

ستعرض الأجهزة الأكبر محتوى منظم في الشبكة، إذ سيتمدد المحتوى للاستفادة من مساحة الشاشة آنذاك.

img4.png

التخطيطات الشبكية

كما هو موضح في المثال السابق أعلاه، تخطيط الشبكة يعتمد على بنية 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>

img5.png

بناء محتوى قابل للطي

يمكن أن يكون المحتوى القابل للطي مخفيًا أو ظاهرًا مع وجود زر أو إمكانية لمسه لتغيير حالته (طيِّه إن كان مفتوحًا أو فتحه إن كان مطويًّا). ربما قد رأيت هذا النوع من السلوك على مواقع ويب أخرى سابقًا، خصوصًا في أقسام الأسئلة الشائعة.

يكون عنوان الأسئلة والأجوبة غالبًا في مثل تلك المواقع ظاهرًا مع وجود زر مثل + أو - بجانبه للإِشارة إلى أنه يمكنك إظهار المحتوى وإخفاؤه. نفس هذه الوظيفة موجودة في 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>

img6.png

إضافة شريط أدوات في ترويسة الصفحة

مثال 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>

img7.png

مثال 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">
      <!-- first link -->
      <a href="#">Purchase</a>
      <h1>I am a header toolbar</h1>
      <!--second link -->
      <a href="#">Apply</a>
    </div>
  </div>
</body>
</html>

img8.png

لاحظ أنه لا يتوجب علينا تطبيق الخاصية 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">
      <!-- first link -->
      <a href="#">Purchase</a>
      <h1>I am a header toolbar</h1>
      <!--second link -->
      <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>

img9.png

تُنشَأ حاوية شريط التنقل كعنصر 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">
      <!-- first link -->
      <a href="#">Purchase</a>
      <h1>I am a header toolbar</h1>
      <!--second link -->
      <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>
    <!--content -->
    <div data-role="content">
      <h3>CONTENT GOES HERE SHORTLY</h3>
    </div>
    <!--adding footer to your page with tool bar -->
    <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>

img10.png

مثال 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">
      <!-- first link -->
      <a href="#">Purchase</a>
      <h1>I am a header toolbar</h1>
      <!--second link -->
      <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>
    <!--content -->
    <div data-role="content">
      <h3>CONTENT GOES HERE SHORTLY</h3>
    </div>
    <!--adding footer to your page with tool bar -->
    <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>

img11.png

شريط التنقل (navbar) هي ودجة موجودة في jQuery Mobile تسمح لك بإضافة روابط تنقل في صفحتك، وعلى غرار نظام الشبكة المدمج، فإن شريط التنقل قادر على احتواء خمسة أعمدة. ولإضافة شريط التنقل إلى صفحتك، يجب عليك استخدام عنصر الحاوية مع الخاصية data-role="navbar"‎. يجب أن يكون لديك داخل الحاوية قائمة غير مرتبة ul مع كل عمود داخل عنصر li.

تموضع أشرطة الأدوات

تُوضع أشرطة الأدوات في العادة قبل وبعد قسم المحتوى، وهذا معيارٌ في تطوير الويب. في بعض الأحيان، قد تريد إبقاء رأس وذيل الصفحة مرئيًّا دائمًا، خاصة عند استخدام شريط التنقل (navbar)، وتوجد طريقتين لفعل هذا. يمكنك إما استخدام تموضع شريط الأدوات الثابت أو تملئ به الشاشة.

التموضع الثابت

عند استخدام موضع ثابت، سيتحقق jQuery Mobile من الصفحة لمعرفة هل شريط الأدوات ظاهر في العرض أم لا، فإذا كان شريط الأدوات خارج العرض، فسيُدرج في أعلى الصفحة أو أسفلها (بالاعتماد على ما إذا كان شريط الأدوات في رأس أو ذيل الصفحة) ليكون ظاهرًا للمستخدم.

لجعل شريط الأدوات يستخدم الموضع الثابت، تحتاج إلى إضافة الخاصية data-position="fixed"‎ إلى شريط الأدوات.

مثال 31: شريط الأدوات الثابت

شكل صفحة HTML قبل التمرير إلى الأسفل:

img12.png

شكل صفحة HTML بعد التمرير إلى الأسفل:

img13.png

شيفرة 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>

img14.png

تذكر أنَّه يمكن الوصول إلى العناصر التي تغطيها أشرطة الأدوات عند استخدام وضع ملئ الشاشة عن طريق الضغط أو لمس في مكان ما على الشاشة لإخفاء الشريط.

إضافة تنقل مستمر

ليكن لدينا عنصر div مع الخاصيات data-role="footer"‎، و data-position="fixed"‎ و data-id="rps"‎، أول خاصيتين مطلوبتين لإنشاء شريط أدوات الذيل واستخدام التموضع الثابت، وأما بالنسبة للخاصية data-id=”rps”‎ فهي ستُبقِي شريط التنقل ظاهرًا أثناء التنقل بين الصفحات. ويعمل هذا فقط عندما تكون القيمة داخل الخاصية data-id هي نفسها في الصفحة الحالية التي ستنتقل إليها.

مثال 31: إضافة تنقل مستمر

معاينة الصفحة features.html:

img15.png

الانتقال إلى الصفحة supports.html:

img16.png

الانتقال إلى الصفحة contacts.html:

img17.png

المدخلات والأزرار

تُنشئ العديد من أنواع عناصر الإدخال في 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>

img18.png

تجاوز التنسيق الافتراضي للزر

بشكل افتراضي، تملك الأزرار مظهرًا معينًا افتراضيًّا. لمَّا كان الزر يظهر بشكل جيد في أغلب الهواتف والأجهزة المحمولة، فإنه قد يظهر بمظهر غير جميل عندما يقترن بتصميمك. لحسن حظنا، يمكننا تحسين جمالية الزر يدويًّا.

المثال 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>

img13.png

إزالة الظل من الأزرار

هنالك خيار آخر قد ترغب في تغييره وهو مظهر الظل أسفل الزر. يمكن تغيير هذا باستخدام الخاصية 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>

img20.png

تغيير حجم الزر

عندما أنشأنا سابقًا الزر، لم نقلق بشأن حجمه، في حين قد لا تحتاج إلى تغيير الحجم الافتراضي للزر، لكن قد تواجه بعض المشاكل أو بعض النتائج غير المتوقعة مع الحجم الافتراضي.

مثال 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>

img21.png

أضفنا الخاصية 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>

img22.png

كلا الزرّين يملكان الخاصية 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>

img23.png

في هذا المثال، يمكننا رؤية شبكة بسيطة مكونة من عمودين. الصنف ui-block-a ينظم المحتوى في العمود الأول من الشبكة في حين يرصف الصنف ui-block-b المحتوى في العمود الثاني.

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 4 لصاحبه Andrew

اقرأ أيضًا

]]>703Tue, 16 Jul 2019 13:00:00 +0000الدرس الثالث: اتجاه الصفحة وأحداثهاhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%AB%D8%A7%D9%84%D8%AB-%D8%A7%D8%AA%D8%AC%D8%A7%D9%87-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D9%88%D8%A3%D8%AD%D8%AF%D8%A7%D8%AB%D9%87%D8%A7-r702/

يتحدث هذا الدرس الجديد عن اتجاه صفحة الهاتف، وأحداث الصفحة (مثل 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: 

<!-- begin first page -->
<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>
<!-- end first page →

شيفرة الصفحة بعد تهيئة jQuery Mobile: 

<!-- begin first page -->
<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>
<!-- end first page →

تعطي كلا الشيفرتين نفس النتيجة:

img4.png

عند إنشاء تطبيق jQuery، من الشائع ربط معالجات الحدث (event handlers) في حدث تحميل الصفحة (document load)، ويمكنك فعل شيء مشابه باستخدام أحداث عرض الصفحة وإخفاء الصفحة في jQuery Mobile، لكن كن حذرًا، بما أن أحداث عرض وإخفاء الصفحة تعمل في كل مرة يحدث فيها انتقالًا للصفحة. فقد تربط معالجات الحدث أكثر من مرة، فعلى سبيل المثال، إذا ربطت مستمع حدث الضغط إلى عنصر داخل حدث عرض الصفحة (page show event)، فإن مستمع حدث الضغطة يرتبط في كل مرة تظهر فيها الصفحة، وهذا جيد إذا كنت تستخدم تلك الصفحة فقط، لكن إذا ذهب المستخدم لتلك الصفحة عدة مرات، فإن مستمع الحدث سيرتبط عدة مرات.

لحل هذه المشكلة، يمكنك إما التحقق لمعرفة إذا كان معالج الحدث قد رُبط بالفعل (لكن لا تربطه مرة أخرى)، أو مسح الارتباط في كل مرة قبل إعادة الربط. وإذا استخدمت الطريقة الأخيرة، فاستعمال مجالات الأسماء (namespacing) سيكون مُفيدًا. للمزيد من المعلومات حول الأحداث ذات الأسماء المصنفة ضمن مجالات أسماء، راجع هذا التوثيق.

الأحداث المحدِّدة ضمن مجالات أسماء هي أداة مفيدة جدًا يمكن وضعها في صندوق أدوات jQuery.

استخدام الحدث pagebeforecreate لإضافة خاصية بشكل ديناميكي

يُستخدم الحدث pagebeforecreate عندما تملك محتوى تريد تغييره قبل أن يمتلك jQuery Mobile فرصة لقفله وكتابة data-roles وخاصيات عناصر الصفحة إلى DOM.

المثال 9: استخدام الحدث pagebeforecreate لإضافة خاصية بشكل ديناميكي

يبدأ الملف كملف HTML قياسي يستخدم jQuery Mobile، لكننا بدأنا بالعنصر script، تُستخدم بعض الشيفرات البرمجية لـ jQuery لربط الحدث pagebeforecreate إلى الصفحة، ويتم هذا باستخدام الدالة ‎.on()‎ المتوفرة عند استخدام الإصدار jQuery 1.7 ومابعده. عندما يبحث الحدث pagebeforecreate على أية عناصر تملك الخاصية class="modify"‎ وتطبق الخاصية datainset="true"‎ إلى أي واحدة يُعثَر عليها باستخدام الدالة ‎.attr()‎.

يرى jQuery Mobile الخاصية data-inset="true"‎ ويضعها في قائمة بسبب عمل الحدث pagebeforecreate قبل إضافة شيفرة الصفحة إلى DOM. 

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: 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('pagebeforecreate', function(event) {
    $(".modify").attr('data-inset','true');
  });
  </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" id="home">
    <div data-role="header"><h1>pagebeforecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be inset during the pagebeforecreate event</p>
      <ul class="modify" data-role="listview">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

img5.png

استخدام الحدث pagecreate

يمكن استخدام الحدث pagecreate إما لتطبيق الودجات (widgets) الخاصة بك أو استخدام ودجة (widget) مدمجة أو إضافة تحكم يوفرها jQuery Mobile.

المثال 8: استخدام الحدث pagecreate بالاقتران مع الإضافة listview

تبدأ الشيفرة البرمجية كصفحة قياسية باستخدام jQuery Mobile، وتستخدم الدالة ‎.on()‎ الحدث pagecreate للعمل.

هنالك مُحدد (selector) لإيجاد أي عنصر في الصفحة التي تملك الخاصية class="modify"‎ ومن ثم يُضيف الخاصية data-inset="true"‎. وبعد فعل ذلك، يمكنك أن ترى عمل الدالة listview()‎. تُعرف هذه الدالة على أنها الإضافة listview وتُستخدم لتطبيق نمط وشكل أي قائمة. السطر 11 هو نهاية الدالة ‎.on()‎، والتي هي ربط للحدث pagecreate.

هنالك عنصر ul يحتوي فقط على الخاصية class="modify"‎؛ الخاصية data-role="listview"‎ لن تكون موجودة ولا الخاصية data-inset="true"‎. 

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: 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('pagecreate', function(event) {
    $(".modify").attr('data-inset','true').listview();
  });
  </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" id="home">
    <div data-role="header"><h1>pagecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be styled during the pagecreate event</p>
      <ul class="modify">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

img6.png

استخدام الحدث pageinit

أفضل وصف للحدث pageinit هو: «استخدمه كما لو تستخدم الدالة ‎$(document).ready()‎ في jQuery. يعمل هذا الحدث بعد تحميل DOM وعمل جميع الودجات والإضافات، ويعمل أيضًا كلما تُحمّلت الصفحة إما مباشرةً أو من خلال استدعاء AJAX من الصفحة الأخرى، وسيعمل هذا الحدث مرة واحدة عند تضمينه في DOM.

استخدام pageinit عند تحميل صفحة ثانية

يجب أن يكون الإعداد الأولي للصفحة مألوفًا بالنسبة لك الآن؛ في البداية، يمكنك أن ترى أنه يستخدم نفس الأسلوب لربط الحدث pageinit كما رُبِط الحدثpagebeforecreate والحدث pagecreate. الفرق هو في استخدام مُحدد (selector) لعنصر ذي المُعرِّف id="away"‎ في الدالة ‎.on()‎ لربط الدالة alert()‎ التي ستعمل فقط على الصفحة التي تطابق ذلك المحدد عند تحميلها لأول مرة في DOM.

بالنزول إلى الأسفل أكثر، سترى أن الصفحة أُعدّت مع عنصر div باستخدام الخاصية data-role="page"‎.

المثال 9: استخدام pageinit عند تحميل الصفحة الثانية 

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: 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','#away', function(event) {
    alert("The pageinit event has been run");
  });
  </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" id="home">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>I am the #home page</p>
      <a href="#away" data-role="button">Go Away</a>
    </div>
  </div>
  <div data-role="page" id="away">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>
      I am the #away page. The pageinit event runs on first page load.
      </p>
      <a href="#home" data-role="button">Go Back</a>
    </div>
  </div>
</body>
</html>

الصورة الأولى للمعاينة في المتصفح.

img7.png

الصور الثانية تظهر عند الضغط على الزر Go Away في المتصفح.

img22.png

الصورة الثالث هي للصورة المُهيَّأة.

img22.png

الآن لننظر في نمط تهيئة الصفحة في jQuery Mobile.

المثال 10: تغريدة جميلة دون سكربت التهيئة 

<!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%;} p{text-align:center;}
  </style>
</head>
<body>
  <!-- begin first page -->
  <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>
  <!-- end first page -->
  <!-- Begin second page -->
  <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>
  <!-- end second page -->
</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>

img10.png

img11.png

أحداث اللمس

عند تفاعل المستخدم مع موقعك عن طريق اللمس، ستعمل أحداث اللمس، ويمكنك الاستفادة من هذه الأحداث لعمل دوال مخصصة.

استخدام أحداث 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>

img12.png

يجب ربط الحدثين 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>

img13.png

أحداث الفأرة الافتراضية

أحداث الفأرة الافتراضية هي حل لمشاكل التوافق بين متصفحات الهاتف والحاسوب، فعلى سبيل المثال، تدعم بعض المتصفحات حدثًا يسمى 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>

img14.png

المثال 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>

img15.png

المثال 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>

img16.png

بناء موقعك الأول المخصص للهواتف باستخدام jQuery mobile

img17.png

الترويسة (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>

img18.png

مثال 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>

img19.png

المثال 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>

img20.png

المثال 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>

img21.png

المثال 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>

img22.png

img23.png

مثال 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>
  <!-- begin first page -->
  <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>
  <!-- end first page -->
  <!-- Begin second page -->
  <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>
  <!-- end second page -->
  <!-- begin third page -->
  <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>
  <!-- end third page -->
</body>
</html>

img24.png

img25.png

img26.png

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 3 لصاحبه Andrew

اقرأ أيضًا

]]>702Tue, 09 Jul 2019 18:02:00 +0000الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميلhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%AB%D8%A7%D9%86%D9%8A-%D8%A7%D9%84%D8%AA%D8%B6%D9%85%D9%8A%D9%86%D8%8C-%D8%AA%D9%87%D9%8A%D8%A6%D8%A9-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9%D8%8C-%D8%A7%D9%84%D8%AA%D9%86%D9%82%D9%84-%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A3%D8%AD%D8%AF%D8%A7%D8%AB-%D8%A7%D9%84%D8%AA%D8%AD%D9%85%D9%8A%D9%84-r633/

نواصل اليوم دروسنا حول 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.
ومع ذلك، بمجرد تحميل الملف، فإن السلوك سيصبح أسرع ولن يعتمد بالضرورة على الوصول إلى الشبكة.

img21.png

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

img22.png 

<!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 مع زر يعمل وصفحة ثانية

img23.png 

<!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()‎

img4.png

ستظهر لك الصورة في الأعلى إذا كانت صفحة 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) تحميل الصفحة مباشرة من ذلك الملف.

img5.png

هذه 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:

img6.png

التنقل بين الصفحات

تتكون العملية من صفحتين: صفحة "من” وصفحة "إلى”، هذه التنقلات تغيّر الصفحة من الصفحة الحالية (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

img7.png 

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

img8.png

img9.png 

<!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: حدث تحميل الصفحة

img10.png

عند وجود زر لتحميل الصفحة الخارجية، ستظهر هذه الصورة في المتصفح

img11.png 

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

اقرأ أيضًا

]]>633Tue, 02 Jul 2019 08:07:00 +0000الدرس الأول: البداية، بناء وتقديم محتوىhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%A3%D9%88%D9%84-%D8%A7%D9%84%D8%A8%D8%AF%D8%A7%D9%8A%D8%A9%D8%8C-%D8%A8%D9%86%D8%A7%D8%A1-%D9%88%D8%AA%D9%82%D8%AF%D9%8A%D9%85-%D9%85%D8%AD%D8%AA%D9%88%D9%89-r629/

في هذه السلسلة من الدروس، سنتحدث عن مكتبة jQuery Mobile ونتعرف عليها عن كثب والتي تساعدك على إنشاء مواقع ويب متجاوبة ومتوافقة مع الهواتف. تتضمن هذه السلسلة أكثر من 65 مثال تطبيقي عملي مع شيفراتها الكاملة.

هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile:

بدايتك مع jQuery Mobile

ما هو jQuery Mobile المحمول

يوفرjQuery Mobile مجموعة وفيرة من أدوات التطوير التي تجعل موقع ويب الموجه للهواتف متجاوبًا ومرنًا وبسيطًا.
يُعرّف jQuery ببساطة على أنه مجموعة من إضافات وودجات (widgets) jQuery تهدف إلى توفير API متعدد المنصات لإنشاء تطبيقات ويب للهواتف.
من حيث الشيفرات البرمجية، jQuery Mobile يشبه jQuery UI، لكن في حين أن jQuery UI موجه لتطبيقات سطح المكتب، فإن jQuery Mobile موجه للهواتف المحمولة.

ما يجب معرفته حول إنشاء مواقع ويب للهواتف

يجب عليك معرفة ثلاثة كلمات رئيسية عند تطوير مواقع ويب للهواتف، وهي أنه يجب أن يكون الموقع الموجه للهواتف:

  1. متجاوبًا: يتضمن كيف يبدو شكل الصفحة عند التنقل، وكيف يُضْغط على الزر وكيف تُحمّل البيانات على الهاتف.
  2. مرنًا: يعني أنه يمكن تخصيص الموقع عن طريق المستخدم ليناسب رغباته.
  3. بسيطًا: يعني أن الموقع يسهل تصفحه عن طريق الهاتف.

ما يجب معرفته حول 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

  1. لتطوير التطبيقات، ستستخدم:
    بالنسبة لنظام ويندوز التطبيقات: Komodo IDE، eclipse، iWeb، Microsoft FrontPage، Aptana studio، Dreamweaver، notepad++. وسنستخدم Dreamweaver في هذا الدرس.
    بالنسبة لنظام OsX التطبيقات: Coda، espresso، textwrangler، kod.
  2. لغات البرمجية التي يجب على مطور الويب معرفتها هي 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 الذي كتبناه:

img16.png

CSS في بناء وتقديم محتوى HTML5

اضغط على زر الإدخال بعد الوسم <title> </title> وأضف المقتطف كما هو موضح في رابط الصورة التالية لربط ملف الأنماط css. إلى ملف html. الرئيسي.

img17.png

يجب وضع الشيفرة البرمجية التالية في الملف 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 .

img19.png

جافا سكربت في بناء وتقديم محتوى 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 ..

img112.png

تعلمنا قليلا جول استخدام الحالي لهيكل HTML وربط CSS وتحميل السكربت (جافا سكربت)، والآن لنتعلم كيف نستخدم المهارات التي تعلمناها في jQuery mobile.

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 1 لصاحبه Andrew

اقرأ أيضًا

]]>629Tue, 25 Jun 2019 08:03:00 +0000إنشاء تطبيقات ويب ذات صفحة وحيدة باستخدام jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D9%88%D9%8A%D8%A8-%D8%B0%D8%A7%D8%AA-%D8%B5%D9%81%D8%AD%D8%A9-%D9%88%D8%AD%D9%8A%D8%AF%D8%A9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-jquery-r403/

أصبحت تطبيقات الويب ذات الصفحة الوحيدة Single Page Apps رائجةً في هذه الفترة في تطوير الويب، فأمسى كل شخصٍ يريد أن ينُشِئ تطبيق ويب ذا صفحةٍ وحيدة.
سأريك في هذا الدرس طريقةٍ سهلة لإنشاء تطبيقات الويب ذات الصفحة الوحيدة باستخدام jQuery ودون استخدام أيّة إطارات عمل مثل React أو Angular أو Vue …إلخ.

jqeury-spa.png

لمحة

لأننا نريد إنشاء تطبيق ويب ذا صفحةٍ وحيدة، فسنستخدم sammy.js للتوجيه (routing)، مكتبة Sammy هي مكتبة jQuery بمساحة تخزينية لا تتجاوز 5.2 كيلوبايت.
سيبدو سكربت التوجيه المكتوب لإضافة Sammy كما يلي: 

var app = $.sammy(function() {

  this.get('#/', function() {
    //your function
  });
  this.get('#about/', function() {
    //your function 
  });
  this.get('#contact/', function() {
    //your function
  });
});

علينا أولًا تهيئة التطبيق باستخدام ‎$.sammy وتخزين نسخة من الكائن في المتغير app. يمكننا تعريف تعليمة «توجيه» (route) في sammy بالطريقة الآتية: 

this.get('path/',function(){
// ...
});

هنالك دالة ستُستدعى لكل عملية توجيه، والتي يمكن أن نكتب بداخلها البنية المنطقية لها، ونربط البيانات اللازمة إلى كل «صفحة»، لأن كل عملية توجيه ستؤدي إلى إظهار «صفحة» مختلفة.
بعد تعريف كل تعليمات التوجيه، فسنتمكن من تشغيل تطبيق الويب ذي الصفحة الوحيدة باستدعاء الدالة run()‎ التابعة للكائن app كالتالي app.run()‎.

تطبيق التدوين الذي سننشئه

لتوضيح المفهوم الذي سنشرحه، فسنحاول إنشاء مثال واقعي. لنفترض أننا نريد إنشاء مدونة بسيطة، التي يوجد فيها صفحة رئيسية (أي صفحة Home) وصفحة معلومات (About). سنُنشِئ في صفحة index قائمة بالتدوينات، والضغط على أي واحدة منها سيأخذنا إلى صفحتها. يمكنك أن تجرب هذا التطبيق عمليًا هنا.
سنستخدم صيغة JSON لقائمة التدوينات، وسنستخدم إضافة Sammy لعرضها.

بنية الملفات 

- index.html <!-- main layout -->
- app.js <!-- stores all our routing logic -->
- css
--- style.css 
- js
--- jquery-1.11.3.min.js
--- sammy.min.js
--- sammy.template.js 
- data
--- articles.json
- templates <!-- the templates pages that will be injected into the main layout -->
--- article.template
--- article-detail.template
--- about.template

شيفرة HTML

سنستخدم قالب HTML boilerplate لإنشاء شيفرة HTML: 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script  src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script  src="js/sammy.min.js" type="text/javascript"></script>
  <script src="js/sammy.template.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/style.css" />
  <script src="app.js"></script>
</head>

<body>
  <div class="header-container">
    <header class="wrapper clearfix">
      <nav>
        <ul>
          <li><a href="#/">Home</a></li>
          <li><a href="#/about/">About</a></li> <!-- defining nav url according to route-->
        </ul>
      </nav>
    </header>
  </div>

  <div class="main-container">
    <div class="main wrapper clearfix">
      <div id="app">
      <!-- template will be injected here -->
      </div>
    </div>
  </div>
</body>
</html>

تعريف التوجيهات 

//app.js
(function($) {

  var app = $.sammy('#app', function() {
    this.use('Template');

    this.around(function(callback) {
      var context = this;
      this.load('data/articles.json')
          .then(function(items) {
            context.items = items;
          })
          .then(callback);
    });

    this.get('#/', function(context) {
      context.app.swap('');
      $.each(this.items, function(i, item) {
        context.render('templates/article.template', {id: i, item: item})
               .appendTo(context.$element());
      });
    });

    this.get('#/about/', function(context) {
        var str=location.href.toLowerCase();
        context.app.swap('');
        context.render('templates/about.template', {})
               .appendTo(context.$element());
    });

    this.get('#/article/:id', function(context) {
      this.item = this.items[this.params['id']];
      if (!this.item) { return this.notFound(); }
      this.partial('templates/article-detail.template');
    });


    this.before('.*', function() {

        var hash = document.location.hash;
        $("nav").find("a").removeClass("current");
        $("nav").find("a[href='"+hash+"']").addClass("current");
   });

  });

  $(function() {
    app.run('#/about/');
  });

})(jQuery);

هيئنا في البداية التطبيق داخل العنصر ‎#app، حيث سنُضيف القوالب المختلفة بناءً على مسار التوجيه. سنستخدم أيضًا محرك قوالب باسم sammy template engine. 

this.use('Template');

سنحصل على بيانات المدونة من ملف articles.json باستخدام الدالة load()‎ التابعة لمكتبة jQuery (يمكنك أيضًا استخدام ‎$.get أو ‎$.post)، وتخزين الناتج في المتغير context.
حان الآن الوقت لتعريف تعليمة التوجيه لصفحة index باستخدام ‎#/‎: 

this.get('#/', function(context) {
  context.app.swap('');
  $.each(this.items, function(i, item) {
    context.render('templates/article.template', {id: i, item: item})
           .appendTo(context.$element());
  });
});

لدينا بيانات مخزنة في المتغير context، سنمرّ الآن عبر تلك البيانات عبر حلقة تكرار باستعمال الدالة ‎$.each ثم عرضها في article.template. سنستخدم أيضًا الدالة context.app.swap()‎ لكي نُفرِّغ العنصر الذي سنضع فيه المحتويات (أي ‎#app) مما فيه قبل عرض القالب. 

<article>
  <section>
    <a href="#/article/<%= id %>"><h2><%= item.title %></h2></a>
  </section>
</article>

سنستخدم هنا مُحرِّك القوالب (templating engine) لكي نعرض القيم القابلة للتغيير باستخدام الصيغة ‎<%= yourdata %>‎، يمكنك أيضًا إضافة رابط لصفحة تفاصيل كل مقالة باستخدام الصيغة ‎#/article/<%= id %>‎.
الضغط على رابط التدوينة سيأخذنا إلى قالب article-detail.template، حيث نستطيع إظهار صورة التدوينة وملخص عنها …إلخ.
وخلف الكواليس، سنُعرِّف تعليمة توجيه إلى تفاصيل التدوينة في ملف app.js، وسنحصل على مُعرِّف التدوينة كمعامل (parameter) ثم نُمرِّر البيانات إلى article-detail.template. 

this.get('#/article/:id', function(context) {
  this.item = this.items[this.params['id']];
  if (!this.item) { return this.notFound(); }
  this.partial('templates/article-detail.template');
});

وبشكلٍ شبيه، يمكننا إنشاء صفحة ثابتة باسم «about» ونعرضها عبر قالب about.template. 

this.get('#/about/', function(context) {
    var str=location.href.toLowerCase();
    context.app.swap('');
    context.render('templates/about.template', {})
           .appendTo(context.$element());
});

لقد نسينا أهم خطوة، ألا وهي تهيئة التطبيق باستخدام app.run()‎ حيث يمكنك تحديد مكان التوجيه الافتراضي لتطبيقك. إذا أردتَ أن تفتح صفحة about أولًا فيمكنك أن تكتب: 

$(function() {
  app.run('#/about/');
});

إذا أردتَ إجراء بعض العمليات قبل استدعاء كل تعليمة توجيه، فيمكنك استخدام الدالة before()‎. سنُجري في الأسطر الآتية تعديلاتٍ على قائمة التنقل (nav) اعتمادًا على مسار التوجيه الحالي: 

this.before('.*', function() {
     var hash = document.location.hash;
     $("nav").find("a").removeClass("current");
     $("nav").find("a[href='"+hash+"']").addClass("current");
});

الخلاصة

هذا درسٌ بسيطٌ جدًا لكي تأخذ فكرة عن كيفية عمل تطبيق ذي صفحةٍ وحيدةٍ باستخدام jQuery. يمكنك الآن المضي قدمًا وإنشاء تطبيقات ذات صفحة وحيدة. إحدى الأشياء التي عليك أن تأخذها بعين الاعتبار هي أنَّك ستحتاج إلى خادوم ويب لتشغيل التطبيق، ويمكنك أيضًا تجربة متصفح Firefox، لأنَّ متصفح Chrome يحجب طلبيات Ajax لأيّة بروتوكولات ما عدا http://‎ أو https://‎، لذا إذا كنتَ ستُشغِّل هذا السكربت على جهازك المحلي فلن يعمل لأنَّ مسارات الملفات المحلية تبدأ بالسابقة file://‎.
ترجمة –وبتصرّف– للمقال Single Page Apps with jQuery Routing لصاحبه Arkaprava Majumder

]]>403Thu, 29 Dec 2016 12:40:55 +0000كيفية إنشاء تحريكات مشابهة لتلك التي في Windows 8 باستخدام CSS3 و jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AA%D8%AD%D8%B1%D9%8A%D9%83%D8%A7%D8%AA-%D9%85%D8%B4%D8%A7%D8%A8%D9%87%D8%A9-%D9%84%D8%AA%D9%84%D9%83-%D8%A7%D9%84%D8%AA%D9%8A-%D9%81%D9%8A-windows-8-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css3-%D9%88-jquery-r243/

رغم أنّ تحويلات CSS3 ثلاثية الأبعاد صار لها فترةً لا بأس بها من الزمن، إلّا أنّني اكتشفت عدم امتلاك الخبرة الكافية للعمل معها بعد. أستخدم Windows 8 منذ فترة من الوقت، ومن أوّل الأمور التي لفتت نظري كانت الانتقالات transitions والتحريكات animations المبنية ضمن لوح البداية Start Dashboard، لذلك خطرت ببالي فكرة رائعة، وهي لماذا لا تكون خبرتي الأولى مع تحويلات CSS3 ثلاثية البعد ببناء تطبيق يماثل في سلوكه تلك التحريكات والتأثيرات في Windows 8؟ وهذا ما حدث في هذا الدرس.

windows8-animation-css3-jquery.thumb.png

سأستخدم خصائص CSS بدون أي بادئة prefix وذلك بغرض الاختصار، لكنك ستجد الخصائص كاملة ضمن النص المصدري للمشروع على Github. ستعمل مقاطع الشيفرة التي ستجدها هنا على متصفحات تدعم خصائص CSS المستخدمة.

الرماز The Markup

بنية هذا التطبيق بسيطة: يتكون لوح البداية من قائمة من القطع tiles بثلاثة قياسات وهي الصغير، الكبير، والكبير جدًا. لكل قطعة من هذه القطع صفحة page مرتبطة معها. والصفحة عبارة عن تغطية overlay تظهر عند النقر على إحدى القطع في لوح البداية. سنعتبر الصفحة أنّها تُحاكي تطبيق سطح مكتب في Windows 8، فتكون القطعة كما هو واضح اختصارًا له (للصفحة).

عند النقر على قطعة ستُفتح الصفحة الموافقة لها. يوجد نوعان من الانتقالات للصفحة بعد فتحها يدعمهما اللوح في Windows 8. يفتح أحدهما الصفحة بتأثير دوران ثلاثي الأبعاد اعتبارًًا من يمين الشاشة، أمّا الآخر فتنزلق فيه الصفحة من وإلى اليسار. سنعرّف صنف CSS لكل نوع من نوعيّ الصفحة، حيث سيكون الصنف s-page للصفحات التي تنزلق من وإلى اليسار، أمّا الصنف r-page فسيكون للصفحات التي تدور من اليمين.

ينبغي علينا من أجل كل قطعة تعيين نوع الصفحة التي ستفتحها القطعة (بالاعتماد على التأثير الذي نريده من أجل هذه الصفحة). سنعرّف نوع الصفحة لكلّ قطعة باستخدام سمة attribute مخصّصة سنسميها data-type-page، ستهتم هذه الـسمة بتطبيق أسماء أصناف CSS الصحيحة التي ستفعّل التحريكات المناسبة فيما بعد.

يجب أن يكون لكل صفحة اسم. سيختلف اسم الصفحة لتطبيق معيّن عن اسم الصفحة لتطبيق آخر، فمثلًا الـقطعة المسمّاة Skype ستفتح صفحة اسمها skype-app وهكذا دواليك. لقد استخدمت اسميّ صفحة فقط في هذا المثال، وقد كرّرتهما من أجل جميع الـقطع الباقية بغرض التبسيط، كما استخدمت الاسم custom-page لآخر قطعة وذلك على سبيل المثال. ربما تحتاج أن تضيف صفحة مختلفة لكل قطعة، وهذا يعني اسم صفحة مختلف لكلٍّ منها. 

إليك الرماز الخاص بكامل اللوح (الـقطع والصفحات):

<div class="demo-wrapper"> 
  <div class="s-page random-restored-page"> 
    <div class="page-content"> 
      <h2 class="page-title">Some minimized App</h2> 
      <div class="close-button s-close-button">x</div> 
    </div> 
  </div> 

  <div class="s-page custom-page"> 
    <div class="page-content"> 
      <h2 class="page-title">Thank You!</h2> 
      <div class="close-button s-close-button">x</div> 
    </div> 
  </div> 

  <div class="r-page random-r-page"> 
    <div class="page-content"> 
      <h2 class="page-title">App Screen</h2> 
      <p>Chew iPad power cord chew iPad power cord attack feet chase mice leave dead animals as gifts and stick butt in face chew iPad power cord. Chase mice. Run in circles use lap as chair why must they do that. Intrigued by the shower destroy couch leave hair everywhere sleep on keyboard chew iPad power cord. Use lap as chair. Missing until dinner time stand in front of the computer screen, intently sniff hand. Find something else more interesting. Destroy couch play time so inspect anything brought into the house hate dog burrow under covers. Sleep on keyboard destroy couch so hate dog so hide when guests come over. Chase mice destroy couch lick butt throwup on your pillow use lap as chair yet intrigued by the shower but climb leg. Stare at ceiling make muffins or hunt anything that moves claw drapes. Intently sniff hand intrigued by the shower. Why must they do that. Cat snacks leave dead animals as gifts or inspect anything brought into the house sweet beast so stare at ceiling give attitude. Flop over claw drapes but sun bathe lick butt, and chase mice. Rub face on everything lick butt leave hair everywhere lick butt, missing until dinner time for use lap as chair lick butt. Make muffins leave dead animals as gifts play time. Chew foot intrigued by the shower stare at ceiling inspect anything brought into the house yet hopped up on goofballs. Hunt anything that moves intently sniff hand for hunt anything that moves play time. Chew foot climb leg throwup on your pillow so lick butt yet make muffins hate dog. Intrigued by the shower. Intently sniff hand shake treat bag. Cat snacks burrow under covers make muffins but all of a sudden go crazy find something else more interesting. Flop over chase mice. Give attitude. Inspect anything brought into the house. Stick butt in face sun bathe so find something else more interesting and intrigued by the shower. Rub face on everything use lap as chair. Under the bed claw drapes chase mice but leave hair everywhere yet make muffins yet claw drapes. Use lap as chair. Find something else more interesting stretch for under the bed. Nap all day intrigued by the shower, hate dog sweet beast intently sniff hand so hate dog nap all day. Swat at dog hide when guests come over and mark territory chase mice for cat snacks. Use lap as chair. Lick butt throwup on your pillow need to chase tail. Mark territory. Stick butt in face shake treat bag yet hunt anything that moves, yet hopped up on goofballs yet stare at ceiling under the bed. Give attitude chase imaginary bugs stretch so hunt anything that moves so hide when guests come over but intrigued by the shower find something else more interesting. Make muffins behind the couch for chew foot. Sweet beast flop over but throwup on your pillow. Intently sniff hand use lap as chair and missing until dinner time and chase imaginary bugs. </p> 
    </div> 
    <div class="close-button r-close-button">x</div> 
  </div> 

  <div class="dashboard clearfix"> 
    <ul class="tiles"> 
      <div class="col1 clearfix"> 
        <li class="tile tile-big tile-1 slideTextUp" data-page-type="r-page" data-page-name="random-r-page"> 
          <div><p>This tile's content slides up</p></div> 
          <div><p>View all tasks</p></div> 
        </li> 

        <li class="tile tile-small tile tile-2 slideTextRight" data-page-type="s-page" data-page-name ="random-restored-page"> 
          <div><p class="icon-arrow-right"></p></div> 
          <div><p>Tile's content slides right. Page opens from left</p></div> 
        </li> 

        <li class="tile tile-small last tile-3" data-page-type="r-page" data-page-name="random-r-page"> 
          <p class="icon-calendar-alt-fill"></p> 
        </li> 

        <li class="tile tile-big tile-4" data-page-type="r-page" data-page-name="random-r-page"> 
          <figure> 
            <img src="images/blue.jpg" /> 
            <figcaption class="tile-caption caption-left">Slide-out Caption from left</figcaption>
          </figure> 
        </li> 
      </div> 

      <div class="col2 clearfix"> 
        <li class="tile tile-big tile-5" data-page-type="r-page" data-page-name="random-r-page"> 
          <div><p><span class="icon-cloudy"></span>Weather</p></div> 
        </li> 

        <li class="tile tile-big tile-6 slideTextLeft" data-page-type="r-page" data-page-name="random-r-page"> 
          <div><p><span class="icon-skype"></span>Skype</p></div> 
          <div><p>Make a Call</p></div> 
        </li> 

        <li class="tile tile-small tile-7 rotate3d rotate3dX" data-page-type="r-page" data-page-name="random-r-page"> 
          <div class="faces"> 
            <div class="front"><span class="icon-picassa"></span></div> 
            <div class="back"><p>Launch Picassa</p></div> 
          </div> 
        </li> 

        <li class="tile tile-small last tile-8 rotate3d rotate3dY" data-page-type="r-page" data-page-name="random-r-page"> 
          <div class="faces"> 
            <div class="front"><span class="icon-instagram"></span></div>
            <div class="back"><p>Launch Instagram</p></div> 
          </div> 
        </li> 
      </div> 

      <div class="col3 clearfix"> 
        <li class="tile tile-2xbig tile-9" data-page-type="custom-page" data-page-name="random-r-page"> 
          <figure> 
            <img src="images/summer.jpg" /> 
            <figcaption class="tile-caption caption-bottom">Fixed Caption: Some Subtitle or Tile Description Goes Here with some kinda link or anything 
          </figure> 
        </li> 

        <li class="tile tile-big tile-10" data-page-type="s-page" data-page-name="custom-page"> 
          <div><p>Windows-8-like Animations with CSS3 & jQuery © Sara Soueidan. Licensed under MIT.</p></div>
        </li> 
      </div> 
    </ul> 
  </div>
</div>

حصلت على خط الأيقونة الذي استخدمته من Icomoon.

الذي سيحدث الآن: ستحصل JavaScript على اسم ونوع الصفحة المراد فتحها عند نقر القطعة، وبعد ذلك، ووفقًا لنوع الصفحة ستعمل JavaScript على تطبيق أسماء أصناف CSS المناسبة على الصفحة (والتي سنحصل على اسمها أيضًا من السمة data-page-name) لفتحها بنمط تحريك معيّن لكل صنف CSS يتم تطبيقه.

تنسيقات CSS

أرجو ملاحظة أنّني أستخدم أنماط تنسيق تراعي الأجهزة المحمولة أولًا mobile-first، والتي سنجعلها لاحقًا ذات استجابية responsive عالية ضمن قسم استعلامات الوسائط media queries في CSS.

سنتناول في البداية التنسيقات الخاصة بالحاوية (عنصر div) والتي ستحوي كامل المثال التوضيحي. سنعرّف تنسيقات عامّة ونتأكّد من ضبط الخاصية perspective بحيث يؤدي ذلك إلى تفعيل الفضاء ثلاثي البعد 3D، وإلّا سيبدو كامل المثال بشكل منبسط أي ثنائي البعد 2D.

.demo-wrapper { 
  padding: 2em .5em; 
  width: 100%; height:100%; 
  perspective: 3300px; 
  position: relative; 
}

لنبدأ الآن بتنسيقات وتحريكات لوح البداية. 

ستُنفَّذ أوّل تحريكة سنطبّقها على لوح البداية عند تحميل الصفحة ضمن متصفّح الويب. سيكون لوح البداية مخفيًّا في يمين الشاشة بادئ الأمر، ثمّ يظهر تدريجيًّا مع الانتقال إلى موقعه الأساسي عند تحميل الصفحة.

.dashboard { 
  margin: 0 auto; 
  width: 100%; 
  padding: 1em; 
  transform: translateX(200px); 
  opacity:0; 
  animation: start 1s ease-out forwards; 
} 

@keyframes start{   
  0%{ transform: translateX(200px); opacity:0; } 
  50%{ opacity:1; } 
  100%{ transform: translateX(0); opacity:1; } 
}

يتضاءل لوح البداية ويختفي عند نقر قطعة منه. حيث ينتقل اللوح على طول محور z، ويتضاءل حجمه، كما تنخفض قيمة الخاصية opacity له تدريجيًا حتى تصبح في النهاية تساوي الصفر مما يعطي شعورًا بأنّ اللوح يختفي بالتدريج. أمّا عندما يُغلق المستخدم الصفحة فإنّ لوح البداية يعود للظهور مرّة أخرى.

بالنسبة للأعمدة الثلاثة في لوح البداية فإنّها تظهر تدريجيًّا واحدًا تلو الآخر مع تأخير زمني طفيف بينها. عندما تُغلق الصفحة، سيُضاف اسم صنف CSS لكل عمود (بواسطة JavaScript) وكل من هذه الأصناف ستُفعّل تحريكة بتأخير زمني مُحدّد. 

فيما يلي أصناف CSS والتحريكات المطبّقة على لوح البداية عند نقر القطع tiles وإغلاق الصفحات.

.fadeOutback{ 
  animation: fadeOutBack 0.3s ease-out 1 normal forwards; 
} 

.fadeInForward-1, .fadeInForward-2, .fadeInForward-3 { 
  opacity:0; 
  transform: translateZ(-5em) scale(0.75); 
  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards; 
} 

.fadeInForward-2{ 
  animation-delay: .55s; 
} 

.fadeInForward-3{ 
  animation-delay: .7s; 
} 

@keyframes fadeOutBack{  
  0% {transform: translateX(-2em) scale(1); opacity:1;} 
  70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;} 
  95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;} 
  100% {transform: translateZ(-5em) scale(0); opacity:0;} 
} 

@keyframes fadeInForward{  
  0% {transform: translateZ(-5em) scale(0); opacity:0;} 
  100% {transform: translateZ(0) scale(1); opacity:1;} 
}

وبالنسبة لتنسيقات الصفحات:

.r-page { 
  width: 100%; height: 100%; 
  text-align: center; font-size: 2em; font-weight: 300; 
  position: absolute; 
  right: 0; top: 0; left:0; bottom:0; 
  opacity: 0; 
  color: white; 
  z-index: 10; 
  padding:10px; 
  transform-origin: 100% 0%; 
  transform: rotateY(-90deg) translateZ(5em) 
} 

.s-page { 
  color: white; 
  z-index: 10; 
  text-align: center; font-size: 2em; font-weight: 300; 
} 

.page-content{ 
  overflow-y:auto; 
  max-height:100%; 
  font-size:.6em; 
  padding:.6em; 
  text-align:left; 
} 

.s-page, .r-page{ 
  background-color: white; 
  color:black; 
} 

.page-title { 
  margin: .25em 0; 
  font-weight: 100; font-size: 3em; text-align:center; 
} 

.close-button { 
  font-size: 1.5em; 
  width: 1em; height: 1em; 
  position: absolute; 
  top: .75em; right: .75em; 
  cursor: pointer; 
  line-height: .8em; text-align: center 
}

لقد ضبطت الموقع الأصلي لكل صفحة من النوع r-page في الفضاء ثلاثي البعد بتدويرها حول محور التراتيب (محور y) بعد ذلك نقل الصفحة بمقدار 5em إلى يسار الشاشة باستخدام الخاصية translateZ (النقل على محور z). ينبغي ألّا ننسى أنّه عند تحويل (نقل – تدوير) عنصر في الفضاء ثلاثي البعد فمن الضروري تحويل نظام الإحداثيات الخاص به بنفس الصورة. الذي نريده الآن هو نقل الصفحة بمقدار 5em إلى يسار الشاشة، ولكن لاحظ أنّنا بدلًا من استخدام translateX استخدمنا translateZ، ويعود سبب ذلك إلى أنّه بعد التحويل الأوّل (الدوران حول محور y) يدور نظام الإحداثيات أيضًا، وهكذا يُشير محور z في هذه الحالة إلى اليسار وليس إلى الأعلى، أمّا محور الفواصل (محور x) فسيشير باتجاه المستخدم.

يكون لجميع الصفحات باستثناء النوع s-page نفس موقع البداية في الفضاء ثلاثي البعد. بالنسبة للصفحات من النوع s-page فإنّها تكون بموقع يبعد بما يُعادل -150% يسار الشاشة (واضح أنّها لن تكون مرئية بهذه الحالة)، بحيث أنّها تنزلق لتعود إلى الشاشة عند تفعيل التحريكة الخاصة بها.

عند نقر قطعة مرتبطة بصفحة ما، فسيُضاف صنف CSS الموافق بواسطة JavaScript إلى الصفحة، بالنتيجة ستحصل الصفحة على اسم صنف CSS يُعرّف التأثير ثلاثي البعد الواجب تطبيقه عليها.

فيما يلي أسماء أصناف CSS التي تُفعّل عملية فتح وإغلاق الصفحات، بالإضافة إلى التحريكات المعرّفة من أجل كل صنف.

.openpage{ 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
} 

.slidePageLeft{ 
  transform: rotateY(0) translateZ(0); 
  opacity: 1; 
  animation:slidePageLeft .8s ease-out 1 normal forwards; 
} 

.slidePageInFromLeft{ 
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards; 
} 

.slidePageBackLeft{ 
  opacity: 1; 
  left: 0; 
  animation: slidePageBackLeft .8s ease-out 1 normal forwards; 
}

لاحظ أنّني أستخدم الخاصية animation بالشكل المختصر. تعود القيمة الأخيرة forward ضمن الخاصية animation إلى الخاصيّة الفرعية animation-fill-mode، وهذه القيمة ضرورية لها، وإلّا ستعود الصفحة إلى حالتها الابتدائية (المغلقة) فور انتهاء التحريكة التي ستُظهر الصفحة. إذًا لكي نُبقي الصفحة مفتوحة، ولكي نكون قادرين على إنشاء تحريكات متلاحقة، يجب على العنصر أن يبقى مُحتفظًا بحالته النهائية المعرّفة ضمن تحركية ما، ومن هذه "الحالة النهائية" يبدأ عمل التحريكة التالية، وهكذا.

فيما يلي التحريكات لأصناف CSS المطبّقة على الصفحات.

@keyframes rotatePageInFromRight{ 
  0% {transform:rotateY(-90deg) translateZ(5em);opacity:0} 
  30% {opacity:1} 
  100% {transform: rotateY(0deg) translateZ(0) ; opacity:1} 
} 

@keyframes slidePageLeft{  
  0% {left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1} 
  70% {opacity:1;} 
  100% {opacity:0; left:-150%; transform: rotateY(0deg)} 
} 

@keyframes slidePageInFromLeft{   
  0% {opacity:0; } 
  30% {opacity:1} 
  100% {opacity:1; left:0;} 
} 

@keyframes slidePageBackLeft{   
  0% {opacity:1; left:0; transform: scale(0.95);} 
  10% {transform: scale(0.9);} 
  70% {opacity:1;} 
  100% {opacity:0; left:-150%;} 
}

أخيرًا وليس آخرًا، سنُنسّق قطع لوح البداية ونُعرّف الانتقالات والتحريكات المطبّقة عليها عند تحريك مؤشّر الفأرة فوقها. لاحظ أنّ التنسيقات العامّة تُعرّف حجم القطع.

.tile{ 
  float: left; 
  margin: 0 auto 1%; 
  color: white; 
  font-size: 1.3em; text-align: center; height: 8em; font-weight: 300; 
  overflow: hidden; 
  cursor: pointer;  
  background-color: #fff; 
  color: #333; 
  position:relative; 
  transition: 
  background-color 0.2s ease-out 
} 

.tile-2xbig{ 
  height:16.15em; 
  width:100%; 
} 

.tile-big { 
  width: 100% 
} 

.tile-small { 
  width: 49%; 
  margin-right: 2% 
} 

.tile-small.last { 
  margin-right: 0 
}

سيحتوي زوج من القطع على صورة مع عنوان لها، هاتان القطعتان ستحصلان على الصنف fig-tile وذلك لتمييز نوعهما في شيفرة JavaScript التي سنراها لاحقًا.

سنحصل على الألوان المستخدمة من أجل النص والخلفية لصفحة ما من الألوان المستخدمة في العنوان، لذلك لا تنسى أن تُعرّفهم. بالنسبة للعنوان إمّا أن يكون ثابتًا أو أن يُعطي شعورًا بالانزلاق عندما يتحرك فوقه مؤشّر الفأرة:

.tile-caption{ 
  position:absolute; 
  z-index:1; 
  background-color: #455962; 
  color:#fff; 
  font-size:1em; 
  padding:1em; 
  text-align: left; 
} 

.caption-bottom{ 
  left:0; bottom:0; right:0; 
  height:40%; 
} 

.caption-left{ 
  left:-100%; top:0; bottom:0; 
  width:40%; 
  transition: left .3s linear; 
} 

.tile:hover .caption-left{ 
  left:0; 
}

بالنسبة للقطع النظامية regular tiles التي لا تملك أي نوع من التحريك، فستغيّر لون خلفيّتها ولون النص عند تحريك الفأرة فوقها. لكي نتأكّد من أنّ النص مُوسّط عموديًا vertically centered في كل قطعة، سنضع في كل قطعة عنصر div يحوي بدوره عنصر فقرة (العنصر <p>) يحوي النص. سنستخدم القيمة table-cell للخاصية display وذلك لتوسيط النص عموديًا ضمن الفقرة:

.tile div{ 
  position:absolute; 
  top:0; left:0; right:0; bottom:0; 
  width:100%; height:100%; 
  text-align:center; 
  display:table; 
  padding:0 1em; 
  transition: all .3s ease; 
} 

.tile div p{ 
  display:table-cell; 
  vertical-align:middle; 
}

سنترك الحديث عن أنماط التنسيق العامّة للقطع بهدف الاختصار، ولكن ينبغي علينا التأكّد من أنّنا سنعيّن لون النص والخلفية لجميع القطع، حتى تلك التي ستُغطّى بصورة، لأنّ هذه الألوان التي سنحصل عليها باستخدام JavaScript ستُستخدَم لضبط الألوان في الصفحة المرتبطة بها كما أشرنا قبل قليل. دعونا الآن نتحدّث عن التحريكات والانتقالات التي تحدث على قطعة ما.

ستحتوي القطع المزوّدة بنص منزلق على عنصري div، سيبدو كل عنصر div كوجه أو كتلة منفصلة داخل القطعة. سيكون تموضعًا عنصريًا div مطلقًا positioned absolutely وسيتحرّكان عند تحرّك الفأرة فوقهما وذلك وفقًا لاتجاه الانزلاق المطلوب. فلكي ينزلق نص القطعة إلى الأعلى عندما يحوم مؤشّر الفأرة فوقه سنطبّق الصنف slideTextUp:

.slideTextUp div:nth-child(2){ 
  top:100%; 
} 

.slideTextUp:hover div{ 
  transform: translateY(-100%); 
} 

.tile-1 p{ 
  font-size:1.3em; 
}

وبشكل مماثل ولكي ينزلق نص القطعة إلى اليسار وإلى اليمين سنطبّق الصنفين slideTextLeft و slideTextRight على الترتيب.

.slideTextRight div:first-child{ 
  left:-100%; 
} 

.slideTextRight:hover div{ 
  transform: translateX(100%); 
} 

.slideTextLeft div:nth-child(2){ 
  left:100%; 
} 

.slideTextLeft:hover div{ 
  transform: translateX(-100%); 
}

أمّا بالنسبة لزوج القطع التي ستنقلب، فسيكون لهما تأثير مختلف عندما يحوم مؤشّر الفأرة فوقهما، فهما يدوران ليُظهران الوجه الخلفي. يُعتبر هذا التأثير نوعًا بسيطًا جدًا من تأثير "انقلاب البطاقة" card flip. لن نخوض في تفاصيل هذا التأثير.

لإنجاز هذا التأثير، سنطبّق الصنف rotate3d إلى القطعة التي نريد أن تنقلب. بالنسبة للقطعة التي نريد أن تنقلب عموديًّا، سنطبّق الصنف rotate3dy، أمّا بالنسبة للانقلاب الأفقي سنطبّق الصنف rotate3dx (مع الانتباه إلى وجوب وجود الصنف rotate3d في كلتا الحالتين). انظر إلى تنسيقات CSS التالية:

.rotate3d{ 
  perspective: 800px; 
  overflow: visible; 
}             

.faces{ 
  transform-style: preserve-3d; 
  transition: transform 1s; 
} 

.faces div { 
  display: block; 
  position: absolute; 
  top:0; left:0; right:0; bottom:0; 
  width: 100%; height: 100%; 
  backface-visibility: hidden; 
}

لاحظ بأنّه عند تحريك مؤشّر الفأرة فوقهما بالتتالي، فسيظهر وجه أحدهما في حين ستظهر خلفية الآخر بنفس الوقت.

.rotate3dY .back{ 
  transform: rotateY( 180deg ); 
} 

.rotate3dX .back{ 
  transform: rotateX( 180deg ); 
}

وعندما يحوم مؤشّر الفأرة فوق القطعة فإنّ أي عنصر div يخضع للصنف faces. سيُدوّر ليُظهر وجهه الخلفي:

.rotate3dY:hover .faces:hover{ 
  transform: rotateY( 180deg ); 
} 

.rotate3dX:hover .faces:hover{ 
  transform: rotateX( 180deg ); 
}

لتنسيق القطع في الدوران ثلاثي البعد، ينبغي الانتباه إلى ضبط لوني الخلفية والنص للوجه الأمامي (ذو الصنف front.) بحيث يمكن الحصول على هذين اللونين واستخدمهما لاحقًا في الصفحة المتربطة بالقطعة عند فتحها.

لنعرّف الآن تنسيقات تفاعلية للوح Dashboard. ستكون أعمدة اللوح ذات عرض كامل على الشاشات الصغيرة في البداية (تذكّر أنّنا نراعي متطلبات تصميم الأجهزة المحمولة أولًا mobile-first)، في حين أنّ هذه الأعمدة ستكون بجانب بعضها البعض في الشاشات الكبيرة.

.col1, .col2, .col3 { 
  width: 99%; 
  margin: 1em auto 
} 

@media screen and (min-width: 43.75em) {  
  .col1, .col2, .col3 { 
    float: left; 
    margin-right: 1%; 
    width: 49% 
  } 

  .page-title{ 
    font-size:2.5em; 
  } 

  .page-content{ 
    font-size:1em; 
  } 

  .close-button{ 
    font-size:2em; 
  } 
} 

@media screen and (min-width: 64em) {   
  .col1, .col2, .col3 { 
    float: left; 
    margin-right: .5%; 
    width: 31% 
  } 

  .col3 { 
    margin-right: 0 
  } 

  .col1 { 
    margin-left: 2em 
  } 

  .page-title{ 
    font-size:3.5em; 
  } 
}

جافا سكريبت JavaScript

ستُعالَج جميع أحداث النقر عن طريق JavaScript. سنستخدم مكتبة jQuery لهذه الغاية، وسنضبط معالج حدث event handler النقر لكل قطعة على لوح البداية، فعندما ينقر المستخدم على قطعة ما، يعمل معالج حدث النقر الموافق على الحصول على اسم ونوع الصفحة المرتبطة بهذه القطعة وذلك من السمتين data-page-name و data-page-type على الترتيب، حيث سنستخدم هذه المعلومات لفتح الصفحة المطلوبة.

أمّا عند إغلاق الصفحة عند النقر زر الإغلاق لها، فسيعمل معالج حدث النقر لهذا الزر على تطبيق أسماء الأصناف المناسبة لإغلاق الصفحة.

بالإضافة لذلك، ولكي نُكسِب كل صفحة لون خلفية ولون نص مماثل لتلك التي للقطعة المرتبطة بها، فإنّنا سنطوف بدايةً على جميع القطع، ونحصل على ألوانها، ثمّ نُطبّق هذه الألوان على الصفحات المرتبطة معها. في حال كان لقطعة ما الصنف rotate3d، فإنّنا سنبحث عن لون الخلفية لوجه face القطعة، ومن ثمّ نطبّق هذا اللون على الصفحة المرتبطة معها.

function(){ 
  $('.tile').each(function(){ 
    var $this= $(this), 
        page = $this.data('page-name'), 
        bgcolor = $this.css('background-color'), 
        textColor = $this.css('color');
 
    if($this.hasClass('rotate3d')) { 
      frontface = $this.find('.front'); 
      bgcolor = frontface.css('background-color'); 
      textColor = frontface.css('color'); 
    } 

    if($this.hasClass('fig-tile')) { 
      caption = $this.find('figcaption'); 
      bgcolor = caption.css('background-color'); 
      textColor = caption.css('color'); 
    } 

    $this.on('click',function(){ 
      $('.'+page).css({'background-color': bgcolor, 'color': textColor}) .find('.close-button').css({'background-color': textColor, 'color': bgcolor}); 
    }); 
  }); 

  function showDashBoard(){ 
    for(var i = 1; i <= 3; i++) { 
      $('.col'+i).each(function(){ 
        $(this).addClass('fadeInForward-'+i).removeClass('fadeOutback'); 
      }); 
    } 
  } 

  function fadeDashBoard(){ 
    for(var i = 1; i <= 3; i++) { 
      $('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i); 
    } 
  } 

  $('.tile').each(function(){ 
    var $this= $(this), 
        pageType = $this.data('page-type'), 
        page = $this.data('page-name'); 

    $this.on('click',function(){ 
      if(pageType === "s-page"){ 
        fadeDashBoard(); 
        $('.'+page).addClass('slidePageInFromLeft').removeClass('slidePageBackLeft'); 
      } 
      else{ 
        $('.'+page).addClass('openpage'); 
        fadeDashBoard(); 
      } 
    }); 
  }); 

  $('.r-close-button').click(function(){ 
    $(this).parent().addClass('slidePageLeft') .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
      $(this).removeClass('slidePageLeft').removeClass('openpage'); 
    }); 
    showDashBoard(); 
  }); 

  $('.s-close-button').click(function(){ 
    $(this).parent().removeClass('slidePageInFromLeft').addClass('slidePageBackLeft'); 
    showDashBoard(); 
  }); 
})();

وبهذا نكون قد وصلنا إلى نهاية الدرس. أرجو أن يكون ممتعًا ومفيدًا.

بإمكانك استعراض مثال حيّ لهذا الدّرس من هنا. 

أما الشيفرة المصدرية فهي مُتوفّرة في هذا المُستودع.

ترجمة -وبتصرّف- للمقال How to Create Windows-8-like animations with CSS3 and JQuery لصاحبته Sara Soueidan.

]]>243Sun, 17 Jan 2016 16:04:21 +0000جداول html ذات رأسية وأعمدة ثابتة باستخدام jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D8%AC%D8%AF%D8%A7%D9%88%D9%84-html-%D8%B0%D8%A7%D8%AA-%D8%B1%D8%A3%D8%B3%D9%8A%D8%A9-%D9%88%D8%A3%D8%B9%D9%85%D8%AF%D8%A9-%D8%AB%D8%A7%D8%A8%D8%AA%D8%A9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-jquery-r151/

رؤوس الجداول الثابتة ليست بالأمر الجديد في مواقع الويب. على عكس الورق، حيث يستطيع القارئ نقل نظره بسرعة إلى أعلى الشاشة ليعرف في أي عمود هو، لكن أبعاد الشاشة تجعل من قراءة الجداول الطويلة أمر صعبا.

sticky-headers-jquery_(1).thumb.png.371a

رؤوس الجداول الثابتة، كما يشير اسمها، تبقى ثابتة في أعلى الجدول حتى وإن نزلنا أكثر في الجدول. يساعد الأمر في إبقاء أسماء الأعمدة دوما في متناول اليد، حتى لا يجبر المستخدم على الرجوع إلى أعلى الجدول كل مرة من أجل النظرة ثم الرجوع مجددا.

يوجد العديد من سكربتات وإضافات jQuery التي تعمل بطريقة فعالة وخالية من الأخطاء، فهم ليسوا الحل المثالي لجميع المشاكل الممكنة، ففي بعض الحالات، على الجداول أن تتبع قواعد هيكلة لم تحسب لها الإضافات حساب، كالجداول التي تسمح بإظهار مؤشر التحرك (scroll bar) عندما لا تكفي المساحة لإظاهر الجدول.

هذا المقال لن يكون الحل المثالي لجميع المواقف، ولكنه سيكون حلا لأغلب المشاكل الشائعة.

حل باستخدام CSS فحسب عبر position: sticky؟

تملك CSS حلا مناسبا لهذه المشكلة وهو عبر استخدام postion: sticky. لكن للأسف، الحل غير مدعوم في chrome رغم أنه كان مدعوما سابقا، إلا أنّ فريق التطوير قام بإلغاء الخاصية تماما منه إلى أجل غير معلوم. ولأننا لا نستطيع التضحية بكل مستخدمي متصفح chrome فعلينا إيجاد حل بديل للمشكلة.

حل عبر استخدام jQuery

حل jQuery هو بسيط جدا، لكن قبل أن نبدأ باستخدام، علينا أن نلقي نظرة على كيف يكون جدول ما صحيحا من حيث الهيكلة:

<table>
    <thead>
        <tr>
            <th></th>
            <!-- more columns are possible -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <!-- more columns are possible -->
        </tr>
        <!-- more rows are possible -->
    </tbody>
    <tfoot><!-- هذا الجزء اختياري -->
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

ما الذي نحاول تحقيقه؟

سنحاول جعل السكربت يدعم أغلب المشاكل الشائعة والتي هي:

  • الاستخدام الأساسي: رأس الجدول يكون ثابتا.
  • رؤوس الجداول الأفقية والعمودية.
  • الجداول العريضة:
    • العمود الأفقي: إذا كان هنالك العديد من الأعمدة التي لا يمكن إظهارها في عرض الصفحة، فسنستخدم عمودا جانبيا ثابتا.
    • الصف العمودي: وهو الاستخدام الأساسي، أن يكون الرأس العلوي ثابتا عند النزول بالجدول.
    • كلا العمودين: حيث نثبت كل من العمود والصف.

CSS من أجل البدء

رغم أننا سنستخدم حلاّ عبر جافاسكربت، فإن CSS ضرورية من أجل تنفيذ الأمر:

.sticky-wrap {
    overflow-x: auto;
    position: relative;
    margin-bottom: 1.5em;
    width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .125s ease-in-out;
    z-index: 50;
    width: auto; /* Prevent table from stretching to full size */
}
    .sticky-wrap .sticky-thead {
        box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
        z-index: 100;
        width: 100%; /* Force stretch */
    }
    .sticky-wrap .sticky-intersect {
        opacity: 1;
        z-index: 150;
    }
    .sticky-wrap .sticky-intersect th {
        background-color: #666;
        color: #eee;
    }
.sticky-wrap td,
.sticky-wrap th {
    box-sizing: border-box;
}

ملاحظة: من المهم جدا نقل كل CSS الخاصة بوسم <table> إلى sticky-wrap. هذا حتى يتاح لنا التحكم بها مباشرة عبر jQuery.

لنقل أنك تملك CSS التالي:

table {
    margin: 0 auto 1.5em;
    width: 75%;
}

كل ما عليك فعله ببساطة هو نقلها إلى sticky-wrap. :

.sticky-wrap {
    overflow-x: auto; /* Allows wide tables to overflow its containing parent */
    position: relative;
    margin: 0 auto 1.5em;
    width: 75%;
}

استخدام جافاسكربت

سوف نقوم بتنفيذ دالتنا على كل جدول موجود في الصفحة، الأهم من هذا سنتفقد إن كان الجدول يملك <thead> وإن كان هذا الأخير يحتوي على الأقل على <th> واحد. إن لم تتحق الشروط، فستتجاهل دالتنا هذا الجدول.

$(function () {
    // هنا نقوم باختيار جميع الجداول في الصفحة
    // لكنك حر بتحديد الجداول التي تريدها
    $('table').each(function () {
        if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
            // بقية السكربت تكون هنا
        }
    });
});

الخطوة 1: نسخ عنصر <thead>

// تحديد المتغيرات وبعض الاختصارات
    var $t     = $(this),
        $w     = $(window),
        $thead = $(this).find('thead').clone(),
        $col   = $(this).find('thead, tbody').clone();

الخطوة 2: تغليف الجدول ونسخه

من أجل دعم الحالات التي يكون فيها الجدول أعرض من ماهو مسموح (أي عندما يكون عندما عدد كبير من الأعمدة، أو أعمدة طويلة، فنحوي الجدول في <div> حتى نسمح لك بأن يكون scrollable على المحور الأفقي:

// احتواء الجدول
$t
.addClass('sticky-enabled')
.css({
    margin: 0,
    width: '100%';
})
.wrap('<div class="sticky-wrap" />');

// تفقد إن كنا قد حددنا بأن يكون الجدول قابلا للتمرير (scroll) على المحور الأفقي
if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

// صنع رأس جدول جديد بصنف .stiky-head
$t.after('<table class="sticky-head" />')

// إذا كان <tbody> يحتوي على <th> فنقوم بصنع عمود جديدة ليكون الخانة أعلى الجدول
if($t.find('tbody th').length > 0) {
    $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}
// اختصارات
var $stickyHead  = $(this).siblings('.sticky-thead'),
    $stickyCol   = $(this).siblings('.sticky-col'),
    $stickyInsct = $(this).siblings('.sticky-intersect'),
    $stickyWrap  = $(this).parent('.sticky-wrap');

الخطوة 3: وضع محتوى الجداول المنسوخة

ما سنقوم به الآن هو أخذ المحتوى المنسوخ من الجدول الأصلي ووضعه في الجداول الجديدة التي ستكون ملتصقة:

  1. رأس الجدول الجديد سيستلم كامل المحتوى من عنصر <thead> المنسوخ.
  2. الأعمدة الملتصقة ستستلم المحتوى من أول عنصر <th> من <thead> وكل عناصر <th> المتبقية من <tbody>.
  3. اندماج العمود مع الصف (أيّ الخانة المشتركة بين العمود والصف) ستأخذ محتوى من خلال أعلى خانة على يمين الجدول (بافتراض أننا نتعامل مع الصفحة على أساس RTL).
// StickyHead يحصل على المحتوى من <thead>

    $stickyHead.append($thead);

    $stickyCol
    .append($col)
        .find('thead th:gt(0)').remove()
        .end()
        .find('tbody td').remove();

    // StickyIntersect يحصل على المحتوى من <th> في <thead>

    $stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');

الخطوة 4: الدوال

هنا يأتي أهم جزء من السكربت الخاص بنا، سنحدد أيّ دوال يجب أن تنفذ من أجل أن يعمل السكربت بشكل صحيح:

  1. دالة من أجل تحديد عرض عناصر <th> في رأس الجدول المنسوخ، بما أننا نسخنا عنصر <thead> فحسب، فعرض رأس الصفحة المنسوخ الكلي لن يكون عرض رأس الصفحة الفعلي، لأن عرض <tbody> لم يتم إضافته حيث لا نعلم هل سيؤثر على رأس الصفحة أو لا.
  2. دالة من أجل تحديد مكان رأس الصفحة الثابت حتى نقوم بتحديث بُعد رأس الصفحة المنسوخ الأفقي، الذي قمنا بتحديد position: absolute عندما نبدأ بتمرير شريط التقدم داخل الجدول.
  3. دالة من أجل تحديد مكان العمود الجانبي الثابت ولها نفس حالة تثبيت رأس الصفحة.

  4. دالة من أجل حساب المساحة المتبقية وسنقوم بشرح هذه الدالة لاحقا بشكل أعمق.

        // Function 1: setWidths()
// Purpose: To set width of individually cloned element
var setWidths = function () {
        $t
        .find('thead th').each(function (i) {
            $stickyHead.find('th').eq(i).width($(this).width());
        })
        .end()
        .find('tr').each(function (i) {
            $stickyCol.find('tr').eq(i).height($(this).height());
        });


        // Set width of sticky table head
        $stickyHead.width($t.width());


        // Set width of sticky table col
        $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())


    },
// Function 2: repositionStickyHead()
// Purpose: To position the cloned sticky header (always present) appropriately
    repositionStickyHead = function () {
        // Return value of calculated allowance
        var allowance = calcAllowance();


        // Check if wrapper parent is overflowing along the y-axis
        if($t.height() > $stickyWrap.height()) {
            // If it is overflowing
            // Position sticky header based on wrapper's scrollTop()
            if($stickyWrap.scrollTop() > 0) {
                // When top of wrapping parent is out of view
                $stickyHead.add($stickyInsct).css({
                    opacity: 1,
                    top: $stickyWrap.scrollTop()
                });
            } else {
                // When top of wrapping parent is in view
                $stickyHead.add($stickyInsct).css({
                    opacity: 0,
                    top: 0
                });
            }
        } else {
            // If it is not overflowing (basic layout)
            // Position sticky header based on viewport scrollTop()
            if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {                 // When top of viewport is within the table, and we set an allowance later
                // Action: Show sticky header and intersect, and set top to the right value
                $stickyHead.add($sticktInsct).css({
                    opacity: 1,
                   top: $w.scrollTop() - $t.offset().top
                });
             } else {
                 // When top of viewport is above or below table
                 // Action: Hide sticky header and intersect
                 $sticky.add($stickInsct).css({
                     opacity: 0,
                     top: 0
                 });
             }
        }
    },
// Function 3: repositionStickyCol()
// Purpose: To position the cloned sticky column (if present) appropriately
    repositionStickyCol = function () {
        if($stickyWrap.scrollLeft() > 0) {
            // When left of wrapping parent is out of view
            // Show sticky column and intersect
            $stickyCol.add($stickyInsct).css({
                opacity: 1,
                left: $stickyWrap.scrollLeft()
            });
        } else {
            // When left of wrapping parent is in view
            // Hide sticky column but not the intersect
            // Reset left position
            $stickyCol
            .css({ opacity: 0 })
            .add($stickyInsct).css({ left: 0 });
        }
    },
// Function 4: calcAllowance()
// Purpose: Return value of calculated allowance
     calcAllowance = function () {
         var a = 0;


         // Get sum of height of last three rows
         $t.find('tbody tr:lt(3)').each(function () {
             a += $(this).height();
         });


         // Set fail safe limit (last three row might be too tall)
         // Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
         if(a > $w.height()*0.25) {
            a = $w.height()*0.25;
        }


        // Add height of sticky header itself
        a += $sticky.height();


        return a;
    };
}

والآن سنقوم بشرح ما قمنا به في الدالة الرابعة، نحن لا نريد من رأس الجدول أن يلحقنا إلى أسفل الجدول، فالأمر غير ضروري وقد يغطي لنا آخر سطر من الجدول، لذا من الضروري إبقاء مساحة فارغة في الأسفل.

حسب ما جربت، فقد اكتشفت أننا لا نحتاج لرأس الجدول عندما نصل لأخر 3 سطور من الجدول لأن تركيزنا انتقل على المحتوى الآن.

$t.find('tbody tr:lt(4)').each(function () {
    allowance += $(this).height();
});

الخطوة 5: ربط كل شيء

والآن قد انتهينا من تعريف كل الدوال اللازمة، كل ما تبقى هو ربط المتفقدات أو (Event handlers) مع عنصر(window)$.

  1. عندما يجهز الـDOM نقوم بالحسابات الأولية للعرض.
  2. عندما تحمل كامل المعلومات نقوم بحساب الأبعاد مرة أخرى، هذه الخطوة مهمة لأن جدولك قد يحتوي على أشياء تحمل بعد الـ DOM مثل الصور وخطوط الويب.
  3. عندما يتم التمرير في الحاوي الرئيسي ولكن هذا سيحدث في حالة كان المحتوى أكبر من عرض الحاوي، حينها نريد إعادة تغيير مكان العمود الرئيسي.
  4. عندما يتم تصغير نافذة المتصفح نريد إعادة حساب العرض.
  5. عندم يتم النزول في المتصفح نريد أن نغير مكان رأس الجدول.

يمكن تلخيص ما قلناه للتو في الكود التالي. يجدر الذكر أن أحداث التصغير والتمرير يتم التحكم بهما باستخدام إضافة throttle+debounce.

// #1: DOMعندما يجهز الـ
setWidths();

// #2: نراقب الحاوي في حال حدوث تمرير فيه
$t.parent('.sticky-wrap').scroll($.throttle(250, function() {
    repositionStickyHead();
    repositionStickyCol();
}));

// الآن نربط ما قمنا بعنصر $(window)
$w
// #3: عندما يتم تحميل كامل المحتويات
.load(setWidths)
// #4: عندما يتم تصغير النافذة
// قمنا باستخدام throttle هنا حتى لا يتم إطلاق الحدث أكثر من مرة (في الوضع الافتراضي يتم إطلاق الحدث من أجل كل جزء يتم تصغيره، هنا ننتظر حتى ينتهي التصغير كاملا ثم نطلق)
.resize($.throttle(250, function () {
    setWidths();
    repositionStickyHead();
    repositionStickyCol();
})
// #5: عندما يتم النزول في النافذة
// استخدمنا throttle حتى لا يتم إطلاق الدالة كثيرا
.scroll($.throttle(250, repositionStickyHead);

وانتيهنا، كان هذا كل شيء!

النقاش

نحن نعرف أن لاشيء كامل، لذا سنناقش الطرق الأخرى التي تملك محاسن على هذه الطريقة ومساوئها ولم استخدمنا هذه الطريقة.

استخدام position: fixed

استخدام هذه الطريقة قد يبدو مغريا لسبيين:

  1. لا يوجد حاجة لحسابات من أجل رأس الجدول، لأن العنصر المثبت (fixed) يقع خارج الصفحة الفعلية وسيبقى ثابتا في مكانه.
  2. نتجنب البطء في الحسابات هذا لأن العناصر الثابتة تلاحق الجدول ولا تثبت معه، لأننا نقوم بالحساب في فترات ثابتة (عبر throttle) وبالتالي سيظهر أن العنصر الثابت غير متجاوب وبالتالي غير طبيعي.

لكن المشكلة في هذه الطريقة هي أننا نزيل العنصر من رونق الصفحة، ففي حالة تجاوز عرض الجدول العرض المسموح وأصبح من الضروري إضافة scroll فإن رأس لن يلحق المحتوى على المحور الأفقي لأنه ثابت في الصفحة. وهذا سبب كبير لا يسمح لنا باستخدام أغلب إضافات jQuery التي تقدم هذه الخواص. وكتبت هذه الدورة من أجل إصلاح هذا الأمر بالتحديد.

استخدام position: sticky

الخاصية الجديدة مناسبة للأمر، في الواقع لقد بنيت من أجل هذا الأمر في الحسبان، المشكلة فيها أنها غير مدعومة من متصفح chrome (سبق وكانت مدعومة ولكن أزيل الدعم كليا) وبذلك تفقد كل الزوار من هذا المتصفح.

مثال حي:

See the Pen avovoo by Hsoub Academy (@HsoubAcademy) on CodePen.

ترجمة -وبتصرف- للمقال: Sticky Table Headers & Columns لصاحبه Terry Mun.

]]>151Wed, 26 Aug 2015 22:39:09 +0000كيف تنشئ شبكة خلايا منزلقة Slidable Grid عن طريق jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B4%D8%A6-%D8%B4%D8%A8%D9%83%D8%A9-%D8%AE%D9%84%D8%A7%D9%8A%D8%A7-%D9%85%D9%86%D8%B2%D9%84%D9%82%D8%A9-slidable-grid-%D8%B9%D9%86-%D8%B7%D8%B1%D9%8A%D9%82-jquery-r127/

تعد شبكة الخلايا المنزلِقة Slidable grid وسيلة رائعة وجذابة لعرض أجزاء عدة من المعلومات في نفس المساحة؛ فتنزلق كل خلية من الشبكة عند النقر أو الحومان Hover وتعرِض محتوى إضافيا.

iquery-slideable-grid.thumb.png.85c3d470

سنتطرق خلال هذا الدرس إلى عملية إنشاء شبكة خلايا منزلقة ابتداءً من وسوم HTML الضرورية، التنسيق وجعل الشبكة متجاوبة Responsive؛ مع إضافة خطوط أيقونات الويب. سنعرِض أيضا لكيفيّة استخدام jQuery لإضافة بعض التأثيرات على شبكة الخلايا.

هكذا ستبدو شبكة الخلايا المنزلِقة بعد اكتمال الدّرس.

559def134f6f9_01_.thumb.gif.cee3b5568389

إنشاء الشبكة في HTML

في ما يلي وسوم HTML المستعملة لإنشاء الشبكة. سنشرح عملها بالمختصر. نحتاج لعنصر تغليف Wrapping يحيط بالشبكة، ثم أجزاء مستقلة بتموضع نسبي Relative positioning داخل عنصر التغليف. تمثل هذه الأجزاء الخلايا المرئية المكونة للشبكة. توجد داخل كل خليّة مساحتان بتموضع مطلق Absolute تملأ كل واحدة منهما طول وعرض الخلية تماما. سنضيف تأثيرات إلى كل من المساحتيْن بحيث تكون كل مساحة إما خارج مجال الرؤية في الصفحة أو مرئية.

<div id="services" class="cf">
  <section class="service">
    <div class="service-icon"><span class="icon-web"></span><br/>التصميم للويب</div>
    <div class="service-description"><p>تقديم لطيف حول التصميم للويب وما نقدمه من خِدْمات في هذا المجال</p></div>
  </section>
  
  <section class="service">
    <div class="service-icon"><span class="icon-graphic"></span><br/>التصميم الغرافيكي</div>
    <div class="service-description"><p> ... </p></div>
  </section>

  <section class="service">
    <div class="service-icon"><span class="icon-logo"></span><br/>تصميم الشعارات</div>
    <div class="service-description"><p> ... </p></div>
  </section>

  <section class="service">
    <div class="service-icon"><span class="icon-dev"></span><br/>التطوير للويب</div>
    <div class="service-description"><p> ... </p></div>
  </section>

  <section class="service">
    <div class="service-icon"><span class="icon-3d"></span><br/>التصميم ثلاثي الأبعاد</div>
    <div class="service-description"><p> ... </p></div>
  </section>

  <section class="service">
    <div class="service-icon"><span class="icon-illustration"></span><br/>إيضاحات</div>
    <div class="service-description"><p> ... </p></div>
  </section>
</div> <!-- END #services -->

يوجد div بمعرّف services وصنف Class اسمُه cf؛ توجد داخله ستة عناصر section وبداخل كل section عنصرا div، على النحو الذي ذكرناه سابقا. يوجد بداخل الأول من عنصري div عنصر span لنضع داخله أيقونة وعنوان. في عنصر div الآخر يمكن إدراج المحتوى الإضافي (وصف مثلا).

حرصنا على جعل السّكربت يظهر في حالة عدم وجود Javascript لدى الزائر، فيظهر لديه المحتوى دون التأثيرات.

559dea6eac4f7_02__html.thumb.png.8965682

ننتقل الآن إلى تنسيق المحتوى عن طريق CSS وتهيئته لعمل تأثيرات عليه بواسطة jQuery.

تنسيق الشبكة عن طريق CSS

يتكوّن ملف CSS من ثلاثة أجزاء: الأساسي للعمل مع jQuery، شفرة خط الأيقونة، والأخير تنسيقات لمظهر أجمل. في ما يلي الجزء الأول.

#services .service {
  width: 33%;
  float: left;
  padding: 0.5em;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

@media screen and (max-width: 600px) {
  #services .service {
    width: 50%;
  }
}

@media screen and (max-width: 320px) {
  #services .service {
    width: 100%;
  }
}

#services .service .service-icon, #services .service .service-description {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  padding: 50px 0;
  color: #222;
}

#services .service .service-description {
  left: 100%;
  background: #249EC2;
  color: white;
  padding: 50px;
}

#services .service .service-description:hover { cursor: pointer; }

نشرح عمل الأسطر السابقة. نستهدف أولا الخلايا (service.) لترتيبها داخل الشبكة بإعطائها عرضا مائعا Fluid وحدا أدنى للارتفاع، وجعلها تطفو إلى اليسار (لهذا السبب سنجعل - في ما بعد - عنصر التغليف يمنع المحتوى من الانسياب باستخدام خاصية clear. راجع درس أساسيات الطوفان Float في أوراق الأنماط المُتتالية CSS بهذا الخصوص). ثم - وهذا مهم جدا - نعطي القيمة hidden لخاصية overflow (لو لم نفعل ذلك لعُرِض المحتوى الإضافي طول الوقت) مع تحديد التموضع النسبي position: relative. نستخدم بعدها استعلامات الوسائط Media queries لأخذ عدة شاشات في الحسبان وبالتالي جعل الشبكة متجاوبة. تعني هذه الشيفرة أن تصميم الشبكة سيتكون من ثلاثة أعمدة بالنسبة لسطح المكتب (عرض الشاشة أكبر من 600px)، ثم يتحول إلى عموديْن إذا نقُص عرض الشاشة وفي الشاشات الصغيرة يصبح عمودا واحدا.

نستهدف الآن - بعد الانتهاء من تجهيز الخلايا - العناصِر الداخلية، service-icon. وservice-description.؛ ونعطيها تموضعا مطلقا (لهذا السبب أعطينا حدا أدنى للارتفاع في النمط السابق) ثم نضعها في يسار الجزء العلوي. بالنسبة لموضع الوصف service-description. فسنغيره بعد قليل. نجعل العنصريْن الداخليّيْن يملآن كامل العنصر الأب. البقية للتأثير المرئي. أخيرا نستهدف عنصُر الوصف لوحده فنعطي القيمة %100 لخاصية left مما يجعله بالكامل يندفع إلى اليمين خارج مجال الرؤية نظرا لضبط خاصية overflow على hidden ضمن service.. سنستهدغ قيمة left هذه في jQuery، وهو ما يجعل من المهم تعريفها الآن.

خط الأيقونة

ننتقل الآن إلى الخطوة التالية وهي تعريف أسماء الأصناف المُستخدمة ضمن HTML لتُعرَض الأيقونات الصحيحة؛ نستخدم font-face@ للحصول على خطوط الأيقونات. نبحث أولا عن وسيلة لإيجاد خط أيقونات مناسب لاحتياجاتنا. توجد عدة خيّارات اخترنا من بينها موقع Fontastic. تختار على الموقع الأيقونات التي ترغب في استخدامها، يعتمد الاختيار طبعا على نوعية المشروع الذي تعمل عليه. يمكنك تغيير بعض المعلومات مثل أسماء أصناف الأيقونات وأسماء الخطوط على النحو المبيَّن أدناه.

03_fontastic.thumb.png.a437f5d87a2abf0ec

اخترنا نفس الأسماء الموجودة في سكربت HTML من أجل تطابق دون مشاكل. يعطيك الموقع مجلدا لتنزيله مع شفرة للاستخدام. ضَع مجلد الخطوط في مجلد CSS (أو أي مجلد آخر يناسبك) ثم خذ الشفرة وضعها في ملف CSS. إليك ما تحتاجه:

@font-face {
  font-family: "slidable-grid";
  src:url("fonts/slidable-grid.eot");
  src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),
  url("fonts/slidable-grid.woff") format("woff"),
  url("fonts/slidable-grid.ttf") format("truetype"),
  url("fonts/slidable-grid.svg#slidable-grid") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "slidable-grid" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  font-size: 4em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-web:before {
  content: "a";
}

.icon-graphic:before {
  content: "b";
}

.icon-logo:before {
  content: "c";
}

.icon-dev:before {
  content: "d";
}

.icon-3d:before {
  content: "e";
}

.icon-illustration:before {
  content: "f";
}

إن أعدت تحميل المشروع فستظهر الأيقونات. لم يتبقَّ لنا سوى إكمال التنسيق.

تنسيقات نهائية

نستكمل ما بقي من تنسيقات. في ما يلي الشفرة التي تضع الشبكة في الوسط وتعطيها العرض الأقصى. نضيف تأثيرا للحوم على الأيقونات:

@import url(reset.css);

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: both; }
.cf { *zoom: 1; }

body {
  font-family: 'Exo 2', sans-serif; /* Google Font <a href="http://google.com/fonts">http://google.com/fonts</a>   */
  text-align: center;
  color: #999;
  background: #444;
  -webkit-font-smoothing: antialiased;
}

#services {
  max-width: 850px;
  margin: 0 auto;
}

#services .service .service-icon:hover {
  cursor: pointer;
  color: #249EC2;
}

#services .service .service-icon span {
  display: block;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

#services .service .service-icon:hover span {
  position: relative;
  bottom: 5px;
}

إضافة jQuery

نهدف من خلال استخدام jQuery إلى إعادة استخدام نفس الشفرة البرمجية للشبكة كاملة. ننتظر النقر على إحدى خلايا الشبكة (صنف service) وعند حدوثه نحرك مكان الأيقونة ونزيحها خارج الإطار المرئي ثم نجلب الوصف لعرضه. نضيف أيضا صنفا جديدا (open) لمساعدتنا في معرفة العنصر المرئي. اجلب jQuery إلى الصفحة ثم أضف الشفرة التالية في ملف أو في وسم <script>:

$(document).ready(function() {
  $('.service').click(function() {
    var $this = $(this);
    if ($this.hasClass("open")) {
      $this.find('.service-icon').animate({left: "0"});
      $this.find('.service-description').animate({left: "100%"});
      $this.removeClass("open");
    } else {
      $this.find('.service-icon').animate({left: "-100%"});
      $this.find('.service-description').animate({left: "0"});
      $this.addClass("open");
    }
  });
});

بعد أن تجهز الصفحة وعند النقر على كتلة service. نختبر هل لدى هذه الكتلة صنف open أم لا. في البداية لا يوجد قسم صنف لدى العناصر service مما يعني أن الاختبار سيتجاوز مباشرة إلى تنفيذ الأوامر الموجودة في else، فنبحث عن عنصر div الذي توجد به الأيقونة (service-icon.) ونحركه إلى اليسار ب%100-؛ ثم نعثر على الوصف ونحركه إلى اليسار عند 0 مما يجعله مرئيا. في الأخير نضيف صنف open إلى service. يعني هذا أنه سيكون لدى service بعد النقر عليه وإظهار المحتوى الإضافي صنفٌ باسم open على النحو الذي يظهر في الصورة التالية.

559df3c7ec997_04__open.thumb.png.75e95b0

يمكننا بالعودة إلى تعليمة if في الشفرة السابقة أن نرى أنه بالنقر على كتلة service. لديها صنف باسم open فإن الأيقونة تعود إلى الوضعية 0 والوصف ينزاح ب%100. نزيل بعدها الصنف open لتمكن إعادة استخدامه والنقر عليه أكثر من مرة.

خاتمة وأفكار

لدينا الآن نظام بشبكة لدى كل خلية منها وجهان. يمكن التعديل على الفكرة ومواءمتها حسب طبيعة الاستخدام.

يوجد في الصفحة التجريبية مثال آخر يُبدَل فيه وجه الخلية عند الحوم فوقها وليس عند النقر. يمكن الحصول على هذا التأثير عبر إبدال دالة ()click. ب()hover. في شفرة jQuery. يعود الخيار لك. يمكنك أيضا تغيير اتجاه التحريك بإبدال left بالقيمة المناسبة. سرعة الحركة يمكن التعديل عليها هي الأخرى.

ابتعد عن الإكثار من استخدام شبكة الخلايا المنزلقة بدون داع، ولا تستعملها إلا إذا كانت تضيف إلى تجربة المستخدم.

يمكن تنزيل نتيجة هذا الدرس  demo.zip.

ترجمة بتصرف لمقال How to create a slidable grid with jQuery لصاحبه Harry Atkins.

]]>127Tue, 14 Jul 2015 14:47:15 +000010 حيل jQuery يجب أن يعرفها كل مصممhttps://academy.hsoub.com/programming/javascript/jquery/10-%D8%AD%D9%8A%D9%84-jquery-%D9%8A%D8%AC%D8%A8-%D8%A3%D9%86-%D9%8A%D8%B9%D8%B1%D9%81%D9%87%D8%A7-%D9%83%D9%84-%D9%85%D8%B5%D9%85%D9%85-r122/

تعد مكتبة jQuery واحدة من أكثر المكتبات استخداما للإضافة على الصفحات؛ إذ أنها تجعل من التعامل مع نموذج كائن المستند Document object model, DOM أمرا في منتهى اليسر.

jquery.thumb.png.5f31b5ae0d0b23e83019cc6

لا شك أن السهولة في التعامل سبب أساسي في شعبية jQuery، إذ يبدو بالإمكان فعل أي شيء نريده عن طريق هذه المكتبة.

توجد، من بين الخيارات المتاحة أمامنا، مقاطع Snippets تجنح إلى الظهور المرة تلو الأخرى. سنعرِض في هذا المقال إلى عشرة مقاطِع سيستخدمها الجميع، من المبتدئ إلى المتمكن، مرارا وتكرارا.

زر العودة إلى الأعلى

// عد إلى الأعلى
$('a.top').click(function(){
  $(document.body).animate({scrollTop : 0}, 800);
  return false;
});

// Anchor tag أنشئ وسما للمربط
<a class="top" href="#">عد إلى الأعلى</a>

يتضح أننا لا نحتاج إلى إضافة Plugin لـ jQuery من أجل الحصول على تحريك سهل إلى الأعلى؛ يكفي استخدام دالتي animate و scrollTop.

يمكن تغيير المكان الذي يحُط فيه شريط التمرير عبر تغيير قيمة scrollTop. في المثال أعلاه استخدمنا القيمة 0 لأننا نريد العودة إلى أعلى الصفحة، لكن لو أردنا زَيحانًا offset بقيمة 100px فيمكن إدراج هذه القيمة.

يتلخص ما فعلناه في تحريك جسم المستند Document body طوال 800 ملي ثانيّة حتى يصل إلى القمّة.

التحقق من تحميل الصور

$('img').load(function() {
  console.log('image load successful');
});

تحتاج أحيانا إلى التأكد من تحميل كل الصور قبل إكمال السكربت؛ تؤدي الأسطر الثلاثة أعلاه هذه المهمة بكل يُسر. يمكن أيضا التحقق من تحميل صورة معينة عبر إبدال وسم tag بمعرِّف ID أو صنف Class.

تصحيح الصور المعطوبة تلقائيا

$('img').error(function(){
  $(this).attr('src', 'img/broken.png');
});

تحصل أحيانا أعطاب في روابط الصور على الموقع يكون معها إبدال الروابط يدويا أمرا صعبا. يعمل المقطع أعلاه على إبدال الصور المعطوبة تلقائيا مما ينقِذ من الكثير من المشاكل.

تبديل الصنف عند الحومان Hover

$('.btn').hover(function(){
  $(this).addClass('hover');
}, function(){
  $(this).removeClass('hover');
}
);

نرغب عادة في تغيير مظهر العناصر القابلة للنقر في صفحة الويب عندما يحوم حولها المؤشر وهو بالضبط ما تفعله الأسطر في المقطع أعلاه؛ فتضيف صنفا للعنصر عند الحوم حوله ثم تزيل الصنف عندما يكُفّ المستخدِم. كل ما عليك فعله هو إضافة التنسيق المرغوب ضمن ملف CSS.

تعطيل حقول الإدخال

$('input[type="submit"]').attr("disabled", true);

قد تريد تعطيل زر الإرسال أو حقل إدخال إلى أن يؤدي المستخدم إجراء معينا (التأشير على صندوق “قرأتُ الشروط”، مثلا). يضيف المقطع خاصية disabled (مُعطَّل) إلى الحقل مما يتيح لك تفعيله عندما تريد. كل ما عليك فعله لتفعيل الحقل هو تنفيذ الدالة removeAttr مع تمرير المُعطى disabled على النحو التالي:

$('input[type="submit"]').removeAttr("disabled");

إيقاف تحميل الروابط

$('a.no-link').click(function(e){
  e.preventDefault();
});

قد نود أن تؤدي الروابط أعمالا أخرى غير الانتقال إلى صفحة أو حتى إعادة تحميلها، وهو ما تعمل عليه الأسطر أعلاه عبر تعطيل الإجراء الافتراضي Default action. قد يكون السبب - على سبيل المثال - تنشيطَ سكربت آخر.

التبديل بين تأثيريْ التلاشي Fade والانزلاق Slide

// تلاش

$(".btn").click(function() {
  $(".element").fadeToggle("slow");
});

// تبديل
$(".btn").click(function() {
  $(".element").slideToggle("slow");
});

تأثيرا التّلاشي والانزلاق من أكثر التّأثيرات في jQuery استخداما. عندما نريد فقط عرض عنصر عند النقر فإن دالتي fadeIn وslideDown ملائمتان تماما. لكن إن أردنا أن يظهر العنصر بعد النقرة الأولى ثم يختفي بعد الثانية فهذا المقطع يؤدي المهمة بنجاح.

تأثير الطّيّ

// أغلق كل اللوحات
$('#accordion').find(‘.content').hide();
// تأثير الطّيّ
$('#accordion').find('.accordion-header').click(function(){
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

كل ما تحتاجه إلى جانب هذا المقطع هو شفرة HTML المناسبة للتأثير. أولا نغلق كل اللوحات ثم عند حدث النقر click ينزلق المحتوى المربوط بالترويسة accordion-header بالتتابع. هذه طريقة سهلة للحصول على تأثير طي بسرعة.

تحديد ارتفاع عنصر div اعتمادا على آخر

$('.div').css('min-height', $('.main-div').height());

تمكِّن هذه الطريقة من تحديد نفس الارتفاع لعنصريْ div بغض النظر عن محتوى كل منهما. في السطر أعلاه عيّنا ارتفاع عناصر div بحيث يكون لديها على الأقل ارتفاع العنصر main-div.

لائحة بألوان مختلفة حسب العناصِر الزوجية والفردية

$('li:odd').css('background', '#E8E8E8');

يمنح هذا السطر خلفية باللون المحدد للعناصر الفردية من اللائحة؛ مما يمكنك من الحصول على لائحة مخطَّطة - مثل هيئة الحمار الوحشي - عبر إضافة لون خلفية افتراضي في ملف CSS تأخذه العناصر الزوجية من اللائحة. لا يقتصر استخدام هذه الطريقة على اللوائح بل يتعداها إلى الجداول وعناصر div وغيرها.

ترجمة بتصرّف لمقال 10 jQuery snippets every designer should know لصاحبته Sara Vieira.

]]>122Wed, 08 Jul 2015 13:46:08 +0000كيفيَّة إنشاء عرض شرائح قابل للتَّحريك باستخدام jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D9%83%D9%8A%D9%81%D9%8A%D9%8E%D9%91%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%B9%D8%B1%D8%B6-%D8%B4%D8%B1%D8%A7%D8%A6%D8%AD-%D9%82%D8%A7%D8%A8%D9%84-%D9%84%D9%84%D8%AA%D9%8E%D9%91%D8%AD%D8%B1%D9%8A%D9%83-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-jquery-r108/

بغضِّ النَّظر عن ماهية موقع الوِّيب خاصَّتك، إلَّا أنَّكَ إذا أضفتَ إليه عرض شرائح JavaScript يؤدِّي كُلَّ وظائفه بجودةٍ عالية، فإنَّكَ بذلك تكون قد قُمتَ بتضييق الفجوة بين عملك والعُملاء المُستهدفين. لقد خَدَمَتْ عروض شرائح JavaScript على نحوٍ كبيرٍ كإضافاتٍ لصفحات الوِّيب، حيثُ أنَّها وسيلة رائعة لعرض الكثير والكثير من المعلومات في مساحةٍ صغيرةٍ نسبيًّا. إذا كانت التَّفاصيل المذكورة هذه كافية لإغرائكَ لإنشاء عرض شرائحكَ الخاص باستخدام JavaScript (مع اللَّوحات المُنزلقة) فأنتَ في المكان المُناسب لتعلُّم هذا. سنتشاركُ في هذا الدَّرس بعض الخطوات البسيطة التي يسهل تنفيذها لإنشاء عرض شرائح JavaScript.

jquery-slide.png

توضيح الخطوات المُتَّبعة في هذا الدَّرس لإنشاء عرض شرائح JavaScript

سأستخدم في هذا الدَّرس شفرات HTML وCSS بسيطة لإنشاء مظهر عرض الشَّرائح في حين أنَّ تنفيذ وظيفة الإنزلاق سيتمّ عن طريق استخدام مكتبة jQuery وهي مكتبة تابعة لـ JavaScript. كما سأستخدم أيضًا إضافتين واسعتي الانتشار: LocalScroll وScrollTo لتقديم التَّاثيرأت الكامنة في عرض شرائح JavaScript. تسمحُ الإضافة الأولى للرَّابط بتخطِّي عرض الشَّرائح إلى شريحةٍ مُحدَّدة بناءً على المُعرِّف ID الذي قد تمَّ تحديده. بينما تُقدِّم الإضافة الثَّانية وظائف انزلاقٍ مُمتازة، حيثُ أنَّها توفِّر خاصيَّة الانتقال بين الشَّرائح بدلًا من القفز من شريحة إلى الأُخرى. 
حيثُ أنَّنا سنأخذ مُعامِلات الوصول الأساسيَّة في الحُسبان عند بناء عرض الشَّرائح، فسيكون بإمكان كُلّ مُستخدم التنقُّل وعرض الشَّرائح حتى عند توقُّف JavaScript عن العمل.

فيما يلي نظرة على بنية HTML لعرض الشَّرائح: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Sliding-enabled slideshow using jQuery | Script Tutorials</title>
  <meta name="description" content="Sliding-enabled slideshow using jQuery demo - Script Tutorials">

  <!-- include to stylesheet -->
  <link rel="stylesheet" href="css/style.css" type="text/css" />

  <!-- include jQuery library and other javascripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/jquery.scrollTo.js"></script>
  <script src="js/jquery.localscroll.js"></script>
  <script src="js/custom-scripts.js"></script>
</head>
<body>
  <div id="slideshow">
    <!-- List of slider images -->
    <ul>
      <li id="slide1"><img src="images/slide1.jpg" alt="Slide 1" /></li>
      <li id="slide2"><img src="images/slide2.jpg" alt="Slide 2" /></li>
      <li id="slide3"><img src="images/slide3.jpg" alt="Slide 3" /></li>
      <li id="slide4"><img src="images/slide4.jpg" alt="Slide 4" /></li>
      <li id="slide5"><img src="images/slide5.jpg" alt="Slide 5" /></li>
    </ul>
  </div>
  <div id="slideshow-nav">
    <!-- Navigation list of slider images -->
    <ul>
      <li><a href="#slide1">Slide 1</a></li>
      <li><a href="#slide2">Slide 2</a></li>
      <li><a href="#slide3">Slide 3</a></li>
      <li><a href="#slide4">Slide 4</a></li>
      <li><a href="#slide5">Slide 5</a></li>
    </ul>
  </div>
</body>
</html>

بالاطّلاع بعنايةٍ على الشَّفرات أعلاه ستُلاحظ أنَّ شفرات HTML لصفحات العرض تبدأ بـ Doctype، عنوان title ورابط إلى ملف نمط CSS. بعد هؤلاء الثلاث ستجد أنَّه لتجهيز عرض الشَّرائح وتشغيله قد تمَّ اضافة رابط لكلٍّ من: الإضافتين LocalScroll وScrollTo السَّابق توضيحهما، مكتبة jQuery وملف script.js. 
كذلك قد تمَّ فصل شفرات HTML المسئولة عن تكوين عرض الشَّرائح إلى قسمين: وسم div مُعرَّف بـ slideshow وآخر مُعرَّف بـ slideshow-nav. من المُهمّ هُنا مُلاحظة أنَّ وسم div المُعرَّف بـ slideshow سوف يحتوي على قائمة غير مُرقَّمة من صورٍ مُتَّصلة، ووسوم li تحتوي على مُعرِّفاتٍ تتوافق مع روابط slideshow-nav.

لنُلقي الآن نظرة على أنماط CSS 

css/style.css
#slideshow {/*slider container css*/
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 50px auto 50px auto;
  box-shadow: 0px 0px 50px #333;
  -moz-box-shadow: 0px 0px 50px #333;
  -webkit-box-shadow: 0px 0px 50px #333;
}

#slideshow ul {/*manage slider scroll elements css*/
  width: 4000px;
  list-style: none; 
}

#slideshow ul li {
  float: left;
}

ستقوم أنماط CSS الموجودة بالأعلى بالعمل على تحويل المظهر البسيط النَّاشئ عن شفرات HTML إلى صفحاتٍ تظهرُ بشكلٍ يُشبه عرض الشَّرائح المطلوب. يتمّ تنفيذ هذا بدءًا من تحديد ارتفاع وعرض هذه الشَّرائح، تحديد أيضًا الأبعاد لتكون مُماثلة تمامًا لأبعاد شرائح الصور. مع كُلّ الشَّرائح عائمة جنبًا إلى جنب فإنَّه من المُمكن تحديد قياسات العرض الكُلِّي للقائمة الغير مُرقَّمة حتَّى 4590px. كذلك قد تمَّ استخدام خاصيَّة الفائض overflow لمنع ظهور الصور المُتعدِّدة بأكملها في الصَّفحة. كُلّ ما تحتاج لفعله هُنا هو ببساطة تعيين خاصيَّة الفائض كـ overflow: scroll، يؤدِّي هذا التَّعيين إلى السَّماح لعرض الشَّرائح بالعمل حتَّى في حالة عدم وجود JavaScript.

تمَّ إضافة ظلّ لطيف باستخدام CSS3-box shadow كما هو مُبيَّن أدناه 

#slideshow-nav {/* Slider navigation container css */
  width: 150px;
  margin: 0 auto 100px auto;
}
#slideshow-nav ul {
  list-style: none; 
}
#slideshow-nav ul li {
  float: left; 
}
#slideshow-nav ul li a {/* navigation styling css */
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 5px;
  background: #fff;
  text-indent: -9999px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0px 0px 30px #000;
  -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
  background: #333;
}

بمُعاينةٍ دقيقةٍ هُنا سنُلاحظ أنَّه قد تمَّ نقل وسم div الذي تمَّ تعريفه بـ slideshow-nav إلى موضعٍ أسفل القسم الرئيسي لعرض الشَّرائح. لا نُريد كذلك وجود عدَّة أزرار في عرض الشَّرائح والتي لا تعمل عند تفعيل وظائف JavaScript. يُمكنكَ استخدام visibility: hidden لإخفاء تلك الأزرار كوضعٍ افتراضي، مِمَّا يجعل امكانية إظهارها في وقتٍ لاحق أمرًا مُتاحًا. قد يُثير اهتمامكَ أيضًا معرفة أنَّهُ قد تمَّ تحويل الروابط الخاصَّة بكلّ قائمةِ تنقُّلٍ إلى أزرار دائريَّة بمُساعدة border-radius في CSS3 مع إزاحة النَّصّ الافتراضي خارج الشَّاشة عن طريق تعيين قيمة سالبة لـ text-indent.
إلى الآن فإنَّ عرض الشَّرائح يعمل بصورة ملموسة ودون الحاجة إلى JavaScript. هُناك فقط شريط تنقُّل يُتيح للمُستخدم التَّحرُّك ذهابًا وإيابًا بين صُورٍ مُختلفة.

وأخيرًا، لنُلقي نظرة على وظائف jQuery 

js/custom-scripts.js
$(document).ready(function() {
  var slider = $("#slideshow");
  var slider_nav = $("#slideshow-nav");
  slider_nav.find("a[href=#slide1]").addClass("active");

  slider_nav.localScroll({
    target:'#slideshow',
    axis: 'x'
  });

  slider_nav.find("a").click(function(){
    slider_nav.find("a").removeClass("active");
    $(this).addClass("active");
  });
});

إذا نظرتَ إلى الشَّفرات أعلاه ستجد أنَّه قم تمَّ تغيير أنماط CSS الخاصَّة بوسم slideshow من overflow: scroll إلى overflow: hidden لإزالة شريط التَّمرير. بعد ذلك تمَّ تعيين ظهور أزرار nav لتُصبح مرئيَّة مع اضافة فئة active تلقائيًّا إلى الزرّ الأوَّل. كذلك تمَّ تفعيل كلتا الإضافتين: LocalScroll وScrollTo، إضافةً إلى تطبيق وظائف LocalScroll على عناصر slideshow-nav عن طريق توجيه تلك العناصر لاستهداف عناصر slideshow بالتَّحرُّك على طول محور X. 
أخيرًا، للتأكُّد من أنَّ جميع الأزرار في عرض الشَّرائح تعمل مع فئتها النَّشطة (متى تمَّ نقرُها)، سوف نستخدم قاعدة jQuery بسيطة والتي من شأنها إزالة الفئة النَّشطة من الأزرار التي لم يتمّ نقرها. ستظهر تلك الفئة النَّشطة المُحدَّدة ضمن أنماط CSS لعرض لون خلفية رمادي إلى الزر الذي تمَّ نقره فقط. بعمل اختبارٍ سريعٍ في المُتصفِّح سيظهر عرض شرائح JavaScript يعمل على أكمل وجه.

الإخراج

إليك هذا المثال الحي

ختامًا

بهذا نكون قد انتهينا من إنشاء عرض شرائح JavaScript بإمكانه إضافة مظهرًا جميلًا إلى صفحات الوِّيب خاصَّتك.

ترجمة -وبتصرُّف- للمقال: A Complete Tutorial On Creating Sliding-Enabled Slideshow Using jQuery.

]]>108Fri, 26 Jun 2015 15:02:00 +0000مُقدّمة إلى AJAX والكائنات المُؤجّلة (Deferred Objects) على jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D9%85%D9%8F%D9%82%D8%AF%D9%91%D9%85%D8%A9-%D8%A5%D9%84%D9%89-ajax-%D9%88%D8%A7%D9%84%D9%83%D8%A7%D8%A6%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D9%8F%D8%A4%D8%AC%D9%91%D9%84%D8%A9-deferred-objects-%D8%B9%D9%84%D9%89-jquery-r64/

‏AJAX

‏AJAX هي اختصار للعبارة "asynchronous JavaScript and XML"، وهي وسيلة لجلب البيانات من الخادوم دون الحاجة لإعادة تحميل الصّفحة، وهي تقوم على استخدام كائن مُتاح في المتصفّح اسمه XMLHttpRequest (أو XHR اختصارًا) لإرسال الطّلب إلى الخادوم ثمّ التّعامل مع البيانات الّتي يُجيب بها الخادوم.

تُوفّر jQuery الوظيفة ‎$.ajax‎ (ووظائف أخرى مرافقة مُختصرة) لتسهيل العمل مع طلبات XHR في جميع المتصفّحات.

‏‎$.ajax‎

بإمكاننا استخدام الوظيفة ‎$.ajax()‎ المُرفقة مع jQuery بعدّة أساليب: إحداها أن نُمرّر إليها كائنًا يحوي الإعدادات فقط، أو أن نُمرّر الرّابط مع أو بدون كائن الإعدادات. لنُلقِ نظرة على الأسلوب الأول:

// أنشئ دالّة الاستدعاء الرّاجع الّتي ستُنفّذ عندما ينجح طلب AJAX
var updatePage = function( resp ) {
  $( '#target').html( resp.people[0].name );
};

// وعندما يفشل
var printError = function( req, status, err ) {
  console.log( 'something went wrong', status, err );
};

// أنشئ كائن الإعدادات الذي يصف الطّلب
var ajaxOptions = {
  url: '/data/people.json',
  dataType: 'json',
  success: updatePage,
  error: printError
};

// أرسل الطّلب
$.ajax(ajaxOptions);

بإمكانك طبعًا أن تُمرّر كائنًا حرفيًّا مباشرةً إلى الوظيفة‎$.ajax() ‎ وأن تستخدم دالّة مجهولة محلّ success وerror، هذا الأسلوب كتابته أسهل، وصيانته في المستقبل أسهل:

$.ajax({
  url: '/data/people.json',
  dataType: 'json',
  success: function( resp ) {
    $( '#target').html( resp.people[0].name );
  },
  error: function( req, status, err ) {
    console.log( 'something went wrong', status, err );
  }
});

كما قلنا، بإمكانك استخدام الوظيفة‎$.ajax() ‎ بأسلوب ثانٍ، وذلك بتمرير الرّابط أوّلًا ثمّ كائن الإعدادات ثانيًا (ليس إلزاميًّا). يُفيدك هذا في حال رغبت في استخدام الإعدادات المبدئيّة للوظيفة أو في حال رغبت في استخدام كائن الإعدادات نفسه لأكثر من رابط:

$.ajax( '/data/people.json', {
  type: 'GET',
  dataType: 'json',
  success: function( resp ) {
    console.log( resp.people );
  },
  error: function( req, status, err ) {
    console.log( 'something went wrong', status, err );
  }
});

في المثال السّابق، لا تشترط الوظيفة سوى الرّابط، ولكنّ إضافة كائن الإعدادات تسمح لنا بإخبار jQuery بنوع البيانات الّتي نُرسلها، وأي فعل HTTP نستخدمه (POST، GET، إلخ...‏‏)، وما نوع البيانات الّتي نتوقّع استقبالها من الخادوم، وما الّذي يجب فعله إن نجح الطّلب أو فشل...

اطّلع على وثائق الوظيفة‎$.ajax() ‎ لقراءة كامل الخيارات الّتي يمكن إضافتها إلى كائن الإعدادات.

‏A في AJAX تعني "لامتزامن"

تجري طلبات AJAX بصورة لا متزامنة، وهذا يعني أنّ الوظيفة‎$.ajax ‎ تنتهي قبل انتهاء الطّلب، وقبل أن تُستدعى دّالة success، أيّ أنّ جملة return تُنفّذ قبل أن يصل جواب الطّلب. فالدّالة getSomeData في المثال التّالي ستُعيد قيمة data قبل أن تُعرّف، مما يؤدّي إلى وقوع خطأ:

تحذير: نصّ برمجيّ غير سليم

var getSomeData = function() {
  var data;

  $.ajax({
    url: '/data/people.json',
    dataType: 'json',
    success: function(resp) {
      data = resp.people;
    }
  });

  return data;
}

$( '#target' ).html( getSomeData().people[0].name );

‏X في AJAX تعني JSON!

وضع المصطلح AJAX عام 2005 ليصف طريقة لجلب البيانات من الخادوم دون الحاجة لإعادة تحميل كامل الصّفحة. في ذلك الوقت، كانت الصّيغة الأكثر شيوعًا للبيانات الّتي تُرسلها الخوادم هي XML، أمّا اليوم، فإنّ JSON هي الصّيغة الّتي تعتمدها أكثر التّطبيقات الحديثة.

صيغة JSON في أساسها هي سلسلة نصّيّة (string) تُمثّل البيانات، وتبدو مُشابهة كثيرًا لكائن JavaScript عاديّ، ولكنّها لا تستطيع تمثيل كلّ أنواع البيانات الّتي يستطيع كائن JavaScript تمثيلها. فمثلًا: لا يمكن لـJSON تمثيل كائنات التّاريخ (Date) ولا الدّوال (functions). فيما يلي مثال عن نصّ JSON، لاحظ كيف تُحاط كلّ أسماء الخصائص بعلامتي اقتباس مُضاعفتين:

{ "people" : [
  {
    "name" : "Ben",
    "url" : "http://benalman.com/",
    "bio" : "I create groovy websites, useful jQuery plugins, and play a mean funk bass. I'm also Director of Pluginization at @bocoup."
  },
  {
    "name" : "Rebecca",
    "url" : "http://rmurphey.com",
    "bio" : "Senior JS dev at Bocoup"
  },
  {
    "name" : "Jory",
    "url" : "http://joryburson.com",
    "bio" : "super-enthusiastic about open web education @bocoup. lover of media, art, and fake mustaches."
  }
] }

تذكّر أنّ JSON هو تمثيل نصّيّ لكائن، ما يعني أنّه يجب تفسير السّلسلة النّصيّة لتحويلها إلى كائن JavaScript عاديّ قبل التّعامل معها. عندما تعمل مع جواب ورد من الخادوم بصيغة JSON، فإنّ jQuery تتولّى هذه المهمّة عنك. ولكن من المهمّ التمييز بين الكائنات الفعليّة، وطريقة تمثيلها في JSON.

ملاحظة: إن أردت إنشاء سلسلة JSON نصّيّة من كائن JavaScript أو تفسير سلسلة JSON نصّيّة لتحويلها إلى كائن JavaScript دون الاستعانة بـjQuery، فإنّ المُتصفّحات الحديثة تُقدّم الوظيفتين ‎JSON.stringify()‎ و‎JSON.parse()‎، ويمكن إضافة هذه الخصائص إلى المُتصفّحات القديمة باستخدام المكتبة json2.js. توفّر jQuery أيضًا وظيفة ‎jQuery.parseJSON()‎، الّتي توافق الوظيفة ‎JSON.parse()‎ في المتصفّحات، إلّا أنّها لا توفّر وظيفة تُقابل ‎JSON.stringify()‎.

وظائف مُختصرة

إن كان كلّ ما نريده إرسال طلب بسيط، دون الاهتمام بالتّعامل مع الأخطاء الّتي قد تقع، فإنّ jQuery تُوفّر وظائف مُختصرة تسمح لنا بفعل ذلك. تستقبل كل وظيفة مُختصرة رابطًا وكائن إعدادات غير إلزاميّ، ودالّة تُستدعى عند نجاح الطّلب فقط:

$.get( '/data/people.html', function( html ){
  $( '#target' ).html( html );
});

$.post( '/data/save', { name: 'Rebecca' }, function( resp ) {
  console.log( resp );
});

إرسال البيانات والعمل مع النّماذج

بإمكاننا إرسال بيانات مع طلبنا بتعيين قيمة للخاصة data في كائن الإعدادات، أو تمرير كائن كمُعامل ثانٍ للوظائف المُختصرة.

ستُضاف هذه البيانات إلى الرّابط في طلبات GET بصورة "جملة استعلام" (query string)، أمّا في طلبات POST فإنّها ستُرسل كبيانات نموذج. توفّر jQuery وظيفة مُفيدة ‎.serialize()‎ الّتي تستقبل مُدخلات نموذج وتُحوّلها إلى صيغة "جملة استعلام" (مثل field1name=field1value&field2name=field2value...):

$( 'form' ).submit(function( event ) {
  event.preventDefault();

  var form = $( this );

  $.ajax({
    type: 'POST',
    url: '/data/save',
    data: form.serialize(),
    dataType: 'json',
    success: function( resp ) {
      console.log( resp );
    }
  });
});

‏jqXHR

تُعيد‎$.ajax() ‎ والوظائف المُختصرة المرافقة لها، كائن jqXHR (اختصارًا لـjQuery XML HTTP Request) والّذي يتضمّن وظائف مُفيدةً كثيرة. بإمكاننا إرسال طلب باستخدام ‎$.ajax()‎ ثمّ حفظ كائن jqXHR في مُتغيّر:

var req = $.ajax({
  url: '/data/people.json',
  dataType: 'json'
});

بإمكاننا استخدام هذا العنصر لربط الاستدعاءات الرّاجعة بالطّلب، حتّى بعد أن يكتمل الطّلب. بإمكاننا مثلًا استخدام الوظيفة ‎.then()‎ (ثُمَّ) لإرفاق استدعاءي نجاح الطّلب وفشله، إذ تقبل ‎.then()‎ دالّة أو اثنتين، تستدعى الأولى عند نجاح الطّلب، والثّانية إن فشل:

var success = function( resp ) {
  $( '#target' ).append(
    '<p>people: ' + resp.people.length + '</p>'
  );
  console.log( resp.people );
};

var err = function( req, status, err ) {
  $( '#target' ).append( '<p>something went wrong</p>' );
};

req.then( success, err );
req.then(function() {
  $( '#target' ).append( '<p>it worked</p>' );
});

بإمكاننا استدعاء ‎.then()‎ على كائن الطّلب قدر ما نشاء، وستُنفّذ الاستدعاءات الرّاجعة بالتّرتيب ذاته الّتي أرفقت وفقه.

إن لم نُرد إرفاق استدعاءي النّجاح والفشل معًا، فبإمكاننا استخدام الوظيفتين ‎.done()‎ و‎.fail()‎ على كائن الطّلب:

req.done( success );
req.fail( err );

لو أردنا إرفاق استدعاء راجعٍ يُنفَّذ دومًا، بغض النّظر عن نجاح الطّلب أو فشله، فيمكننا استخدام الوظيفة ‎.always()‎ على كائن الطّلب:

req.always(function() {
  $( '#target' )
    .append( '<p>one way or another, it is done now</p>' );
});

‏JSONP

يستغرب كثيرٌ من المبتدئين في JavaScript فشل طلبات XHR الّتي يرسلونها إلى نطاق آخر على الإنترنت، فمثلاً: يحاول بعض المُطوّرين جلب بيانات من واجهة برمجيّة من طرف ثالث (third-party API)، ليفاجؤوا بفشل الطّلب باستمرار.

السّبب وراء ذلك أنّ المُتصفّحات لا تسمح بإرسال طلبات XHR إلى نطاقات إنترنت أخرى لأسباب أمنيّة، ولكنّ بعض الواجهات البرمجيّة تُعيد البيانات بصيغة JSONP (اختصارًا لـJSON with Padding)، الّتي تسمح للمُطوّرين بجلب البيانات متجاوزين حظر المُتصفّح.

الحقيقة أن JSONP ليس طلب AJAX فعليًّا، فهو لا يستخدم طلب XHR الّذي يوفّره المُتصفّح، بل يعمل بإدراج وسم <script> في صفحة الويب، الّذي يحوي بدوره البيانات المطلوبة، مُحاطة بدالّة تُعيد هذه البيانات عند استدعائها. ليس هذه التّفاصيل مهمّة الآن، لأنّ jQuery تسمح لك بطلب JSONP كما لو كان XHR باستخدام الوظيفة ‎$.ajax()‎ بتعيين نوع البيانات dataType إلى 'jsonp' في كائن الإعدادات.

$.ajax({
  url: '/data/search.jsonp',
  data: { q: 'a' },
  dataType: 'jsonp',
  success: function( resp ) {
    $( '#target' ).html( 'Results: ' + resp.results.length );
  }
});

ملاحظة: عادةً ما توفّر الواجهات البرمجيّة خيارًا لتعيين اسم الدّالّة الّتي تُحيط بالبيانات والّتي ستُستدعى في عنوان الرّابط. عادةً ما يكون هذا اسم مُعامل الرّابط callback، وهذا ما تتوقّعه jQuery مبدئيًّا، إلّا أن بإمكانك تغييره بتعيين قيمة للخاصة jsonp في كائن الإعدادات الّذي تُمرّره لـ ‎$.ajax()‎.

بإمكانك أيضًا استخدام الوظيفة المُختصرة ‎$.getJSON()‎ لإرسال طلب JSONP، حيث تستطيع jQuery تمييزه من خلال وجود ‎callback=?‎ أو ما يشبهها في الرّابط:

$.getJSON( '/data/search.jsonp?q=a&callback=?',
  function( resp ) {
    $( '#target' ).html( 'Results: ' + resp.results.length );
  }
);

مشاركة الموارد عبر الأصول (cross-origin resource sharing أو CORS اختصارًا) هي خيارٌ آخر للسّماح بالطّلبات العابرة للأصول. ولكنّها غير مدعومة في المتصفّحات القديمة، كما أنّها تحتاج تهيئة خاصّة على الخادوم وتعديل ترويسات الطّلبات في XHR لتعمل.

الكائنات المُؤجّلة (Deferreds)

ليست كائنات jqXHR الّتي تعرّفنا عليها إلا "نكهة" خاصّة ممّا يُعرف "بالكائنات المؤجّلة". تسمح jQuery لك بإنشاء كائنات مؤجّلة بنفسك، والّتي يمكن الاستفادة منها في تسهيل التّعامل مع الأوامر اللامتزامنة، فهي توفّر طريقة للاستجابة لعمليّة تجري بصورة غير متزامنة بعد نجاحها أو فشلها، وتجنّبك الحاجة لكتابة استدعاءات راجعة مُتداخلة فيما بينها.

‏‎$.Deferred‎

بإمكانك إنشاء كائنٍ مؤجّل باستخدام ‏‎$.Deferred()‎. في المثال التّالي نُنفّذ دالة داخل setTimeout، ثمّ "نفي" (resolve) بوعدنا بإعادة القيمة الّتي تُرجعها الدّالة هذه. نُعيد الوعد (promise)، وهو كائن يمكن ربط الاستدعاءات الرّاجعة به، ولكنّه لا يؤثّر في نتيجة الكائن المؤجّل بحدّ ذاته. بإمكاننا "الإخلاف" (reject) بالوعد إذا وقع خطأ ما أثناء عمل الدّالّة:

function doSomethingLater( fn, time ) {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve( fn() );
  }, time || 0);

  return dfd.promise();
}

var promise = doSomethingLater(function() {
  console.log( 'This function will be called in 100ms' );
}, 100);

‏‎.then()‎ و‎.done()‎ و‎.fail()‎ و‎.always()‎

يمكننا ربط دوالّ تتولّى حالات الخطأ والنّجاح بالوعود، تمامًا كما في كائنات jqXHR:

function doSomethingLater( fn, time ) {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve( fn() );
  }, time || 0);

  return dfd.promise();
}

var success = function( resp ) {
  $( '#target' ).html( 'it worked' );
};

var err = function( req, status, err ) {
  $( '#target' ).html( 'it failed' );
};

var dfd = doSomethingLater(function() { /* ... */ }, 100);

dfd.then( success, err );

‏‎.pipe()‎

بإمكاننا استخدام الوظيفة ‏‎.pipe()‎ للوعود للاستجابة إلى القيمة الّتي تُوفى وذلك بتعديلها ثمّ إعادة كائن مؤجّل جديد.

تعمل الوظيفة ‏‎.then()‎ بدءًا من الإصدارة 1.8 من jQuery كما تعمل الوظيفة ‏‎.pipe()‎.

function doSomethingLater( fn, time ) {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve( fn() );
  }, time || 0);

  return dfd.promise();
}

var dfd = doSomethingLater(function() { return 1; }, 100);

dfd
  .pipe(function(resp) { return resp + ' ' + resp; })
  .done(function(upperCaseResp) {
    $( '#target' ).html( upperCaseResp );
  });

التّعامل مع العمليّات الّتي قد تكون لامتزامنة

أحيانًا تكون لدينا وظيفة قد تعمل بصورة متزامنة أو لا متزامنة وفق ظروف مُعيّنة، فمثلًا: دالّة تقوم بعمليّة لا متزامنة أوّل مرّة تُستدعى فيها، ثمّ تُخزّن القيمة الّتي أنتجتها العمليّة لتُعيدها مباشرةً عند استدعاءها مُستقبلًا. في هذه الحالة يمكننا الاستفادة من ‎$.when()‎ للاستجابة لكلا الحالتين:

function maybeAsync( num ) {
  var dfd = $.Deferred();

  // أعِد وعدًا مؤجّلًا عندما num === 1
  if ( num === 1 ) {
    setTimeout(function() {
      dfd.resolve( num );
    }, 100);
    return dfd.promise();
  }

  // أنهِ مباشرة فيما سوى ذلك، مُعيدًا num
  return num;
}

// هذا سيُجرى بصورة غير متزامنة ويعِد بإعادة 1
$.when( maybeAsync( 1 ) ).then(function( resp ) {
  $( '#target' ).append( '<p>' + resp + '</p>' );
});

// هذا سُيعيد 0 مُباشرةً
$.when( maybeAsync( 0 ) ).then(function( resp ) {
  $( '#target' ).append( '<p>' + resp + '</p>' );
});

بإمكانك أيضًا تمرير أكثر من معامل إلى ‎$.when()‎، الأمر الّذي يسمح لك بدمج عمليّات متزامنة ولا متزامنة معًا ثمّ الحصول على نتائج تنفيذها كلّها كُمعاملات للاستدعاء الرّاجع:

function maybeAsync( num ) {
  var dfd = $.Deferred();

  // أعد وعدًا مؤجّلًا عندما num === 1
  if ( num === 1 ) {
    setTimeout(function() {
      dfd.resolve( num );
    }, 100);
    return dfd.promise();
  }

  // أنهِ مباشرةً فيما سوى ذلك، مُعيدًا num
  return num;
}

$.when( maybeAsync( 0 ), maybeAsync( 1 ) )
  .then(function( resp1, resp2 ) {
    var target = $( '#target' );
    target.append( '<p>' + resp1 + '</p>' );
    target.append( '<p>' + resp2 + '</p>' );
  });

عندما يكون إحدى مُعاملات ‎$.when()‎ كائن jqXHR، فإنّنا نحصل على مصفوفة من المُعاملات تُمرّر إلى استدعائنا الرّاجع:

function maybeAsync( num ) {
  var dfd = $.Deferred();

  // أعد وعدًا مؤجّلًا عندما num === 1
  if ( num === 1 ) {
    setTimeout(function() {
      dfd.resolve( num );
    }, 100);
    return dfd.promise();
  }

  // أنهِ مباشرةً فيما سوى ذلك، مُعيدًا num
  return num;
}

$.when( maybeAsync( 0 ), $.get( '/data/people.json' ) )
  .then(function( resp1, resp2 ) {
    console.log( "Both operations are done", resp1, resp2 );
  });

مصادر إضافية

ترجمة (بشيء من التصرف) للجزء السادس من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>64Tue, 21 Apr 2015 06:01:00 +0000تحريك الصّفحة بـjQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D8%AA%D8%AD%D8%B1%D9%8A%D9%83-%D8%A7%D9%84%D8%B5%D9%91%D9%81%D8%AD%D8%A9-%D8%A8%D9%80jquery-r63/

تجعل jQuery إضافة التأثيرات الحركيّة على الصّفحة أمرًا سهلًا للغاية، ويمكن لهذه التأثيرات أن تعتمد الإعدادات المبدئيّة أو إعدادات يُعيّنها المُطوّر. بإمكانك أيضًا إنشاء حركاتٍ مُخصّصة من خصائص CSS عشوائيّة.

اطّلع على وثائق التأثيرات لتفاصيل أكثر عن تأثيرات jQuery.

ملاحظة مهمّة عن الحركات: يكون إنجاز الحركات باستخدام CSS بدل JavaScript أكثر كفاءةً في المُتصفّحات الحديثة، وخصوصًا في الأجهزة المحمولة. تفاصيل إنجاز هذه الحركات خارجةٌ عن نطاق السّلسلة، ولكن إن كنت تستهدف المُتصفّحات والأجهزة المحمولة الّتي تدعم حركات CSS، فقد ترغب بتعيين الإعداد jQuery.fx.off إلى القيمة true على الأجهزة ذات المواصفات الضّعيفة؛ فهذا من شأنه إبطال الحركات والوصول بالعنصر المطلوب تحريكه إلى حالته النّهائية مباشرةً دون تطبيق الحركة.

التأثيرات المُرفقة مع jQuery

تُرفَق الحركات المُستخدم بكثرة مع jQuery كوظائف يمكنك استدعاؤها على أي كائن jQuery:

  • ‏‎.show()‎: أظهر العناصر المُحدّدة.
  • ‏‎.hide()‎: أخفِ العناصر المُحدّدة.
  • ‏‎.fadeIn()‎: حرّك ظلاليّة العناصر (opacity) المُحدّدة إلى 100%.
  • ‏‎.fadeOut()‎: حرّك ظلاليّة العناصر المُحدّدة إلى 0%.
  • ‏‎.slideDown()‎: أظهر العناصر المُحدّدة بحركة سحب شاقوليّة.
  • ‏‎.slideUp()‎: أخفِ العناصر المُحدّدة بحركة سحب شاقوليّة.
  • ‏‎.slideToggle()‎: أخفِ العناصر المُحدّدة أو أظهرها بحركة سحبٍ شاقوليّة، اعتمادًا على كون العناصر المُحدّدة مخفيّة أو ظاهرة.

يسهل تطبيق إحدى هذه التأثيرات على التّحديد بعد إنشائه:

$( '.hidden' ).show();

جرّب المثال في ساحة التّجربة (تأكد من ضغط الزرّ Run with JS في هذ المثال وكلّ الأمثلة التّالية)

بإمكانك أيضًا تحديدُ مدّة للتأثيرات السّابقة، وهناك طريقتان لتحديدها، الأولى: تعيين الوقت بالميللي ثانيّة:

$( '.hidden' ).show( 300 );

جرّب المثال في ساحة التّجربة

والثّانية استخدام إحدى السُرعات المُعرّفة مُسبقًا:

$( '.hidden' ).show( 'slow' );

جرّب المثال في ساحة التّجربة

عُرِّفت هذه السُرعات في الكائن jQuert.fx.speeds؛ ممّا يعني أنّ بإمكانك تعديله لتغيير القيم المبدئيّة، أو إضافة سُرعات جديدة إليه:

// أعد تعيين سرعةٍ مُعرّفة
jQuery.fx.speeds.fast = 50;

// عرّف سرعة جديدة
jQuery.fx.speeds.turtle = 3000;

// بما أنّنا غيّر قيمة السّرعة `fast`، فإنّ هذه الحركة ستستغرق 50 ميللي ثانية
$( '.hidden' ).hide( 'fast' );

// بإمكاننا استخدام السّرعات الّتي عرفناها بأنفسنا تمامًا كتلك المُعرّفة مسبقًا
$( '.other-hidden' ).show( 'turtle' );

كثيرًا ما يرغب المُطوّر بفعل شيءٍ ما بعد انتهاء الحركة مباشرةً، فإن حاول فعله قبل انتهاء الحركة، فقد يسبّب تشوّه الحركة وتقطّعها، أو قد يحذف سهوًا عناصر تتحرّك في لحظة حركتها. بإمكانك تمرير استدعاء راجع (callback) إلى وظائف الحركة إن رغبت بتنفيذ أمرٍ ما بعد انتهاء التأثير، وتُشير this داخل هذا الاستدعاء إلى عنصر DOM الخام الّذي طُبقّت عليه الحركة، ومثلها ومثل دوالّ تولّي الأحداث، يمكن إحاطة this بالوظيفة ‎$()‎ لاستخدامها ككائن jQuery:

$( 'p.old' ).fadeOut( 300, function() {
  $( this ).remove();
});

جرّب المثال في ساحة التّجربة

إن لم يحوِ التّحديد أيّة عناصر، فلن تُستدعى الدّالة. إن احتجت إلى استدعاء الدّالة بصرف النّظر عن وجود العناصر أو غيابها في التّحديد، بإمكانك إنشاء دالّة تتعامل مع الحالتين:

var oldElements = $( 'p.old' );
var thingToAnimate = $( '#nonexistent' );

// هذه الدّالة ستكون الاستدعاء الرّاجع للوظيفة `show` في حال وجود عناصر نريد إظهارها، فإن لم توجد أيّة عناصر، فإنّنا نستدعيها مباشرةً بأنفسنا.
var removeOldElements = function() {
  oldElements.remove();
};

if ( thingToAnimate.length ) {

  // ستُستدعى وظيفتنا بعد انتهاء الحركة
  thingToAnimate.show( 'slow', removeOldElements );

} else {
  removeOldElements();
}

جرّب المثال في ساحة التّجربة

تأثيرات مُخصّصة باستخدام ‎.animate()‎

إن لم تُلبِّ الحركات المُرفقة مع jQuery حاجتك، فبإمكانك استخدام الوظيفة ‎.animate()‎ لإنشاء حركات مخصّصة قائمة على خصائص CSS مُتعدّدة (إحدى الاستثناءات: الخاصّ' color الّتي لا يمكن تحريكها، ولكن تتوفّر إضافة تسمح بذلك).

تقبل الوظيفة ‎.animate()‎ ثلاثة مُعاملات على الأكثر:

  • كائن يُحدّد الخصائص الّتي يُراد تحريكها
  • مدّة الحركة، مُقدّرة بالميللي ثانية
  • دالّة تُستدعى عند انتهاء الحركة

يمكن أن تُعيّن قيمة الحركة بكتابة القيمة النّهائيّة المُراد التّحريك إليها، أو كتابة المقدار الّذي يجب تحريكه (الفرق بين موضعي الحركة):

$( '.funtimes' ).animate({
    left: '+=50', // زد بمقدار 50
    opacity: 0.25,
    fontSize: '12px'
  },
  300,
  function() {
    // تنفّذ عند انتهاء الحركة
  }
);

جرّب المثال في ساحة التّجربة

ملاحظة: إن أردت تحريك خاصّة CSS يحوي اسمها على الإشارة "-"، فعليك تحويل الاسم إلى صيغة camelCase أوّلًا إن لم تشأ إحاطة اسم الخاصّة بعلامات اقتباس، فمثلًا الخاصّة font-size تُصبح fontSize.

إدارة الحركات

تُوفّر jQuery وظيفتين مُهمّتين لإدارة الحركات:

  • ‏‎.stop()‎: تُوقف الحركات الجارية على العناصر المُحدّدة.
  • ‏‎.delay()‎: تُؤخِّر بدء الحركة القادمة بالمقدار الذي يُمرّر إليها (بالميللي ثانية).

تُوفّر jQuery أيضًا وظائف لإدارة تعاقب الحركات وتنظيمها في "طوابير"، وإنشاء طوابير مُخصّة، وإضافة دوالّ مُخصّصة إلى هذه الطّوابير. مناقشة هذه الوظائف موضوع أكبر من هذه السّلسلة، ولكن قد ترغب بالاطّلاع عليها في وثائق jQuery.

ترجمة (بشيء من التصرف) للجزء الخامس من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>63Sun, 19 Apr 2015 12:31:15 +0000أحداث jQuery وكيفيّة تفويضهاhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A3%D8%AD%D8%AF%D8%A7%D8%AB-jquery-%D9%88%D9%83%D9%8A%D9%81%D9%8A%D9%91%D8%A9-%D8%AA%D9%81%D9%88%D9%8A%D8%B6%D9%87%D8%A7-r62/

تُسهّل jQuery الاستجابة لتفاعل المُستخدم مع صفحات الويب. معنى هذا أنّ بإمكانك تنفيذ أمرٍ ما عندما ينقر المُستخدم على جزءٍ مُعيّن من الصّفحة، أو عندما يُحرّك مؤشّر الفأرة فوق عنصر في نموذج مثلاً. في المثال التّالي، لدينا أمر يُنفَّذ عندما ينقر المُستخدم فوق أيّ عنصر قائمة في الصّفحة:

$( 'li' ).click(function( event ) {
  console.log( 'clicked', $( this ).text() );
});

جرّب المثال في ساحة التّجربة  (تأكد من ضغط الزرّ Run with JS في هذ المثال وكلّ الأمثلة التّالية)

يُحدّد النّصّ السّابق كلّ عناصر القائمة ويُسند إليها دالّة تتولّى حدث النّقر على كلّ عنصر، باستخدام وظيفة ‎.click()‎ في jQuery.

توفّر jQuery وظائف مُختصرةً عديدةً لربط الأحداث، وكلّ من هذه الوظائف يوافق حدث DOM أصليًّا:

اسم الحدث الأصليّ                    الوظيفة المُختصرة
‏click‎.click()
‏keydown.keydown()
‏keypress.keypress()
‏keyup.keyup()
‏mouseover.mouseover()
‏mouseout.mouseout()
‏mouseenter.mouseenter()
‏mouseleave.mouseleave()
‏scroll.scroll()
‏focus.focus()
‏blur.blur()
‏resize.resize()

تستخدم هذه الوظائف المُختصرة الوظيفة ‎.on()‎ ما وراء الكواليس، وهي وظيفة يمكنك استخدامها بنفسك لمرونةٍ أكبر. وعند استخدامك لها، فإنّك تُمرّر اسم الحدث الأصليّ كمُعامل أوّل للوظيفة، ثمّ دالّة تتولى الحدث كمعامل ثانٍ:

$( 'li' ).on( 'click', function( event ) {
  console.log( 'clicked', $( this ).text() );
});

جرّب المثال في ساحة التّجربة

ما إن "تربط" مُتولّي الحدث بعنصرٍ من العناصر، فبإمكانك إثارة هذا الحدث بـjQuery أيضًا:

$( 'li' ).trigger( 'click' );

وإن كان للحدث الّذي تُريد إثارته وظيفةٌ مختصرة (كما ورد في الجدول السّابق)، فبإمكانك إثارة الحدث باستدعاء الوظيفة المختصرة ذاتها:

$( 'li' ).click();

ملاحظة: عندما تُثير حدثًا باستخدام ‎.trigger()‎، فإنّك تستدعي مُتولّيات الأحداث الّتي أُنشئت في JavaScript فقط ولا تستدعي السّلوك الافتراضيّ للحدث. فمثلًا إن أثرت حدث النّقر على رابط (عنصر <a>) فلن ينتقل المتصفّح إلى الرّابط المُسند إليه في صفة href (مع أنّ بإمكانك كتابة أوامر تُنفّذ هذه الغاية).

بعد أن تربط حدثًا بُعنصر، بإمكانك فكّ هذا الارتباط باستخدام الوظيفة ‎.off()‎ الّتي تُزيل أية مُتولّيات ارتبطت بهذا الحدث:

$( 'li' ).off( 'click' );

حصر الأحداث ضمن فضاء أسماء

من المزايا الّتي تُتيحها ‎.on()‎ إمكانيّة حصر الأحداث ضمن "فضاء أسماء". قد تتساءل عن الحاجة لذلك. افترض مثلًا أنّك تريد ربط بعض الأحداث بعنصر ما، ثمّ إزالة بعض المُتولّيات، يمكنك أن تفعل ما فعلناه في الفقرة الماضية:

تحذير: أسلوب برمجيّ غير مُفضّل

$( 'li' ).on( 'click', function() {
  console.log( 'a list item was clicked' );
});

$( 'li' ).on( 'click', function() {
  registerClick();
  doSomethingElse();
});

$( 'li' ).off( 'click' );

إلّا أنّ هذا الأسلوب سيُزيل كلّ مُتولّيات النقر على كلّ عناصر القوائم، وليس هذا ما نريد. إذا ربطت متولّيًا للأحداث محصورًا ضمن فضاء أسماء، فبإمكانك استهدافه بدقّة:

$( 'li' ).on( 'click.logging', function() {
  console.log( 'a list item was clicked' );
});

$( 'li' ).on( 'click.analytics', function() {
  registerClick();
  doSomethingElse();
});

$( 'li' ).off( 'click.logging' );

هذا الأسلوب لا يؤثّر على الأحداث المرتبطة بالنّقر والمُتعلّقة بأغراض إحصاءات الاستخدام في الصّفحة، بينما يزيل أحداث النّقر المُتعلّقة بالسّجلّات.

بإمكاننا استخدام ميزة حصر الأحداث لإثارة أحداثٍ مُحدّدة:

$( 'li' ).trigger( 'click.logging' );

ربط أحداث مُتعدّدة في وقت واحد

ميزة أخرى تُوفّرها ‎.on()‎، وهي إمكانيّة ربط أحداث مُتعدّدة في وقتٍ واحد. افترض مثلًا أنّك تريد تنفيذ أمرٍ مُعيّن عندما يُمرّر المستخدم الصّفحة أو يغيّر قياس النّافذة. فهذه الوظيفة تُتيح لك تمرير الحدثين معًا مفصولين بمسافة في سلسلة نصيّة، يتبعهما الدّالّة الّتي تريد أن تتولّى الحدثين:

$( 'input[type="text"]' ).on('focus blur', function() {
  console.log( 'The user focused or blurred the input' );
});

$( window ).on( 'resize.foo scroll.bar', function() {
  console.log( 'The window has been resized or scrolled!' );
});

جرّب المثال في ساحة التّجربة

تمرير دوالّ مُسمّاة كُمتولّيات الأحداث

في كلّ أمثلتنا السّابقة، كنّا نُمرّر دوالّ مجهولة كمُتولّيات للأحداث، ولكن يمكننا إنشاء دالّة قبل إمرارها وحفظها في مُتغيّر ثمّ تمرير هذا المُتغيّر كمُتولّي الحدث. هذا يُفيد في حال أردت استخدام الدّالة نفسها لتتولّى أحداثًا مُختلفة أو أحداثًا من عناصر مُختلفة:

var handleClick = function() {
  console.log( 'something was clicked' );
};

$( 'li' ).on( 'click', handleClick );
$( 'h1' ).on( 'click', handleClick );

كائن الحدث

في كلّ مرّة يُثار فيها حدثٌ ما، تستقبل الدّالّة المُتولّية للحدث مُعاملًا واحدًا، وهو كائن الحدث الّذي يتبع معايير مُتّفقًا عليها بين كلّ المُتصفّحات. ولهذا الكائن خصائص مُفيدة كثيرة، منها:

$( document ).on( 'click', function( event ) {
  console.log( event.type );    // نوع الحدث، مثل: "click"
  console.log( event.which );   // الزرّ أو المفتاح الّذي ضغط
  console.log( event.target );  // العنصر الّذي انطلق منه الحدث
  console.log( event.pageX );   // موقع مؤشّر الفأرة على المحور X
  console.log( event.pageY );   // موقع مؤشّر الفأرة على المحور Y
});

جرّب المثال في ساحة التّجربة

داخل مُتولّي الأحداث

عندما تُحدِّد الدّالة المُتولّية لحدث ما، فإنّه يُتاح لهذه الدّالّة وصول إلى عنصر DOM الخام الّذي أطلق الحدث كسياق الدّالّة this، فإن أردت استخدام jQuery للتّعامل مع الحدث، فأحطه بـ‎$()‎:

$( 'input' ).on( 'keydown', function( event ) {
  // this: العنصر الخام الّذي أطلق الحدث
  // event: كائن الحدث

  // غير لون الخلفية إلى أحمر إذا ضغط زر مسح الحرف، أو إلى أخضر فيما سوى ذلك
  $( this ).css( 'background', event.which === 8 ? 'red' : 'green' );
});

جرّب المثال في ساحة التّجربة

منع السّلوك المبدئيّ

قد ترغب أحيانًا في منع السّلوك المبدئيّ لحدثٍ ما، كأن ترغب في تولّي النّقر فوق رابط باستخدام AJAX، بدلًا من بدء إعادة تحميل كاملةٍ للصّفحة (وهو السّلوك المبدئيّ). يصل العديد من المُطوّرين إلى هذه الغاية بإعادة false من مُتولّي الحدث، ولكنّ لهذا تأثيرًا جانبيًّا آخر: فهو يمنع تفشّي الحدث (propagation) أيضًا (سنشرحه بعد قليل)، ممّا قد يعطي نتائج غير مرغوبة. الطّريقة السّليمة لمنع السّلوك المبدئيّ لحدث تكون باستدعاء ‎.preventDefault()‎ على كائن الحدث:

$( 'input' ).on( 'keydown', function( event ) {
  // this: العنصر الخام الّذي أطلق الحدث
  // event: كائن الحدث

  // غير لون الخلفية إلى أحمر إذا ضغط زر مسح الحرف، أو إلى أخضر فيما سوى ذلك
  $( this ).css( 'background', event.which === 8 ? 'red' : 'green' );
});

جرّب المثال في ساحة التّجربة

صعود الأحداث (Event bubbling)

تمعّن النّص البرمجيّ التّالي:

$( 'a' ).on( 'click', function( event ) {
  // امنع الحدث المبدئيّ.
  event.preventDefault();
  // سجّل ما حدث.
  console.log( 'I was just clicked!' );
});

جرّب المثال في ساحة التّجربة

يربط هذا النّص مُتولّيًا للنقر على كلّ العناصر في الصّفحة (وهو أمر يجب ألّا تفعله نهائيًّا في المواقع الحقيقيّة)، بالإضافة إلى عنصري النّافذة والمُستند. ولكن ما الّذي يحدث عندما تنقر على عنصر <a> مُدرج داخل عناصر أخرى؟ الحقيقة أنّ الحدث سيُثار على العنصر <a> وعلى كلّ العناصر الّتي تُحيط به صعودًا حتّى الوصول إلى العنصرين document وwindow.

يُسمّى هذا السّلوك "صعود الأحداث"، فالحدث يُثار على العنصر الّذي نقر عليه المُستخدم، ثمّ ينتقل صاعدًا إلى كلّ العناصر الّتي تحويه وصولًا إلى أعلى DOM، إلّا إن استدعيت الوظيفة ‎.stopPropagation()‎ على كائن الحدث.

بإمكانك فهم ذلك بسهولة أكبر في هذا المثال:

<a href="#foo"><span>I am a Link!</span></a>
<a href="#bar"><b><i>I am another Link!</i></b></a>
$( 'a' ).on( 'click', function( event ) {
  event.preventDefault();
  console.log( $( this ).attr( 'href' ) );
});

عندما تنقر على "I am a Link!‎"، فإنك لا تنقر فعليًّا على العنصر <a>، بل على العنصر <span> داخله، ولكن الحدث "يصعد" نحو العنصر <a> ويُثير حدث النّقر المُرتبط به.

تفويض الأحداث (Event delegation)

يسمح لنا مفهوم "صعود الأحداث" بإنجاز فكرة "تفويض الأحداث"، أي ربط الأحداث بعناصر في مستوى أعلى، ثمّ اكتشاف أيّ عنصر فرعيّ ضمنها أثار الحدث. بإمكاننا مثلًا ربط حدث بقائمة غير مُرتّبة، ثمّ تحديد أيّ العناصر أثار الحدث:

$( '#my-unordered-list' ).on( 'click', function( event ) {
  console.log( event.target ); // يُسجّل العنصر الّذي أثار الحدث
});

جرّب المثال في ساحة التّجربة

بالطّبع ستتعقّد الأمور إذا احتوت عناصر القائمة على عناصر فرعيّة ضمنها، ولهذا تُقدّم jQuery وظيفةً مُساعدة تسمح لنا بتحديد أي العناصر نهتمّ بها، مع الاحتفاظ بالحدث مُرتبطًا بالعنصر ذي المُستوى الأعلى:

$( '#my-unordered-list' ).on( 'click', 'li', function( event ) {
  console.log( this ); // يُسجّل عنصر القائمة الّذي أثار الحدث
});

جرّب المثال في ساحة التّجربة

لتفويض الأحداث فائدتان اثنتان: أولاهما أنّه يسمح بربط عددٍ أقلّ من مُتولّيات الأحداث مقارنة بالعدد الّذي نحتاجه لو قرّرنا ربط الأحداث بالعناصر المُنفردة، وهذا يُحسّن الأداء في الصّفحة بصورة كبيرة. وثاني الفائدتين أنّه يسمح لنا بربط الأحداث بالآباء (كالقائمة غير المرتّبة في مثالنا)، مع اطمئنانا إلى أنّ الأحدث ستُثار حتّى وإن تغيّرت مُحتويات العنصر الأب.

هذا النّصّ مثلًا، يُضيف عنصر قائمةٍ جديدًا بعد تفويض الحدث إلى العنصر الأب، والنّقر فوق هذا العنصر سيُثير الحدث كما ينبغي، دون الحاجة لربط أيّة أحداث جديدة:

$( '#my-unordered-list' ).on( 'click', 'li', function( event ) {
  console.log( this ); // يُسجّل عنصر القائمة الّذي نُقر عليه
});

$( '<li>a new list item!</li>' ).appendTo( '#my-unordered-list' );

جرّب المثال في ساحة التّجربة

خاتمة

تعلّمنا في هذا الجزء الوسائل المُختلفة للإنصات إلى تفاعل المُستخدم مع صفحتنا، بما في ذلك كيفيّة الاستفادة من التفويض لتحسين كفاءة ربط الأحداث بالعناصر. سنتعرّف الجزء القادم كيف نُحرّك العناصر باستخدام وظائف التأثيرات الحركيّة في jQuery.

ترجمة (بشيء من التصرف) للجزء الرابع من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>62Thu, 16 Apr 2015 05:25:00 +0000توابع الانتقال عبر الصّفحة والتّعديل على العناصر في jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D8%AA%D9%88%D8%A7%D8%A8%D8%B9-%D8%A7%D9%84%D8%A7%D9%86%D8%AA%D9%82%D8%A7%D9%84-%D8%B9%D8%A8%D8%B1-%D8%A7%D9%84%D8%B5%D9%91%D9%81%D8%AD%D8%A9-%D9%88%D8%A7%D9%84%D8%AA%D9%91%D8%B9%D8%AF%D9%8A%D9%84-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D9%81%D9%8A-jquery-r61/

توفّر jQuery أدوات قويّة لإيجاد العنصر أو العناصر التي تريدها في الصّفحة، ثمّ العمل بهذه العناصر للوصول إلى النّتيجة المرغوبة. تسهّل jQuery بأدواتها هذه عمليّات كانت لتكون أكثر تعقيدًا لو أردنا تنفيذها من خلال وظائف DOM الأصليّة.

سنطّلع في هذا الجزء على بعض (لا كلّ) وظائف الانتقال عبر الصّفحة وتّعديل العناصر في jQuery. وقبل أن نبدأ، علينا فهم بعض المصطلحات الضّروريّة. لنفترض أنّ لدينا نصّ HTML التّالي: 

<ul>
  <li>
    <span>
      <i>Foo</i>
    </span>
  </li>
  <li>Bar</li>
</ul>
  • نقول عن عنصر القائمة الأوّل (<li>) أنّه ابن (child) القائمة غير المرتّبة (<ul>).
  • نقول عن القائمة غير المرتّبة (<ul>) أنّها والد (parent) عنصري القائمة الاثنين.
  • نقول عن العنصر <span> أنّه خَلَفُ (descendant) القائمة غير المرتّبة.
  • نقول عن القائمة غير المرتّبة أنّها سَلَفٌ (ancestor) لكلّ ما داخلها.
  • نقول عن عنصري القائمة أنّهما شقيقان (siblings).

الانتقال عبر الصّفحة (Traversal)

تسمح jQuery لنا بالانتقال عبر عناصر HTML الّتي تكوّن صفحتنا. إذ نُنشئ أوّلًا تحديدًا مبدئيًّا ثمّ ننتقل عبر DOM انطلاقًا منه. وخلال مسيرنا عبر DOM، فإنّنا نُغيّر من تحديدنا الأوّل فنضيف إليه أو نحذف منه بعض العناصر، أو نستبدل به تحديدًا آخر بالكامل في بعض الأحيان.

تصفية التّحديدات

بإمكانك تصفية تحديد موجودٍ بحيث يتضمّن فقط العناصر الّتي تطابق معاييرَ مُحدّدة. بإمكانك مثلًا إجراء التّصفية بإحدى الطّرق التّالية: 

var listItems = $( 
'li' );

// صفِّ التّحديد ليحوي فقط العناصر ذات الصّنف 'special'
var special = listItems.filter( '.special' );

// صفّ التّحديد ليحوي فقط العناصر من غير الصّنف 'special'
var notSpecial = listItems.not( '.special' );

// صفّ التّحديد ليحوي فقط العناصر الّتي تتضمّن span
var hasSpans = listItems.has( 'span' );

من المهمّ أن تعرف أن الوظيفة ‎.not()‎ ليست عكس ‎.is()‎، لأنّ ‎.is()‎ تُعيد قيمة منطقيّة (true أو false)، بينما تُعيد ‎.not()‎ كائن jQuery جديدًا.

إيجاد العناصر انطلاقًا من تحديد

يمكن الاستفادة من تحديد أوّليّ كأساس لإنشاء تحديدات إضافيّة؛ فإذا كان لديك تحديدٌ يحوي عنصر قائمة مُفردًا مثلًا، وأردت التّعامل مع "أشقّائه" أو مع القائمة غير المُرتّبة الّتي تحويه، فبإمكانك إنشاء تحديد جديد انطلاقًا من التّحديد الموجود بسهولة: 

// اختر 
أوّل عنصر قائمة في الصّفحة
var listItem = $( 'li' ).first(); // أيضًا: .last()

// اختر أشقّاء عنصر القائمة
var siblings = listItem.siblings();

// اختر الشّقيق التّالي لعنصر القائمة
var nextSibling = listItem.next(); // أيضًا: .prev()

// اختر والد عنصر القائمة
var list = listItem.parent();

// اختر عناصر القائمة الّتي تنحدر مباشرةً من القائمة
var listItems = list.children();

// اختر كلّ عناصر القائمة ضمن القائمة، بما في ذلك العناصر الفرعيّة
var allListItems = list.find( 'li' );

// اختر كل أسلاف عنصر القائمة ذوي الصّنف "module"
var modules = listItem.parents( '.module' );

// اختر أقرب سلفٍ لعنصر القائمة له الصّنف "module"
var module = listItem.closest( '.module' 
);

بإمكانك كذلك الإضافة على التّحديد الحاليّ باستخدام الوظيفة ‎.add()‎، الّتي تقبل مُحدِّدًا أو مصفوفة عناصر أو نص HTML أو كائن jQuery. 

var list = $( '#my-unordered-list' );

// افعل شيئًا ما بالقائمة ثم ...

var listAndListItems = list.add( '#my-unordered-list li' 
);

العودة إلى التّحديد الأصليّ

تحتفظ jQuery بإشارة إلى تحديد الأصليّ عندما تستخدمه للانتقال إلى تحديدات أخرى انطلاقًا منه، في حال أردت العودة إلى التّحديد الأصليّ. افترض مثلًا أنّك حدّدت قائمة غير مرتّبه، ثمّ أردت التّعديل على عناصر القائمة، ثمّ العودة مجدّدًا للعمل على القائمة غير المرتّبة، عندها بإمكانك استخدام الوظيفة ‎.end()‎ للرّجوع إلى التّحديد الأصليّ: 

$( '#my-unordered-list' )
 .find('li')

 // نحن الآن نعمل على عناصر القائمة
 .addClass('special')

.end()

// عدنا الآن للعمل على القائمة ذاتها
.addClass('super-special');

تُسهِّل الوظيفة ‎.end()‎ إجراء تعديلات كثيرة في جملة واحدة، إلّا أنّ هذا الأسلوب لا يُلقي بالًا لوضوح النّصّ البرمجيّ، فهو أشبه بأن تحكي قصّة دون أن تلتقط أنفاسك. لهذا السّبب لا أنصحك بالإكثار من استعماله، فهو يؤدّي في معظم الحالات إلى جعل قراءة النّصّ البرمجيّ وصيانته وتنقيحه أكثر صعوبة.

فيما يلي حلّ أفضل للمشكلة ذاتها: 

var list = $( 
'#my-unordered-list' );
var listItems = list.find('li');

listItems.addClass( 'special' );
list.addClass( 'super-special' );

توفّر jQuery أيضًا الوظيفة ‎.addBack()‎ إن أردت إضافة تحديدك الأصليّ إلى التّحديد الحاليّ. مثال: 

$( 'li.special' )

 .siblings()

  // نحن نعمل الآن على أشقّاء التّحديد السّابقة
  .removeClass( 'important' )

 .addBack()

 // الآن نعمل على عناصر القائمة الأصليّة وأشقائها **معًا**
 .addClass( 'urgent' );

هل اختلط عليك الأمر؟ الوظيفة ‎.addBack()‎ تشبه الوظيفة ‎.end()‎ في عيوبها، فكلاهما (وإن كان لهما استخدامها) يزيدان تعقيد النّصّ البرمجيّة. الحلّ الأفضل هو استخدام الوظيفة ‎.add()‎ لدمج التّحديدين الأصليين معًا: 

var specialListItems = $( 
'li.special' );
var otherListItems = specialListItems.siblings();

otherListItems.removeClass( 'important' );
specialListItems.add( otherListItems ).addClass( 'urgent' 
);

هناك وظائف عديدة لم نتطرّق إليها هنا، يمكنك الاطّلاع عليها في وثائق الانتقال عبر الصّفحة.

التّعامل مع العناصر (Manipulation)

تسمح وظائف التّعامل مع العناصر في jQuery بتغيير DOM الصّفحة بصياغة أكثر بساطة من تلك الّتي توفّرها وظائف DOM الخام. تُعيد وظائف التّعامل مع العناصر في jQuery كائن jQuery الّتي استدعيت للعمل عليه، وهذا يعني إمكانيّة ربطها في سلسلة أو دمجها مع وظائف jQuery أخرى كالّتي ناقشناها في الفقرات السّابقة.

تعديل العناصر

كثيرةٌ هي طرق تعديل العناصر في jQuery. سنطّلع فيما يلي على طرق إنجاز المهام الأكثر شيوعًا.

إضافة أو حذف الأصناف (classes)

يمكن الاستفادة من أصناف الكائنات في HTML بأن نستهدفها في CSS بغرض تنسيقها، كما يُستفاد منها في إنشاء تحديدات jQuery. فمثلًا يمكن لعنصر في الصّفحة أن يقع تحت الصّنف hidden، والّذي يُستخدم في CSS لجعل خاصّة display موافقة للقيمة none للعناصر من هذا الصّنف، ثمّ يمكن حذف هذا الصّنف أو إضافته لتغيير حالة ظهور العناصر الموافقة في jQuery: 

$( 
'li' ).addClass( 'hidden' );
$( 'li' ).eq( 1 ).removeClass( 'hidden' 
);

جرّب المثال في ساحة التّجربة (تأكد من ضغط زر Run with JS في هذا المثال وكلّ الأمثلة التالية)

إن تطلّبت حالتك إضافة صنفٍ أو حذفه مرارًا، فبإمكانك استخدام الوظيفة ‎.toggleClass()‎ الّتي تُبدّل حالة الصّنف على العنصر، فتضيفه إن لم يكن موجودًا أو تحذفه إن وُجد: 

$( 'li' ).eq( 1 
).toggleClass( 'hidden' );

جرّب المثال في ساحة التّجربة

تغيير المظهر

ملاحظة: يُفضّل دومًا استخدام الأصناف واستهدافها بقواعد CSS لتغيير طريقة عرض العناصر، والاقتصار على استخدام jQuery في إضافة هذه الأصناف أو حذفها كما ورد للتوّ. في هذه الفقرة سنتعرّف كيف نُغيّر مظاهر العناصر مُباشرةً في jQuery، ولكننا نُفضِّل دومًا الأسلوب الأوّل إن كان يُحقِّق النّتائج ذاتها.

عندما تعجز عن تحقيق هدفك بإضافة الأصناف أو حذفها، فإنّ jQuery تقدّم الوظيفة .css() الّتي تسمح بتعيين مظهر العناصر مباشرةً، ولعلّ هذا يكون ضروريًّا عادةً عندما تحتاج إلى إسناد قيم عدديّة لا يمكن حسابها إلّا أثناء عمل التّطبيق، كمعلومات توضّع العناصر في الصّفحة. لا يُفضَّل استخدام الوظيفة ‎.css()‎ لإجراء تنسيقات بسيطة مثل ‎display: none‎، بل يُفضَّل في معظم الحالات إنجاز الغاية ذاتها باستخدام الأصناف وCSS.

افترض مثلًا أنّنا نريد تعيين مظهر العنصر بالاعتماد على عرض والده، وربّما يصعب أو يستحيل معرفة عرض الوالد مُسبقًا عند اعتماد تخطيط مرنٍ للصّفحة. في هذه الحالة قد نلجأ إلى الوظيفة ‎.css()‎ لتنسيق العنصر: 

var list = $( 
'#my-unordered-list' );
var width = Math.floor( list.width() * 0.1 );

list.find('li').each(function( index, elem ) {
  var padding = width * index;
  $( elem ).css( 'padding-right', padding + 'px' 
);
});

جرّب المثال في ساحة التّجربة

إن احتجت إلى تعيين أكثر من خاصّة في وقت واحدٍ، مرّر كائنًا إلى الوظيفة ‎.css()‎ بدلًا من اسم الخاصّة وقيمتها. لاحظ أنّ عليك إحاطة أيّة خاصّة تحوي الرّمز "-" بعلامتي اقتباس: 

$( 
'li' ).eq( 1 ).css({
 'font-size': '20px',
 'padding-right': '20px'
});

جرّب المثال في ساحة التّجربة

تغيير قيم النّماذج (forms)

تقدّم jQuery الوظيفة ‎.val()‎ لتعديل قيمة العناصر في النّماج مثل input وselect.

بإمكانك تمرير سلسلة نصّيّة لتعيين محتوى حقول input النّصّيّة: 

$( 
'input[type="text"]' ).val( 'new value' 
);

جرّب المثال في ساحة التّجربة

بالنّسبة للعناصر من نوع select، بإمكانك تعيين الخيار المُختار باستخدام ‎.val()‎ أيضًا: 

$( 'select' ).val( '2' 
);

جرّب المثال في ساحة التّجربة

أمّا لحقول input من نوع checkbox، فعليك تعيين الخاصّة checked على العنصر بالوظيفة ‎.prop()‎. 

$( 
'input[type="checkbox"]' ).prop( 
'checked', 'checked' );

جرّب المثال في ساحة التّجربة

ملاحظة: أُضيفت الوظيفة ‎.prop()‎ في الإصدارة 1.6 من jQuery؛ وقبل ذلك كانت تُستخدم الوظيفة ‎.attr()‎ للغرض ذاته، وهي ما تزال تعمل في الإصدارات الحديثة من jQuery، ولكنّها في حالة checked تكتفي باستدعاء ‎.prop()‎. إن كنت تستخدم إصدارةً أحدث من 1.6، فأنصحك باستخدام ‎.prop()‎ دومًا لتعيين الخاصّة checked وخصائص عناصر DOM الأخرى. اطّلع على الوثائق لتفاصيل أكثر.

تغيير الصّفات (attributes) الأخرى

بإمكانك استخدام وظيفة ‎.attr()‎ لتغيير صفات العناصر، فيمكنك مثلًا تغيير عنوان رابط (الخاصّة title لعنصر <a>): 

$( 'a' ).attr( 'href', 
'new title');

عند تعيين قيمة لصفة، بإمكانك تمرير دالّة في موضع المُعامل الثّاني للوظيفة، ومثلها مثل كلّ دوالّ الكتابة السّابقة، تتلقّى هذه الدّالّة مُعاملين اثنين: دليل العنصر الّذي تعمل عليه، والقيمة الحاليّة للصّفة. يجب أن تُعيد هذه الدّالة القيمة الجديدة للصّفة: 

$( 'a' ).attr( 
'href', function(index, value) {
  return value + '?special=true';
});

جرّب المثال في ساحة التّجربة

بإمكانك حذف الصّفات أيضًا، وذلك باستخدام ‎.removeAttr()‎.

الحصول على معلومات من العناصر

ناقشنا في الجزء السّابق (أساسيّات jQuery) فكرة وظائف القراءة والكتابة. كلّ الوظائف الّتي يمكن استخدامها لتغيير العناصر، يمكن أيضًا استخدامها لقراءة معلومات من تلك العناصر. فيمكن مثلًا استخدام الوظيفة ‎.val()‎ الّتي وصفناها أعلاه كوظيفة قراءة وكتابة معًا: 

var input = $( 'input[type="text"]' );
input.val( 'new value' );
input.val(); // returns 'new value'

وكذلك الأمر بالنّسبة للوظيفة ‎.css()‎، إذ يمكن استخدامها لقراءة قيمة خصائص CSS مُفردة بإمرار اسم الخاصّة فقط دون قيمة: 

var listItemColor = $( 'li' ).css( 
'color' );

عندما تُستخدم وظائف التّعامل مع العناصر للقراءة، فإنّها تعمل فقط مع العنصر الأول في التّحديد، باستثناء الوظيفة ‎.text()‎ الّتي تقرأ المحتوى النّصيّ لكلّ العناصر المُحدّدة إن لم يُمرّر معامل إليها.

إضافة العناصر إلى الصّفحة

سواءٌ حدّدت عنصرًا أو أنشأت واحدًا جديدًا، فبإمكانك إضافة هذا العنصر إلى الصّفحة يمكن فعل ذلك بطريقتين: باستدعاء وظيفة تتبع للعنصر (أو العناصر) المطلوب إضافته، أو باستدعاء وظيفة تتبع لعنصر مرتبط بذلك الّذي تريد إضافته.

افترض مثلًا أنّك تريد نقل عنصر في قائمة من رأسها إلى ذيلها، هناك عدّة طرق لفعل ذلك.

بإمكانك مثلًا إضافة العنصر إلى القائمة باستدعاء الوظيفة ‎.appendTo()‎ على عنصر القائمة ذاته: 

var listItem = $( '#my-unordered-list li' ).first();
listItem.appendTo( '#my-unordered-list' );

جرّب المثال في ساحة التّجربة

وبإمكانك أيضًا إضافة العنصر باستدعاء ‎.append()‎ على القائمة: 

var listItem = $( '#my-unordered-list li' ).first();
$( '#my-unordered-list' ).append( listItem );

أو إضافته باستدعاء ‎.insertAfter()‎ على العنصر المُراد نقله مُمرّرًا العنصر الأخير في القائمة إلى الوظيفة: 

var listItems = $( '#my-unordered-list li' );
listItems.first().insertAfter( listItems.last() );

جرّب المثال في ساحة التّجربة

أو إضافته باستدعاء ‎.after()‎ على العنصر الأخير في القائمة مُمرًّرا العنصر الأولى في القائمة إلى الوظيفة: 

var listItems = $( '#my-unordered-list li' );
listItems.last().after( listItems.first() );

جرّب المثال في ساحة التّجربة

هناك طرق آخرى كثير لإضافة العناصر، فبإمكانك إضافتها حول عناصر أخرى أو داخلها أو خارجها بحسب حاجتك.

تعتمد أكثر الطّرق كفاءة في إضافة عنصر إلى الصّفحة على العناصر الّتي تتوفّر بين يديك بالفعل. فقد ترغب في إضافة العنصر إلى القائمة غير المُرتّبة في المثال السّابق إن كنت قد حدّدت القائمة غير المرتّبة من قبل لغرض آخر؛ أو إن كنت قد حدّدت عناصر القائجة جميعها، فقد يكون إضافة العنصر الأول بعد العنصر الأخير أمرًا أسهل.

عندما تختار الطّريقة المناسبة لإضافة العنصر، فلا تكتفِ بالنّظر في سهولة الطّريقة، بل فكّر في إمكانيّة صيانتها لاحقًا. تجنّب الطّرق الّتي تعتمد على افتراض بنية مُحدِّدة بدقَّة لصفحتك، فقد تقرّر تغيير هذه البنية فيما بعد.

نسخ العناصر

بإمكانك إنشاء نسخة من عنصر أو مجموعة عناصر باستخدام الوظيفة ‎.clone()‎ في jQuery، وستُنشئ النُّسخة في الذّاكرة دون أن تُدرج في الصّفحة، فعليك فعل ذلك بنفسك إن أردته. بإمكانك تعديل العناصر المنسوخة قبل إضافتها: 

var clones = $( 'li' ).clone();

clones.html(function( index, oldHtml ) {
  return oldHtml + '!!!';
});

$( '#my-unordered-list' ).append( clones );

جرّب المثال في ساحة التّجربة

ملاحظة*: لن تمنعك jQuery من نسخ عنصر ذي مُعرِّف (ID)، ولكن عليك التأكّد من حذف المُعرِّف أو تغييره في العنصر المنسوخ بتعديل الصّفة id قبل إدراجه في المستند، إذ لا ينبغي أ يوجد عنصران بمُعرِّف واحدٍ في الصّفحة.

حذف العناصر

هناك ثلاث طرق لحذف العناصر من الصّفحة: ‎.remove()‎‏ و‎.detach()‎‏ و‎.replaceWith()‎‏، ولكلّ منها غرضٌ مُختلف.

يجب استخدام ‎.remove()‎‏ عند الحاجة لحذف العناصر بصورة دائمة، فهي ستحذف مع العنصر كلّ مُتوليّات الأحداث المُرتبطة به (event handlers). تُعيد الوظيفة ‎.remove()‎‏ إشارةً إلى العناصر المُحذوفة، ولكن عند إضافة هذه العناصر مرّة ثانيةً، فلن تكون أيّة أحداث مُرتبطةً بها. 

$( '#my-unordered-list li' ).click(function() {
  alert( $( this ).text() );
});

var removedListItem = $( '#my-unordered-list li' ).first().remove();

removedListItem.appendTo( '#my-unordered-list' );
removedListItem.trigger( 'click' ); // لا رسالة تنبيه!

جرّب المثال في ساحة التّجربة

تُفيد الوظيفة ‎.detach()‎‏ في حذف العناصر مؤقّتًا من الصّفحة، فمثلًا إن رغب في إجراء تعديلات كبيرة على بنية الصّفحة باستخدام jQuery، فقد يكون حذف العناصر مؤقّتًا من الصّفحة ثمّ إضافتها ثانيةً أفضل أداءً بمراحل. ستحتفظ العناصر المحذوفة بهذه الوظيفة بمُتولّيات الأحداث المُرتبطة بها، ويمكن بعد ذلك إضافتها إلى الصّفحة مُجدّدًا باستخدام ‎.appendTo()‎‏ أو غيرها من وظائف الإضافة. 

$( 
'#my-unordered-list li' ).click(function() {
  alert( $( this ).text() );
});

var detachedListItem = $( '#my-unordered-list li' 
).first().detach();

// افعل شيئًا ما مُعقّدًا بعنصر القائمة

detachedListItem.appendTo( '#my-unordered-list' );
detachedListItem.trigger( 'click' ); // 
alert!

أخيرًا لدينا الوظيفة ‎.replaceWith()‎‏ الّتي تُحلِّ عنصرًا أو نصّ HTML محلّ عنصرٍ أو عناصر أخرى. تُعاد العناصر الّتي أُزيلت من الوظيفة، ولكنّ كلّ متولّيات الأحداث المرتبطة بها تُحذف، تمامًا كالوظيفة ‎.remove()‎‏. 

$( '#my-unordered-list li' ).click(function() {
  alert( $( this ).text() );
});

var replacedListItem = $( '#my-unordered-list li' ).first()
  .replaceWith( '<li>new!</li>' );

replacedListItem.appendTo( '#my-unordered-list' );

replacedListItem.trigger( 'click' ); // لا رسالة تنبيه!

جرّب المثال في ساحة التّجربة

خاتمة

تعلّمنا في هذا الجزء الطّرق المختلفة للانتقال بين العناصر في الصّفحة، وكيفيّة نقلها وتغييرها وإضافة عناصر جديدة. سنتعلّم في الجزء القادم كيف نُنصِت لتفاعل المستخدم مع صفحتنا.

ترجمة (بشيء من التصرف) للجزء الثالث من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>61Tue, 14 Apr 2015 05:08:00 +0000أساسيّات jQueryhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D9%91%D8%A7%D8%AA-jquery-r60/

تُسهِّل مكتبة jQuery التّعامل مع محتويات صفحة HTML بعد أن يعرضها المتصفّح، وتوفّر أدوات تُساعدك في متابعة تفاعل المستخدم مع الصّفحة، وتحريك العناصر فيها، والتّواصل مع الخواديم دون إعادة تحميل الصّفحة. سنشرح هذه الأدوات بعد قليل. لنبدأ أوّلًا بالاطّلاع على أساسيّات jQuery، وكيف يمكن استخدام وظيفتها الأساسيّة: الوصول إلى عناصر مُحدَّدة في الصفحة وفعل شيءٍ ما بها.

ملاحظة: يفترض هذا الدّليل أنّك على علم بأساسيّات HTML ومُحدِّدات CSS. إن لم تكن تألف كيف يمكن استخدام مُحدّدات CSS للوصول إلى عناصر مُحدّدة في الصّفحة، فعليك أوّلًا تعلّم ذلك قبل الشروع في متابعة هذا الدّليل.

ما هذا الرمز: $؟

توفّر مكتبة jQuery الدّالّة jQuery، التي تتيح لك تحديد العناصر بمُحدّدات CSS.

var listItems = jQuery( 'li' );

إن قرأت من قبل برامج تستخدم jQuery، فلا بدّ أنّك اعتدت على هذا:

var listItems = $( 'li' );

كما ناقشنا في الجزء السّابق (أساسيّات JavaScript)، فكلّ الأسماء تكاد تكون سّليمة في JavaScript ما لم تبدأ برقم أو تحوي إشارة "-". ولذا فالاسم $ في المثال الأخير ليس إلّا اسمًا مُختصرًا للدّالّة jQuery، ولو اطّلعت على مصدر jQuery، لقرأت هذا قرب نهايته:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

عندما تستدعي الدّالّة ‎$()‎ وتمرّر لها مُحدّدًا، فإنّك تحصل على كائن jQuery جديدٍ. الدّوالّ في JavaScript هي الأخرى كائنات، وهذا يعني أنّ للدّالّة $ (وjQuery بالطّبع) خصائص ووظائف أيضًا. مثلاً: يمكنك استخدام الخاصّة ‎$.support‎ لمعرفة ما الميزات الّتي يدعمها المتصفّح الحاليّ، كما يمكنك استخدام الوظيفة ‎$.ajax‎ لإرسال طلب AJAX.

ملاحظة: من الآن فصاعدًا سنستخدم $ بدلًا من jQuery في هذه السّلسلة سعيًا للاختصار. لاحظ أنّه إن احتوت صفحتك أكثر من مكتبة واحدة، فقد يُستخدم الاسم $ من مكتبة أخرى، ممّا يمنع عمل jQuery، فإن واجهتك مشكلة كهذه، جرّب استخدام jQuery.noConflict قبل تحميل المكتبات الأخرى.

‏‎$(document).ready()‎

قبل استخدام jQuery لفعل أيّ شيء في الصّفحة، علينا التأكّد من كون الصّفحة قد بلغت حالةً تسمح بتعديل محتوياتها. يمكن تنفيذ ذلك في jQuery بإحاطة برنامجنا ضمن دالّة ثمّ إمرار هذه الدّالة إلى ‎$(document).ready()‎. كما ترى في المثال التّالي، يمكن للدّالّة الّتي نمرّرها أن تكون مجهولة (بلا اسم):

$(document).ready(function() {
  console.log( 'ready!' );
});

هذا سيؤدّي إلى استدعاء الدّالّة الّتي مرّرناها إلى ‎.ready()‎ بعد أن يصبح المُستند (الصفحة) جاهزًا. ما الذي يحدث هنا؟ استخدمنا ‎$(document)‎ لإنشاء كائن jQuery من document في الصّفحة، ثمّ استدعينا الدّالّة ‎.ready()‎ على هذا الكائن، مُمرِّرين إليها الدّالّة الّتي نريد تنفيذها.

بما أنّك ستجد نفسك تُعيد كتابة هذا النّصّ مرارًا، فإنّ jQuery تقدّم لك طريقةً مُختصرةً لإنجازه، إذ تقوم الدّالّة ‎$()‎ بمهمّة مُختلفة عند إمرار دالّة إليها بدلًا من مُحدِّد CSS، وعندها تتصرّف وكأنّها اسم بديلٌ للوظيفة ‎$(document).ready()‎:

$(function() {
  console.log( 'ready!' );
});

ملاحظة: من الآن فصاعدًا، سنفترض أنّ النّصوص الّتي ترد في هذه السّلسلة مُحاطة بالعبارة ‎$(document).ready(function() { ... });‎، وسنترك هذه العبارة بغرض الإيجاز.

الوصول إلى العناصر

أبسط ما يمكن إنجازه بـjQuery تحديد بعض العناصر ثمّ فعل شيء ما بها. إن كنت تفهم مُحدّدات CSS، فستجد أنّ الوصول إلى بعض العناصر سهل ومباشر: ليس عليك إلا إمرار المُحدِّد المناسب إلى ‎$()‎.

$( '#header' ); // حدّد العنصر الّذي مُعرِّفه 'header'
$( 'li' );      // حدّد كل عناصر القوائم في الصّفحة
$( 'ul li' );   // حدّد كل عناصر القوائم الموجودة في قوائم غير مُرتّبة
$( '.person' ); // حدّد كل العناصر ذات الصّنف 'person'

من المهمّ أن تفهم أنّ أيّ تحديد تُجري لن يتضمّن إلّا العناصر الموافقة للمُحدّد والتي كانت موجودة في اللّحظة الّتي أجريت فيها التّحديد، بمعنى أنّك إذا كتبت ‎var anchors = $( 'a' );‎ ثمّ أضفت عنصر <a> إلى الصّفحة لاحقًا، فلن تحوي anchors العنصر الجديد.

طرق أخرى لإنشاء كائن jQuery

بالإضافة إلى إمرار مُحدّد بسيط إلى الدّالة ‎$()‎، يمكن إنشاء كائنات jQuery بطرق أخرى:

// أنشئ كائن jQuery من عنصر DOM
$( document.body.children[0] );

// أنشئ كائن jQuery من قائمة بعناصر DOM
$( [ window, document ] );

// أجرِ التّحديد بسياق عنصر DOM
var firstBodyChild = document.body.children[0];
$( 'li', firstBodyChild );

// أجرِ التّحديد ضمن تحديد سابق
var paragraph = $( 'p' );
$( 'a', paragraph );

هل يحتوي التّحديد الّذي أجريته على أيّة عناصر؟

ترغب أحيانًا في تنفيذ بعض الأوامر عندما يُطابق تحديدك عنصرًا أو أكثر فقط، ولكنّ الدّالّة ‎$()‎ تُعيدُ دومًا كائن jQuery، وهذا الكائن دائمًا صائب (truthy)، ولذا عليك فحص محتوى التّحديد لمعرفة إن كان يحوي أيّة عناصر.

تحذير: نصّ برمجيّ غير سليم

if ( $( '#nonexistent' ) ) {
  // خطأ! الأوامر هنا ستُنفَّذ دومًا!
}

if ( $( '#nonexistent' ).length > 0 ) {
  // صحيح! لن تُنفّذ الأوامر هنا إلّا إن احتوت الصّفحة على كائن مُعرّفه 'nonexistent'
}

بإمكاننا اختصار هذا الفحص أكثر بالاعتماد على كون 0 قيمة خاطئة (falsy):

if ( $( '#nonexistent' ).length ) {
  // لن تُنفّذ الأوامر هنا إلّا إن وجد عنصر مُطابق
}

الوصول إلى عناصر مُفردة من تحديد

إن كنت تحتاج التّعامل مع عنصر DOM خام من تحديد، فعليك الوصول إلى هذا العنصر من كائن jQuery. لنفترض مثلًا أنّك تريد الوصول إلى الخاصّة value لكائن <input> مباشرةً، عليك إذن التّعامل مع عنصر DOM الخام:

var listItems = $( 'li' );
var rawListItem = listItems[0]; // أو listItems.get( 0 )
var html = rawListItem.innerHTML;

لاحظ أنّه ليس بإمكانك استدعاء وظائف jQuery على عناصر DOM الخام، فلن يعمل المثال التّالي:

تحذير: نصّ برمجيّ غير سليم

var listItems = $( 'li' );
var rawListItem = listItems[0];
var html = rawListItem.html();
// Object #<HTMLInputElement> has no method 'html'

إن أردت العمل مع عنصر مُفرد في تحديد وأردت استخدام وظائف jQuery معه، فعليك إنشاء كائن jQuery جديد انطلاقًا منه باستخدام الدّالّة ‎.eq()‎، وإمرار دليل العنصر الّذي تريده:

var listItems = $( 'li' );
var secondListItem = listItems.eq( 1 );
secondListItem.remove();

جرب المثال في ساحة التّجربة (تأكد من ضغط زر Run with JS في هذا المثال وكل الأمثلة التالية)

إنشاء كائنات جديدة

للدّالّة $ دورٌ ثالث أخير: إنشاء عناصر جديدة. إن مرّرت قصاصة HTML إلى $()‎، فستُنشئ كائنًا جديدًا في الذّاكرة، بمعنى أنّ الكائن يُنشأ ولكن لا يُضاف إلى الصّفحة إلى أن تفعل ذلك بنفسك.

$( '<p>' ); // يُنشئ عنصر <p> بلا محتوى
$( '<p>Hello!</p>' ); // يُنشى عنصر <p> فيه نصّ
$( '<p class="greet">Hello!</p>' ); // يُنشى عنصر <p> فيه نصّ وله صنف

بإمكانك أيضًا إنشا عنصر جديد بإمرار كائنٍ يحوي معلومات تصف كيفيّة إنشاء العنصر:

$( '<p>', {
  html: 'Hello!',
  'class': 'greet'
});

لاحظ أنّه يجب أن نُحيط class بعلامتي اقتباس، لأنّ class كلمة محجوزة في JavaScript، وعدم إحاطتها بالعلامتين سيسبّب وقوع أخطاء في بعض المتصفّحات. راجع وثائق jQuery‏ لتفاصيل الخصائص المختلفة الّتي يمكنك تضمينها في هذا الكائن.

سنتعرّف كيف نُضيف العناصر في الصّفحة في الجزء القادم من السّلسلة، الّذي يشرح الانتقال عبر الصّفحة وتعديل محتوياتها.

التّعامل مع التحديدات

بعد إنشائك كائن jQuery يحوي تحديدًا، فإنّك غالبًا ما تريد فعل شيء ما به، وقبل ذلك عليك أن تتعرّف على أسلوب jQuery في التّعامل مع الكائنات.

فحص تحديد

بإمكاننا معرفة إن كان تحديد ما يُطابق معايير مُعيّنة باستخدام الوظيفة ‎.is()‎. أكثر الطّرق شيوعًا لاستخدام هذه الوظيفة تزويدها بمُحدِّد كمُعاملٍ مفرد لها، وعندها تُعيد true أو false حسب مُطابقة التّحديد للمُحدِّد:

$( 'li' ).eq( 0 ).is( '.special' ); // false
$( 'li' ).eq( 1 ).is( '.special' ); // true

بإمكانك تمرير كائن jQuery أيضًا إلى الوظيفة ‎.is()‎، أو حتّى كائن DOM خام، أو حتّى دالّة لإجراء اختبار أكثر تعقيدًا إن لزم. راجع الوثائق لمزيد من التّفاصيل.

وظائف القراءة والكتابة والسّرد الضّمنيّ

بعد عمل التّحديد، تتوفّر وظائف عديدة يمكنك استدعاؤها. تقع هذه الوظائف عمومًا في إحدى مجموعتين: وظائف القراءة (getters) ووظائف الكتابة (setters). فالأولى تعطينا معلومات عن التّحديد، والثّانية تُغيّر التّحديد بشكل من الأشكال. وفي معظم الحالات يقتصر عمل وظائف القراءة على العنصر الأول في التّحديد (‎.text()‎ إحدى استثناءات هذه القاعدة)؛ أمّا وظائف الكتابة فتشمل بعملها كلّ العناصر في التّحديد، مستخدمةً ما يُعرف بالسّرد الضّمنيّ (implicit iteration).

معنى السّرد الضّمنيّ أنّ jQuery ستمرّ تلقائيًّا على كلّ العناصر في التّحديد عندما تستدعي وظيفة كتابة على هذا التّحديد، أيّ أنّه ليس عليك استدعاء وظيفة على كلّ عنصر في التّحديد بمفرده عندما تريد فعل شيء على كل العناصر في تحديد واحدٍ، بل اكتفِ باستدعاء هذه الوظيفة على التّحديد نفسه، وستفهم jQuery أنّ عليها تنفيذه على كلّ العناصر في التّحديد.

لنفترض أنّنا نريد تغيير نصّ HTML في كل عناصر القوائم في الصّفحة، ولفعل ذلك علينا استخدام الوظيفة ‎.html()‎ الّتي تقوم بتغيير نصّ HTML في كلّ عناصر القوائم المُحدّدة.

$( 'li' ).html( 'New HTML' );

جرب المثال في ساحة التّجربة

بإمكانك أيضًا إمرار دالّة إلى وظائف الكتابة في jQuery، وستُستخدم القيمة المُعادة منها باعتبارها القيمة الجديدة، وتستقبل هذه الدّالة مُعاملين اثنين: دليل العنصر (index) في التّحديد، والقيمة القديمة للشّيء الذي تحاول تغييره، وهذا مُفيد في حال احتجت معلومات عن حالة العنصر الحاليّة لتعيين حالته الجديدة بشكل صحيح.

$( 'li' ).html(function( index, oldHtml ) {
  return oldHtml + '!!!'
});

جرب المثال في ساحة التّجربة

السّرد الصّريح (Explicit Iteration)

في بعض الأحيان، لن تلبّي وظائف jQuery الأصليّة المهمّة الّتي تريد إنجازها بدقّة، وسيكون عليك حينها المرور على العناصر في التّحديد بشكل صريح، وهذا ما تتيحه الوظيفة ‎.each()‎. في المثال التّالي نستخدمها لإضافة وسم <b> في بداية عنصر القائمة، يحوي دليل العنصر:

$( 'li' ).each(function( index, elem ) {
  // this: عنصر DOM الخام الحالي
  // index: دليل العنصر الحالي في التّحديد
  // elem: عنصر DOM الخام الحالي (مثل this)
  $( elem ).prepend( '<b>' + index + ': </b>' );
});

جرب المثال ساحة التّجربة

ملاحظة: ستلاحظ أنّ عنصر DOM الخام مُتاح ضمن الدّالّة الّتي نُمرّرها إلى ‎.each()‎ بطريقتين: الأولى عبر this والثّانية عبر elem. وكما ناقشنا في الجزء السّابق (أساسيّات JavaScript)، فإنّ this كلمة خاصّة في JavaScript تُشير إلى الكائن الّذي يُمثّل سياق الدّالّة الحاليّ. وفي jQuery فإنّ this تُشير في معظم الحالات إلى عنصر DOM الخام الّذي تعمل عليه الدّالّة الحاليّة. لذا فإنّها تُشير في حالة ‎.each()‎ إلى العنصر الحاليّ في مجموعة العناصر الّتي نسردها.

السَّلسَلة (Chaining)

من أكثر الأمور فائدةً في jQuery إمكانيّة "سَلسَلة" الوظائف معًا. هذا يعني أنّ بإمكاننا استدعاء سلسِلة من الوظائف على تحديدٍ ما دون الحاجة لإعادة التّحديد أو حفظه في متغيّر. بإمكاننا حتّى إنشاء تحديدات جديدة بناء على التّحديد السّابق، دون كسر السّلسلة:

$( 'li' )
  .click(function() {
    $( this ).addClass( 'clicked' );
  })
  .find( 'span' )
    .attr( 'title', 'Hover over me' );

الأمر ممكن لأنّ كل دالّة كتابة (setter) في jQuery تُعيد التّحديد الذي اُستدعيت لتعمل عليه. وهذا أمر عظيم الفائدة، حتّى أنّ مكتبات كثيرة اعتمدته تأثّرًا بـjQuery. ولكن يجب الحذر عند استخدامه. فالسّلاسل الطّويلة تجعل النّصّ البرمجيّة صعب القراءة والتّعديل والتنقيح لا قاعدة واضحة تفرض طولًا مناسبًا للسّلسلة، ولكن حتّى السلاسل القصيرة قد تحتاج إلى إعادة الصّياغة تسهيلًا لقراءتها.

var listItems = $( 'li' );
var spans = listItems.find( 'span' );

listItems
  .click(function() {
    $( this ).addClass( 'clicked' );
  });

spans.attr( 'title', 'Hover over me' );

خاتمة

لدينا الآن معلومات ممتازة عن تفاصيل عمل jQuery؛ وسنستعرض في الجزء القادم كيف يمكننا تطبيق هذه المعلومات لإنجاز أشياء حقيقيّة بها!

مصادر إضافية

ترجمة (بشيء من التصرف) للجزء الثاني من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>60Sun, 12 Apr 2015 08:28:00 +0000أساسيّات جافاسكريبت والأخطاء الشّائعة الّتي يرتكبها المبتدئونhttps://academy.hsoub.com/programming/javascript/jquery/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D9%91%D8%A7%D8%AA-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA-%D9%88%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D8%A7%D9%84%D8%B4%D9%91%D8%A7%D8%A6%D8%B9%D8%A9-%D8%A7%D9%84%D9%91%D8%AA%D9%8A-%D9%8A%D8%B1%D8%AA%D9%83%D8%A8%D9%87%D8%A7-%D8%A7%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%88%D9%86-r59/

بُنيت jQuery على لغة جافاسكريبت، وهي لغةٌ غنيّة وقويّة في حدّ ذاتها. يُغطّي هذا الدّرس أساسيّات لغة جافا سكريبت، وبعض الأخطاء الشّائعة الّتي يرتكبها المبتدئون بها. يُفيد هذا الدّرس القادمين الجدد إلى عالم البرمجة، ويفيد أيضًا المبرمجين بلغات أخرى الّذين لم يسبق لهم الاطّلاع على الجوانب المميّزة لـJavaScript.

فيما يلي برنامج JavaScript بسيط يُضيف رسالةً إلى صفحة ويب:

// أنشئ دالّة لإلقاء التّحية على شخص
// وأسندها إلى المُتغيّر `greet`
var greet = function( person, message ) {
  var greeting = 'Hello, ' + person + '!';
  log( greeting + ' ' + message );
};

// استخدم الدالّة لتحيّة Jory، بإمرار اسمها ورسالة التّحيّة
greet( 'Jory', 'Welcome to JavaScript' );

// استخدم الدالّة لتحيّة Rebecca، بإمرار اسمها ورسالة مختلفة
greet( 'Rebecca', 'Thanks for joining us' );

مُلاحظة: في المثال السابق، استخدمنا الدّالّة log. وهي دالّة مُساعِدة متوفّرة في الأمثلة في هذه السّلسلة فقط، وليست متوفّرة تلقائيًّا في JavaScript، يمكن استخدام log في محرّر النّصوص البرمجيّة في هذه السّلسلة، ولكن ستحتاج إلى استخدام console.log محلّها في النّصوص البرمجيّة خارج السّلسلة، وعندها ستُطبع نتائج النّصّ إلى طرفيّة المتصفّح الّذي تستعمله.

// create a function that will greet a person,
// and assign the function to the `greet` variable
var greet = function( person, message ) {
  var greeting = 'Hello, ' + person + '!';
  log( greeting + ' ' + message );
};

// use the function to greet Jory, passing in her
// name and the message we want to use
greet( 'Jory', 'Welcome to JavaScript' );

// use the function to greet Rebecca, passing in her
// name and a different message
greet( 'Rebecca', 'Thanks for joining us' );

النّتيجة

المثال السابق يعرض نتيجة تنفيذ النّص البرمجيّ ضمن قسم Console، يمكنك إعادة ضبط المثال باستخدام الزر Clear ثمّ تعديل النصّ إن رغبت بالتجربة وإعادة تنفيذه بنقر Run. لا بأس إن بدت بعض الأشياء غير مفهومة الآن؛ ففي الفقرات التّالية سنطّلع على مفاهيم المتغيّرات والدوالّ والمكوّنات الأساسيّة الأخرى لـJavaScript.

ملاحظة عن التعليقات

تفيد التّعليقات في شرح ما يفعله كل جزء من النصّ البرمجيّ، ولا تؤثّر التعليقات في عمل البرنامج على الإطلاق. بعض المُبرمجين يحبّون الإكثار من التعليقات في برامجهم، بينما يفضّل آخرون كتابتها فقط عندما تكون بعض الأجزاء من النّصّ غامضة ولا تتضّح بسهولة.

تسمح JavaScript بنوعين من التعليقات: مفردة السّطر، ومتعدّدة السّطور، ويبدأ الشّكل الأوّل بالحرفين //؛ بينما يبدأ الثّاني بالحرفين ‎/*‎ وينتهي بـ‎*/‎.

// هذا تعليق مُفرد السّطر
var foo;

/*
  هذا تعليقٌ متعدّد السّطور
  يمكن أن يمتدّ على أكثر من سطر، كما ترى.
 */

يمكن أيضًا استخدام التّعليقات متعدّدة السّطور مُضمّنة ضمن سطرٍ من النّصّ البرمجيّ:

function cornify( unicorns /* عدد صحيح */, rainbows /* عدد صحيح */ ) {

}

المكوّنات الأساسيّة لـJavaScript

المُتغيِّرات (Variables)

المُتغيّرات هي الطّريقة الّتي نخزّن بها القيم الّتي نريد استخدامها في وقت لاحقٍ. يمكن أن تكون المتغيّرات على عدّة أنواع من نصوصٍ أو أعداد أو بياناتٍ أخرى كالمصفوفات والكائنات، أو حتى نصوصًا برمجيّة (بصورة دالّة مُخزّنة في متغيّر). يُصرّح عن المتغيّر بجملة var:

var myName = 'Rebecca';

يمكن اختيار أي اسم للمتغيّر بشرط ألّا يبدأ الاسم برقمٍ وألّا يحوي إشارة النّاقص "-".

بإمكانك التّصريح عن متغيّر واحدٍ في كلّ جملة:

var a = 1;
var b = 'two';

أو التّصريح عن عدّة متغيّرات في جملة واحدة بفصلها بفواصل لاتينيّة:

var a = 1,
    b = 'two';

بعد إسناد قيمة للمتغيّر، يمكن استخدام هذا المتغيّر للوصول إلى القيمة المُخزّنة فيه:

log( myName ); // يطبع 'Rebecaa'

المتغيّرات مكوّن ضروريّ للالتزام بمبدأ "لا تكرّر نفسك" (Don't Repeat Yourself)، فإذا أردت استخدام قيمة واحدة أكثر من مرّة، فالغالب أنّك ترغب في تخزينها في مُتغيّر.

سنتحدّث عن المتغيّرات بتفصيل أكبر في الفقرة القادمة.

الدّوالّ (Functions)

الدّوال مكوّن أساسيّ في برامج JavaScript لأنّها توفّر وسيلة لتهيئة وظائف صغيرة في البرنامج بصورة جزء مستقلّ ومنظّم. افترض مثلًا دالّة تجمع عددين:

function(a, b) {
    return a + b;
}

تأخذ هذه الدّالة مُعاملين اثنين هما a وb، تجمعهما ثمّ تعيد المجموع كنتيجة الدّالّة.

المثال السّابق هو برنامج JavaScript سليم الصّياغة، لكنّه لا يفعل شيئًا على الإطلاق، لأنّه ما من طريقة تسمح لنا بأن نطلب من هذه الدّالة أن تجمع أي عددين بعدُ. علينا إذًا إيجاد طريقة لاستدعاء الدّالّة، ويمكننا فعل ذلك بإسنادها أولًّا إلى متغيّر:

var addTwoNumbers = function(a, b) {
  return a + b;
}

ما فعلناها في المثال الأخير هو أنّنا أخذنا تعبيرًا عن دالّة (function expression) وأسندناه إلى مُتغيّر. يمكننا الآن استدعاء هذه الدّالة باستخدام اسم المتغيّر:

log( addTwoNumbers(1, 1) ); // تطبع 2

يمكننا بدلاً من ذلك استخدام تصريح عن دالّة (function declaration) لإعطاء دالّتنا اسمًا:

function addTwoNumbers(a, b) {
  return a + b;
}

وكلا الطّريقتين تسمحان لنا باستدعاء دالّتنا بالأسلوب نفسه، ولكن يجب الحذر عند اعتماد الأسلوب الأخير لأسباب تشرحها هذه التّدوينة.

الخلاصة: تسمية الدّوالّ بالتّصريح عن الدّالّة قد تؤدّي إلى نتائج غير مُتوقّعة إن لم تفهم بدقّة إحدى ميّزات JavaScript المعروفة باسم "الرّفع إلى أعلى النّطاق" (hoisting). تفصيل هذه الميزة موضوعٌ خارج عن نطاق هذه السّلسلة، ولكنّنا سنعتمد إسناد الدّوال إلى المُتغيّرات في الوقت الحاليّ.

الدّوال ونطاق المُتغيّرات (Variable scope)

تكون المُتغيّرات الّتي تُعرَّف ضمن دالّة بجملة var مُتاحة فقط من داخل هذه الدّالّة، وهذا أمر مرغوبٌ عادةً، ولذا يجب التّصريح عن كلّ المُتغيّرات في البرنامج باستخدام جمل var ما لم يُقصد جعلها عامّة (global)، أي متاحةً عبر كامل البرنامج وفي أيّ موضع منه. ليس هذا ما نُريده عادةً إلّا إذا أردنا تغيير قيمة المُتغيّر من نصّ برمجيّ آخر.

ولكن ما معنى أن تكون المُتغيّرات مُتاحةً فقط داخل الدّالّة؟ جرّب هذا البرنامج:

تحذير: نصّ برمجيّ خاطئ

var myFunction = function() {
  var foo = 'bar';
};

myFunction();
log( typeof foo ); // تطبع undefined!

النّتيجة

 

لو أنّنا حاولنا في المثال السّابق استخدام قيمة foo خارج الدّالة (بدل الاكتفاء بفحص نوعها)، لأبلغنا المُتصفّح بوجود خطأ، ولن يتابع البرنامج العمل فيما يلي الموضع الّذي استخدمنا foo عنده.

المثال التّالي يبيّن كيف يمكن لمُتغيّرين مختلفين أن يوجدا باسمٍ واحد طالما أنّ كلًّا منهما موجود في نطاق منفصل عن الآخر. في هذا المثال نُصرّح عن المُتغيّر foo ونسند إليه القيمة 'qux'، ثم نُصرّح عن مُتغيّر آخر داخل دالّة، ونُسمّيه foo أيضًا، ونُسند إليه القيمة 'bar'. لاحظ أنّ المُتغيّر foo خارج الدّالة لا يتغيّر حتّى بعد أن نُنشئ المُتغيّر foo داخل الدّالة.

var foo = 'qux';
var myFunction = function() {
  var foo = 'bar';
};

log( foo ); // تطبع 'qux'
myFunction();
log( foo ); // تطبع 'qux' أيضًا

على الرّغم من تشارك المُتغيّرين اسمًا واحدًا، إلّا أنّ JavaScript تعتبرهما شيئين مختلفين بالكامل، وهذا واحد من عدّة أسباب تدفعك لإعطاء مُتغيّراتك أسماء مُعبّرة.

نطاق المُتغيّرات مفهوم جوهريّ في JavaScript، ولعلّه يسبّب بعض الارتباك للمبتدئين. تذكّر:

  • في الأغلبية السّاحقة من الحالات، صرّح عن المُتغيّرات بجملة var
  • لا يمكن الوصول إلى المُتغيّرات المفروضة داخل دالّة بجملة var من خارج هذه الدّالّة
  • المُتغيّرات الّتي تُفرض بلا جملة var تكون عامّةً دائمًا

انتبه إلى أنّ المُتغيّرات الّتي يُصرَّح عنها بلا الكلمة var تكون ضمنيًّا عامّةً. في المثال التّالي لدينا المُتغيّر a المتاح خارج الدّالة لأنّ عُرِّف بدون الكلمة var (وهذا أمرٌ غير مرغوب في معظم الحالات).

تحذير: نصّ برمجيّ غير آمن

function test() {
  a = 1;
}

test();

log( a ); // تطبع 1

النّتيجة

الكائنات (Objects)

الحقيقة أنّ معظم ما نتعامل معه في JavaScript ليس سوى كائنات، وليس في اللّغة إلّا 5 أنواع من القيم الّتي لا تُعتبر كائنات:

  • السلاسل النّصيّة (strings)
  • القيم المنطقية (true/false)
  • الأعداد
  • undefined (غير مُعرّف)
  • null (معدوم)

تُسمّى القيم السّابقة بالأنواع الأوّليّة (primitives)، ويمكن حتّى لبعض هذه القيم أن تُعامل كما لو أنّها كائنات (سنشرح هذا بعد قليل). ولكن ما الكائن؟ لنُلقِ نظرةً على كائنٍ بسيط:

var person = {
  firstName: 'Boaz',
  lastName: 'Sender'
};

للكائن الّذي أنشأناه أعلاه خاصّتان اثنتان (properties):‏ firstName وlastName. أنشأنا الكائن بصياغة "الكائن الحرفيّ (object literal)" أي بإحاطة مجموعة من أزواج مفتاح/قيمة بقوسين معكوفين {}. لاحظ أنّ نقطتين (:) تفصلان بين المفتاح والقيمة وأنّ فاصلة لاتينيّة (,) تفصل بين كلّ زوجين. لاحظ أنّه ما من فاصلة بعد الزّوج الأخير، وإن أضفتها سهوًا فستقع أخطاء عند تنفيذ البرنامج في المتصفّحات القديمة.

الوصول إلى الخصائص

حفظنا الكائن في مُتغيّر أسميناه person، ممّا يُسهّل الوصول إلى خصائصه، إمّا باستخدام أسلوب النّقاط (dot notation) أو أسلوب الأقواس المُربّعة (bracket notation).

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

log( 'First name: ' + person.firstName );     // dot notation
log( 'Last name: ' + person[ 'lastName' ] );  // bracket notation

النّتيجة

ستلاحظ أنّنا استخدمنا سلسلة نصّيّة (string) للوصول إلى اسم الخاصّة الّتي نريدها عند اعتماد أسلوب الأقواس المُربّعة. أمّا عند اعتماد الأسلوب الآخر، أسلوب النّقاط، فقد استخدمنا اسم الخاصّة نفسه دون علامتي الاقتباس. يفيد أسلوب الأقواس المُربّعة عندما نريد الوصول إلى خاصّة يُحفَظ اسمها ضمن مُتغيّر:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

var prop = 'lastName';

log( 'Last name: ' + person[ prop ] );

النّتيجة

بعد أن أنشأنا الكائن، يمكننا تعديل خصائصه:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

person.firstName = 'Ben';
person.lastName = 'Alman';

log( 'First name: ' + person.firstName );
log( 'Last name: ' + person.lastName );

النّتيجة

هذا الجانب في JavaScript هو نعمة ونقمة في الوقت ذاته، فهو يعني أنّ الكائنات مرنة بصورة فائقة، ولكنّه أيضًا يعني أنّه ما من "خصوصيّة" للكائنات، فيمكن لأيّ نصّ برمجيّ أن يُسند قيمةً جديدة إلى أيّ خاصّة في أيّ كائن يمكنه الوصول إليه؛ وهذا سبب آخر يدفعك للاحتفاظ بالمُتغيّرات معزولةً عن النّطاق العامّ إلّا إذا كنت تريد فعلًا للبرامج الأخرى أن تُغيّر تلك الخصائص.

وظائف الكائنات (Object methods)

الوظائف (methods) هي خصائص في الكائن قيمها دوالّ (functions)، لنُضِف وظيفة ‎.greet()‎ إلى كائن person:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function(name) {
    log( 'Hi, ' + name );
  }
};

person.greet( person.firstName );

النّتيجة

استقبلت الوظيفة ‎.greet()‎ في المثال السّابق النّصّ name كُمعامِل لها. عند استدعاء هذه الدّالة، أرسلنا قيمة الخاصّة firstName لكائن person ببساطة. لو أردنا وظيفة فائقة المُرونة تُلقي التّحيّة على أيّ شخص، فلرّبما يكون ما كتبناه صحيحًا. ولكن الغالب أنّنا نريد لوظيفتنا أن تُلقي التّحيّة على الشّخص المُحدّد في الكائن person فقط.

معنى this

داخل كلّ وظيفة (وداخل كلّ دالّة) تتوفّر كلّمة مفتاحيّة خاصّة: this، وهي تُشير إلى الكائن الّذي يُمثِّل السّياق الّذي اُستدعيت فيه الدّالة.

عندما نستدعي person.greet()‎ يكون السّياق هو الكائن person ذاته. معنى هذا أنّ بإمكاننا استخدام this للوصول إلى إحدى خصائص الكائن person مباشرة من داخل الوظيفة ‎.greet()‎.

ملاحظة: معنى this قد يُسبّب ارتباكًا شديدًا لمطوّري JavaScript المُبتدئين، يمكنك الاطمئنان إن لم تفهم بدقّة معناها، لأنّ jQuery تُحسن استغلالها بحيث لا تضطّر للدّخول في تفاصيلها؛ ومع ذلك فلا يكتمل الحديث عن الكائنات ووظائفها دون الإشارة إلى this وإن قليلًا. سأترك لك حرّيّة الانتقال إلى فقرة "الكائنات في jQuery" من هذه المقالة إن شئت، ثمّ عُد إلى هنا عندما تشعر أنّك جاهز لفهمها تمامًا.

لنحاول فهم كيف يمكن استخدام this في وظيفتنا:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    log( 'Hi, ' + this.firstName );
  }
};

person.greet();

النّتيجة

ليست مُعقّدةً كثيرًا حتى الآن... صحيح؟ منشأ التّعقيد هو أنّ معنى this يمكن أن يتغيّر، فالأمر كما قلنا يعتمد على السّياق الّذي استدعيت فيه الدّالة! لاحظ النّصّ التّالي:

تحذير: نصّ برمجيّ خاطئ

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    log( 'Hi, ' + this.firstName );
  }
};

var sayIt = person.greet; // store the method in a variable

sayIt(); // logs 'Hi, undefined' -- uh-oh

النّتيجة

عندما نحفظ الوظيفة ‎.greet()‎ في مُتغيّر sayIt ثمّ نستدعي sayIt()‎، فإنّ السّياق يتغيّر ليُصبح الكائن العامّ window، لا الكائن person. وبما أنّ ليس للكائن window خاصّة اسمها firstName، فإنّ النتيجة تكون undefined عندما نحاول الوصول إليها.

ما الذي على المُبرمج فعله إذًا؟ أوّلًا: عليه أن يحذر من النّتائج غير المُتوقّعة لمعنى this عند تخزين وظائف الكائنات في متغيّرات. وثانيًا: عليه أن يعلم أنّ بإمكانه إجبار this أن تُشير إلى ما يشاء من الكائنات وذلك باستخدام إحدى الوظيفتين ‎.call()‎ و‎.apply()‎ مع الدّالّة ذاتها.

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    log( 'Hi, ' + this.firstName );
  }
};

var sayIt = person.greet;

sayIt.call( person );

النّتيجة

كلا الوظيفتين المُتشابهتين ‎.call()‎ و‎.apply()‎ تُتيحان إمرار المُعاملات إلى الدّالّة الّتي تُستدعى بهما. تخيّل أنّ دالة التّحيّة تقبل بعض المعاملات، يمكن حينئذٍ إمرار هذه المُعاملات باستخدام ‎.call()‎ كما يلي:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function(greeting, punctuation) {
    log( greeting + ', ' + this.firstName + punctuation );
  }
};

var sayIt = person.greet;

sayIt.call( person, 'Hello', '!!1!!1' );

النّتيجة

يمكن تنفيذ الأمر ذاته باستخدام ‎.apply()‎، ولكن سنحتاج معها إلى إمرار المُعاملات ضمن مصفوفة واحدة بدلًا من إمرارها مُنفصلة:

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function(greeting, punctuation) {
    log( greeting + ', ' + this.firstName + punctuation );
  }
};

var sayIt = person.greet;

sayIt.apply( person, [ 'Hello', '!!1!!1' ] );

النّتيجة

مُلاحظة: لتفاصيل أكثر عن ‎.call()‎ و‎.apply()‎، راجع وثيقتي شبكة مُطوِّري موزيلّا ‎.call()‎ و‎.apply()‎،

الكائنات في jQuery

لم نتطرّق بعدُ إلى تفاصيل الكائنات في JavaScript لكنّك الآن تعرف الأساسيّات الّتي تُتيح لك التّعامل مع الكائنات خلال تعلّمك jQuery، ففيها ستستعمل الكائنات لضبط الخيارات، كتغيير عدّة خصائص CSS لعنصر في الصّفحة مرّة واحدة:

$('#main').css({
  color: 'red',
  border: '1px solid blue'
});

بخصوص this، فإنّ jQuery تُسيطر على معناها، وفي حالة مُتولّيات الأحداث (event handlers)، تُشير this إلى العنصر في الصّفحة الّذي ربطتّه بالمُتولّي، وفي حالة سرد مجموعة من الكائنات في تحديدٍ، تُشير this إلى العنصر الحاليّ في السّرد. ليس عليك الحرص على فهم this بدقّة في المراحل الأولى لتعلّمك، بل اكتفِ بإبقاء فكرتها في ذهنك أثناء تعلّمك.

تفاصيل أكثر

يتوسّع دليل JavaScript في شبكة مُطوِّري موزيلّا في شرح مواضيع مثل النّماذج البدئيّة للكائنات (object prototypes) والدّوال المُشيِّدة (constructor functions) وحذف خصائص الكائنات.

المصفوفات (Arrays)

المصفوفات نوعٌ من الكائنات تُستخدم لحفظ قائمة من القيم، وهي وسيلةٌ سهلة لتخزين مجموعة من العناصر المترابطة من نفس النّوع (كالسّلاسل النّصيّة)، مع أنّ الواقع أنّه لا شيء يمنع مصفوفةً من أن تحوي عدّة أنواع من العناصر، بما في ذلك مصفوفاتٍ أخرى.

الطّريقة المُفضّلة لإنشاء مصفوفة استخدامُ أسلوب المصفوفات الحرفيّة:

var myArray = [ 'a', 'b', 'c' ];

ملاحظة: ستقرأ من وقتٍ لآخر برامج تُنشئ المصفوفات بالأسلوب التالي:‎ new Array('a', 'b', 'c')‎ وهو أسلوب غير مقبولٍ وسط مُطوّري JavaScript لأنّه لا يختلف عن الأسلوب الأوّل سوى في أنّ له عيوبًا ليست في الأوّل! فمثلاً: كتابة ‎new Array(3)‎ تعني إنشاء مصفوفة فيها ثلاث عناصر كلّها غير مُعرّفة، بدلاً من إنشاء مصفوفة فيها العدد 3 (أي بدلًا من [ 3 ]).

يمكن الوصول إلى خصائص المصفوفات (الّتي تُسمّى أحيانًا بعناصر المصفوفة (elements)) باستخدام صياغة الأقواس المربّعة ذاتها المستخدمة مع الكائنات، فكلّ عنصر يُعطى اسما تلقائيًّا بحسب موقعه في المصفوفة. ولكن عليك الحذر: فالأعداد تبدأ من الصّفر. لنُلق نظرة على مصفوفة فيها 3 عناصر:

تحذير: أسلوب غير مُفضّل

var myArray = [ 'a', 'b', 'c' ];
var firstItem = myArray[ "0" ]; // الوصول إلى العنصر الأوّل

عند الوصول إلى عناصر المصفوفة، فإنّه من الأسهل استخدام الأعداد لتحديد موضع العنصر المطلوب في المصفوفة، والّذي يُسمّى الدّليل (index):

var myArray = [ 'a', 'b', 'c' ];
var firstItem = myArray[ 0 ];

var secondItem = myArray[ 1 ]; // access the item at index 1
log( secondItem ); // logs 'b'

النّتيجة

يمكننا معرفة عدد العناصر في مجموعة بالوصول إلى الخاصّة length في المصفوفة:

var myArray = [ 'a', 'b', 'c' ];
var len = myArray.length;
log( len ); // logs 3

النّتيجة

حلقات for: سرد المصفوفات

بما أنّنا نعلم كيف نحدّد طول المصفوفة (عدد العناصر فيها)، وأنّ أوّل عناصرها يقع عند الدّليل 0، يمكننا إذن سرد عناصر المصفوفة باستخدام حلقة for:

النّتيجة

يمكننا فعل الكثير من الأشياء بالمصفوفات، راجع وثيقة المصفوفات في شبكة مُطوِّري موزيّلا للاطّلاع على الدّليل الكامل.

المنطق والتّحقّق من الصّحِّة

تُوفِّر JavaScript الكلمتين if وelse، وكذلك المُعامل الثّلاثي، للسّماح بتنفيذ بعض الأوامر فقط عند تحقّق شروط معيّنة. تُحدّد JavaScript توفّر شرطٍ ما بتحرِّي "صحِّة" قيمة أو عبارة. ولأنّ JavaScript لُغةٌ متغيّرة الأنواع (dynamically typed)، فإنّ بإمكاننا استخدام أيّة قيمة أو أي تركيبٍ من القيّم، إلّا أنّ قواعد التّحقّق من كون قيمةٍ مُعيّنة أو عبارةٍ معيّنة صحيحةً (true) أو خاطئة (false) قد تُسبّب بعض الارتباك.

فيما يلي مثال عن جملة شرطيّة (if) بسيطة في JavaScript. تتحرّى الجملة من صحِّة العدد 1؛ ولأنّ 1 قيمة "صائبة" (truthy)، فسيُنفَّذ النّص البرمجيّ الواقع بين القوسين المعكوفين {} بعد جملة if.

if ( 1 ) {
  // سيُنفَّذ هذا الأمر
  log( '1 is truthy' );
}

النّتيجة

الحقيقة أنّ معظم القيم في JavaScript "صائبة"، بل إنّ خمس قيمٍ فقط في اللّغة تُعتبر "خاطئة" (falsy):

  • undefined (القيمة المبدئيّة لكّل مُتغيّر يُفرض دون إسناد قيمة إليه)
  • null
  • NaN (ليس عددًا "not a number")
  • 0 (العدد صفر)
  • '' (سلسلة نصّيّة فارغة)

عندما نريد تحرّي "خطأ" قيمة ما، نستخدم المُعامل !:

var a = '';

if ( !a ) {
  // لن يُنفَّذ هذا الأمر إن كانت a صائبة
  log( 'a was falsy' );
}

النّتيجة

أمّا القيمة NaN فلها وضعٌ خاصّ، فعند تحرّيها في جملة شرطيّة بسيطة فإنّها خاطئة:

var notANumber = 'four' - 'five';

if ( !notANumber ) {
  // سيُفَّذ هذا الأمر
  log( '!notANumber was truthy' );
}

النّتيجة

أمّا عندما نقارن القيمة NaN مع false، فإنّنا نحصل على قيمة "خاطئة":

var notANumber = 'four' - 'five';

if ( notANumber == false ) {
  // لن يُنفَّذ هذا الأمر
  log( 'notANumber was falsy' );
} else {
  // سُينفَّذ هذا الأمر
  log( 'notANumber was truthy' );
}

النّتيجة

من المهمّ أن نتذكّر أنّ كلّ القيم الأخرى ما عدا الخمس السّابقة تُعتبر صائبة، بما في ذلك المصفوفات الفارغة والكائنات الفارغة وكل السّلاسل النّصيّة غير الفارغة (متضمّنة السلسلة النّصيّة '0') وكلّ الأعداد ما عدا 0.

ملاحظة: من الممكن كتابة جملة شرطيّة فيها if وelse في سطر واحدٍ دون استخدام الأقواس المعكوفة، ولكنّ هذه الممارسة غير مفضّلة لأنّها تجعل قراءة البرنامج وصيانته أصعب؛ وما ذكرناها هنا إلّا لأنّها قد تصادفك عند قراءة برامج مطوّرين آخرين.

المُعامِلات المنطقيّة (Logical Operators)

تسمح المُعاملات المنطقيّة بتقييم طرفيّ العمليّة المنطقيّة بتنفيذ عمليتيّ AND (&&) وOR (||).

var foo = 1;
var bar = 0;
var baz = 2;

foo || bar;     // تُعيد 1 وهي قيمة صائبة
bar || foo;     // تُعيد 1 وهي قيمة صائبة

foo && bar;     // تُعيد 0 وهي قيمة خاطئة
foo && baz;     // تُعيد 2 وهي قيمة صائبة

في حالة المُعامل ||، تكون القيمة المُعادة هي أوّل قيمة تُثبت صحّة الجُملة، أو آخر قيمة. أمّا في حالة المُعامل && فإنّ القيمة المُعادة تكون أوّل قيمة تُثبت خطأ الجملة، أو آخر قيمة.

قد ترى المُعاملات المنطقيّة تُستخدم بأسلوب ذكيّ للتّحكّم بسير البرنامج:

foo && bar();   // استدعِ الدالّة bar فقط عندما تكون foo صائبة

var bar = baz || createBar();  // استخدم baz كقيمة لـbar إلّا إن كانت
                               // خاطئة، وعندها أنشئ bar

هذا الأسلوب جميل ومُختصر، ولكنّه قد يزيد قراءة البرنامج صعوبةً، خصوصًا للمبتدئين. عليك أن تتعلّمه لتعرفه في برامج الآخرين، ولكننّني أنصحك بالنأي عن استخدامه في البداية، واستخدام if وelse التّقليديّتين لأنّهما أوضح.

المُعامِل الثّلاثي (Ternary Operator)

عادةً ما ترغب بتعيين قيمة مُتغيّر بحسب صحّة شرط معيّن أو خطئِه، بإمكانك بالطّبع استخدام if وelse:

تحذير: أسلوب غير مُفضّل

var propertyName;

if (dim === 'width') {
  propertyName = 'clientWidth';
} else {
  propertyName = 'clientHeight';
}

إلّا أنّ المُعامل الثّلاثيّ يسمح بتحقيق الغاية ذاتها بطريقة بأسلوب أقصر وأوضح:

var propertyName = ( dim === 'width' ) ? 'clientWidth' : 'clientHeight';

تُتحرَّى الجملة قبل ? لمعرفة صوابها، فإن كانت صائبة أُسندت القيمة الأولى (clientWidth) إلى المُتغيّر propertyName، وإلّا أُسنِدت القيمة الثّانية (clientWidth) إليه.

عثرات JavaScript

بالإضافة إلى نطاقات المُتغيّرات والتّحرّي من الصّحة، هنالك العديد من العثرات الأخرى في JavaScript، وسنلقي نظرة على بعضها.

تسمية الأشياء

تبدأ الأسماء السّليمة في JavaScript بحرف أو برمز مُعيّن، متبوعٍ أو غير متبوع بحروف أو أرقام أو علامات _ أو رموز أخرى. لا يمكن أن تبدأ الأسماء بأرقام أو أن تتضمّن إشارة النّاقص (-). سمِّ المتغيرات بالأسماء الّتي تحلو لك طالما التزمت بهذه القواعد، وهذه الأسماء كلّها سليمة:

  • a
  • a1
  • foo_bar
  • fooBarBaz
  • $fooBar
  • _foo
  • __foo__

وضع مجتمع JavaScript بعض الأعراف الشّائعة لتسمية المُتغيّرات والخصائص في JavaScript، لكنّها مُجرَّد أعراف، فهي ليست إلزاميّة، ولا تؤثّر في عمل البرنامج:

  • الأسماء الّتي تبدأ بـ_ تُشير عادةً إلى قيم سرِّيَّة (private) (سنوضِّح ذلك لاحقًا).
  • الأسماء الّتي تبدأ بحرف كبير هي عادةً دوال مُشيّدة (constructors) تُستخدم لإنشاء نُسخ جديدة من الكائنات (سنوضّح ذلك لاحقًا أيضًا).
  • في البرامج الّتي تستخدم jQuery، الأسماء الّتي تبدأ بالرّمز $ تُشير عادّة إلى كائنات jQuery.

الكلمات المحجوزة (Reserved words)

تحتفظ JavaScript لنفسها ببعض الكلمات الّتي يفضّل اجتنابها كأسماء لمكوّنات برامجك:

abstract boolean break byte case catch char class const continue debugger
default delete do double else enum export extends false final finally float
for function goto if implements import in instanceof int interface long
native new null package private protected public return short static super
switch synchronized this throw throws transient true try typeof var
volatile void while with

فإنّ كان لا بدّ من استخدامها كاسم لخاصّة كائن، فعليك إحاطتها بعلامتي اقتباس:

var myObject = {
  'class': 'tasty'
};

العمليّات على الأعداد والسّلاسل النّصيّة

التّعامل مع الأرقام في JavaScript قد يُعطي نتائج غير متوقّعة أحيانًا، بسبب طريقة تمثيل الأرقام داخليًّا في JavaScript، فمثلاً: عند جمع عددين عشريّين، تكون النّتيجة عدًدا قريبًا جدًّا من القيمة المتوقّعة، لكنّه غير مساوٍ تمامًا:

log( 0.0001 + 0.0002 ); // 0.00030000000000000003

النّتيجة

لن تصادف هذا كثيرًا عند العمل مع jQuery، ولكنّها قضيّة مهمّة يجب الانتباه لها خصوصًا عندما تتعامل مع أرقامٍ عشريّة كالعملات. عندما تُجري عمليّات حسابيّة تحتاج دقّة تامّة، فعليك تحويل القيم إلى أعداد صحيحة قبل العمل بها، ثمّ تحويلها ثانيةً إلى أعداد عشريّة بعد الانتهاء.

تتسامح JavaScript مع اختلاف الأنواع، فعند إجراء عمليات حسابية باستخدام قيم غير عدديّة، فلن تُبلغك JavaScript بوجود خطأ، بل ستُتابع العمليّة مُعطيةً نتائج قد لا تتوقّعها:

log( 'a' + 2 );           // 'a2'
log( '4' + 3 );           // '43'
log( 'five' - '4' );      // NaN (not a number)
log( - '1' );             // -1
log( 1 + true );          // 2
log( 1 == true );         // true
log( 1 === true );        // false

النّتيجة

مطالعة

لم نخض في أعماق لغة JavaScript بعدُ. شبكة مُطوّري موزيلّا (MDN) مصدر ممتاز (بالإنكليزيّة) لتعلّم JavaScript بتفاصيلها، وخصوصًا دليل JavaScript على الشّبكة. أكثر المواضيع أهمّيّة لك الآن:

مصادر إضافية

ترجمة (بشيء من التصرف) للجزء الأول من سلسلة  jQuery Fundamentals لمؤلّفتها Rebecca Murphey.

]]>59Wed, 08 Apr 2015 12:38:00 +0000