تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: العثور واستخدام الاضافات (plugins)


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

العثور واستخدام إضافة JQUERY


العثور على الاضافات
لتوفير الوقت ، سأقصر (على الأقل في البداية) بحثك على موقعين: The Ultimate jQuery List و jQuery Plugins . كلاهما تم تنفيذه بشكل جيد للغاية ، حيث يتيحان الوصول إلى العديد من الإضافات المصنفة.
لذلك فقط انتقل إلى فئة ومشاهدة الإضافات على العرض . في The Ultimate jQuery List، انقر فوق مكون إضافي للحصول على وصف. إذا كان المكون الإضافي يهمك ، فانتقل إلى موقع الويب المخصص لتنزيله ؛ معظم الوقت ، وثائق الإضافة موجودة أيضا. ستجد أيضًا مثالا غالبًا ما يكون مثيرا للاهتمام دائمًا لاتخاذ قرار بشأنها.
استخدام الاضافات
سترى أن استخدام الاضافات هو في معظم الأحيان لعب أطفال. سوف نستخدم الاضافة "Websanova Color Picker " ، المقترح على الموقع The Ultimate jQuery List . نراكم على هذا الموقع، انتقل في "ملتقطي اللون" وانقر Websanova Color Picker ثم انقر فوق Visit Website . بمجرد دخولك إلى الموقع المعني ، قم بتنزيل المكون الإضافي (وهو ملف مضغوط ، اختر التنسيق الذي يناسبك).
او اذا اردت هذا رابط مباشر للاصدار ٍV2.1.7 https://github.com/websanova/wColorPicker/archive/v2.1.7.zip
قم بفك ضغط الأرشيف ونسخ الإصدار المصغر من ملفات JavaScript و CSS إلى المجلد الذي تجري فيه عمليات تطوير jQuery . أنت الآن جاهز لاستخدام البرنامج المساعد. كل ما عليك فعله هو الرجوع إلى الوثائق. في حالتنا ، هي على الإنترنت. يوضح لك الشكل التالي ما يبدو عليه.
الوثائق عبر الإنترنت الخاصة بالبرنامج المساعد "Websanova Color Picker" كل ما تبقى هو الإشارة إلى المكون الإضافي باستخدام علامة <script> CSS ، واستخدام علامة <link> في HEAD ، وتطبيق الإرشادات الواردة في الوثائق. فيما يلي مثال لاستخدام هذا البرنامج المساعد:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Websanova Color Picker</title>
    <link rel="Stylesheet" type="text/css" href="wColorPicker.1.2.min.css"/>
  </head>
  <body>
    <div id="wcp1">
      <input id="wcp-input" type="text"/><br />
    </div>

    <script src="jquery.js"></script>
    <script src="wColorPicker.1.2.min.js"></script>
    <script>
      $(function() {
        $("#wcp1").wColorPicker({
            initColor: '#ccf',
            onSelect: function(color){
              $('body').css('background', color);
            },
            onMouseover: function(color){
              $('#wcp-input').css('background', color).val(color);
            }
        });
      });
    </script>
  </body>
</html> 
يؤخذ رمز jQuery مباشرة من وثائق البرنامج المساعد. في هذا المثال ، #wcp-input يتغير لون خلفية مربع النص عندما يكون الماوس فوق أحد الألوان الموجودة في حامل اللون ويتم عرض اللون المقابل في مربع النص:

onMouseover: function(color){
  $('#wcp-input').css('background', color).val(color);
} 
عندما ينقر المستخدم على أحد الألوان في مخطط الألوان ، يتم تحديث لون خلفية الصفحة وفقًا لذلك:

onSelect: function(color){
  $('body').css('background', color);
} 
الصورة التالية توضح النتيجة.
jQuery web
وهذا كل شيء ؟
نعم ، هذا هو الإجراء المراد استخدامه لواجهة أي مكون إضافي jQuery . إذا كانت الوثائق جيدة (!) وإذا فهمت القليل من اللغة الإنجليزية التقنية ، فلن تواجه أي مشكلة في استخدام جميع الإضافات الممكنة.

بعض الأمثلة من الإضافات


يبحث هذا القسم في بعض الإضافات المهمة ويوضح لك كيفية استخدامها في jQuery . هناك العديد من المكونات الإضافية ، وكان عليك اتخاذ قرار. إذا لم تتمكن من العثور على البرنامج المساعد لأحلامك في هذا القسم ، فيجب أن تعطيك هذه القراءة الأساسيات لمعرفة كيفية استخدامها ...
محلل RSS/ATOM
تقدم العديد من مواقع الويب موجزات بيانات RSS و / أو Atom . باستخدام المحلل اللغوي ، يمكنك استرداد تدفقات البيانات هذه ودمجها في موقعك. أقترح عليك استخدام البرنامج المساعد "FeedEk" الذي يتفوق في هذا المجال.
انتقل إلى صفحة تنزيل البرنامج المساعد وانقر فوق Download . بفك الملف FeedEk.rar .
سنقوم الآن بتحليل أحد موجزات RSS التي اقترحها الموقع lemonde.fr . انتقل إلى الصفحة http://www.lemonde.fr/rss/، واختر أحد موجزات الويب المقترحة ، وانقر بزر الماوس الأيمن على أيقونة XML المقابلة وحدد Copy shortcut (أو ما يعادله) من قائمة السياق ، كما هو موضح في الصورة التالية.
jQuery web
عنوان الخلاصة "في الأخبار" موجود على الحافظة
انقر نقرًا مزدوجًا على الملف FeedEk_demo.html وحدد العرض التقديمي الذي يناسبك. يظهر رمز jQuery المقابلة أدناه مباشرة. كل ما عليك فعله هو لصقها في مستند HTML جديد ، وتعديل عنوان الخلاصة FeedUrl عن طريق ملء الخاصية وإكمال هذا المستند مع الإشارة إلى المكون الإضافي.
إليك كود مثال:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>FeedEk jQuery RSS/ATOM Feed Plugin Demo | 
        jQuery RSS/ATOM Parser Plugin FeedEk Demo
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/
            jquery.min.js">
  </script>
  <script src="http://momentjs.com/downloads/moment-with-langs.min.js">
  </script>
  <script src="js/FeedEk.js"></script>
  <link href="css/FeedEk.css" rel="stylesheet" type="text/css" />
  <style>
    body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            background-color: #efefef;
            font-size: 13px;line-height: 17px !important; }
    .rssDiv{float: left;padding-right: 35px;}
    ul{width: 300px !important;}
  </style>
</head>
<body>
  <h1>Le Monde - A la Une</h1>
  <div id="divRss"></div>
  <script>
    $(document).ready(function () {
        $('#divRss').FeedEk({
            FeedUrl: 'http://www.lemonde.fr/rss/une.xml',
            MaxCount: 3
        });
    });
  </script>
</body>
</html>

وهنا النتيجة المقابلة (هنا على سبيل المثال ، هو التدفق "إلى واحد" من صحيفة لوموند الذي يظهر):
jQuery web
الخلاصة "إلى الواحد" من موقع lemonde.fr كانت بارز
التحقق من صحة النماذج
هل تريد التحقق من صحة النموذج باستخدام jQuery؟ لا مشكلة ، باستثناء الوقت الذي تقضيه في تخيل كل الإدخالات الممكنة والتمييز بين الإدخالات الصالحة عن تلك غير الموجودة. يوجد حل آخر متاح لك: استخدم المكوّن الإضافي " Validate".
إذا اخترت الحل الأول ، ارفع عن سواعدك ، أتمنى لك التوفيق. إذا اخترت الحل الثاني ، يمكنك متابعة القراءة.
قم بتنزيل المكون الإضافي " Validate " ، وقم بفك ضغطه ونسخ الملفات الضرورية إلى مساحة العمل الخاصة بك. احصل على فكرة عن إمكانيات البرنامج المساعد عن طريق تشغيل الملف index.html < demo .
لاستخدام المكوّن الإضافي "validate" ، ما عليك سوى تشغيل الطريقة validate() عندما يكون DOM متاحًا:

<script>
  $(document).ready(function() {
    $("#commentForm").validate();
  });
</script> 
لتحديد نوع التحقق من الصحة المطلوب في حقل النموذج ، قم بتعيين الفئة المقابلة:
  • Required : الحقول المطلوبة ؛
  • Email : البريد الإلكتروني ؛
  • url : عنوان URL ؛
  • Date : تاريخ
  • Number : رقم
  • Creditcard : رقم البطاقة البنكية.
إذا نظرت إلى الملف example.html ، سترى السطر التالي:

<input id="cemail" name="email" class="required email" /> 
هذا الرمز يعني أن الحقل مطلوب ويجب أن يحتوي على عنوان بريد إلكتروني. من السهل اقامة ، أليس كذلك؟ الشكل التالي هو مثال على تشغيل البرنامج النصي.
jQuery web
يتم عرض رسائل الخطأ تحت مربعات النص عندما تكون المعلومات المدخلة غير صالحة
يتم عرض رسائل الخطأ باللغة الإنجليزية ، ولكن ربما تريدها باللغة العربية . للقيام بذلك ، ما عليك سوى الرجوع إلى الملف messages_ar.js في رأس مستند HTML و ذلك باظافة تعليمة مثل هذا:

<script src="../dist/localization/messages_ar.js"></script> 
ثم سيتم عرض رسائل الخطأ باللغة العربية:
jQuery web
قائمة منسدلة على مستوى أو أكثر
غالبًا ما يكون من الضروري إعداد قائمة منسدلة في موقع ما. بدلا من تصميم كل شيء "باليد" ، أقترح عليك استخدام البرنامج المساعد. توضح الصورة التالية ما ستحصل عليه بمجرد كتابة بضعة أسطر من تعليمات HTML البرمجية.
jQuery web
قائمة منسدلة في بضعة أسطر من تعليمات HTML البرمجية مع البرنامج المساعد "Simple jQuery Dropdowns"
انتقل إلى هذه الصفحة وقم بتنزيل المكون الإضافي. قم بفك ضغط هذا الملف وانقر نقرًا مزدوجًا على الملف index.html للحصول على النتيجة من الشكل السابق. دعونا نرى ما هو مخفي في كود هذه الصفحة. البرنامج المساعد المستخدم هو jquery.dropdownPlain.js . ببساطة تنفيذ هذا البرنامج النصي يلهمك أي كود jQuery آخر! لإنشاء قائمتك ، ما عليك سوى تحديد قائمة <ul><li></li></ul> بمستوى واحد أو أكثر. دعونا نلقي نظرة على العناصر الأولى من القائمة المحددة في الملف index.html :

<ul class="dropdown">
  <li><a href="#">For Facilities</a>
    <ul class="sub_menu">
       <li><a href="#">Artificial Turf</a></li>
       <li>
        <a href="#">Batting Cages</a>
        <ul>
          <li><a href="#">Indoor</a></li>
          <li><a href="#">Outdoor</a></li>
        </ul>
       </li>
       <li><a href="#">Benches & Bleachers</a></li>
       <li><a href="#">Communication Devices</a></li>
       <li><a href="#">Dugouts</a></li>
       <li><a href="#">Fencing & Windscreen</a></li>
       etc. 
السطر الأول يخلق قائمة الصف dropdown . يتوافق هذا الفصل مع أوامر القائمة الرئيسية. <li> تحدد العلامة التالية عنوان القائمة الأولى. ثم يأتي علامة <ul> الصف sub_menu . تحتوي هذه العلامة على جميع الأوامر المرفقة بالقائمة الأولى. لإنشاء أوامر قائمة ثانوية ، قم ببساطة بتضمين قائمة أخرى <ul> تتكون من العديد من العلامات <li> مثل أوامر القائمة الثانوية. على سبيل المثال ، يتيح الأمر "Batting Cages" الوصول إلى أوامر القائمة الثانوية "داخلي" و "خارجي". لا شيء أكثر تعقيدًا!
إذا كنت بحاجة إلى إعداد قائمة على أحد مواقع الويب الخاصة بك ، فإن هذا البرنامج المساعد يجب أن يجعل عملك أسهل بكثير. فقط تذكر لإدراج الملفات jquery.dropdownPlain.js و style.css في ملفات js و css موقع الويب الخاص بك (أو التكيف حسب الحاجة)، وسيكون لديك ذلك!
خرائطية
ماذا عن نشر خريطة جغرافية تركز على نقطة معينة على موقع الويب الخاص بك؟ هذا هو ما أقترح القيام به مع المكون الإضافي "gMap" ، والذي يتفاعل مع خرائط Google لنظام الخرائط. انتقل إلى هذه الصفحة وقم بتنزيل أحدث إصدار مضغوط من المكون الإضافي.
دعونا نرى كيفية عرض خريطة العالم. قم بإنشاء مستند HTML جديد وإدراج علامة <div> في نص المستند. امنح هذه العلامة البعد الذي تريد أن تشغله في الصفحة وتعيين القيمة hidden إلى السمة الخاصة بها overflow :

  <div id="map1" style="width: 800px; height: 600px; border: 1px solid #777; overflow: hidden;"></div> 
للحصول على القوة الكاملة لخرائط Google ، استخدم ثلاث علامات <script> للإشارة إلى مكتبة jQuery و API لخرائط Google والمكون الإضافي jquery.gmap.min.js :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/
    maps?file=api&v=2&sensor=false&key=ABQIAAAA6
    cQIrMEc9zlaKBjWiPM5rxSjlBXfTSDcGsB79vzL90uiOHMpbBRa1FFoX
    2YfuQNFvFKxQtpz0ZCeuw&hl=fr">
</script>
<script type="text/javascript" src="jquery.gmap.min.js"></script> 
لعرض خريطة العالم في العلامة <div id="map1">، قم ببساطة بتطبيق الطريقة gMap() بمجرد توفر DOM :

<script>
  $(function() {
    $('#map1').gMap();
  }); 
</script> 
الصورة التالية توضح لك النتيجة.
jQuery web
يمكن تمرير العديد من المعلمات إلى الطريقة gMap() . من بين أمور أخرى:
  • خطوط الطول والعرض: الخصائص latitude و longitude؛
  • معلومات حول مركز العرض: الملكية address ؛
  • عامل التكبير / التصغير: خاصية zoom(بين 1 و 19) ؛
  • نوع الخارطة: الملكية maptype( HYBRID، TERRAIN، SATELLITE، ROADMAP).
للحصول على قائمة كاملة بالمدخلات التي يمكن تمريرها إلى الطريقة gMap()، راجع الوثائق عبر الإنترنت . للعثور على خطوط الطول والعرض للمدينة ، انتقل إلى موقع خرائط Google ، واكتب اسم المدينة في حقل البحث واضغط المفتاح Enterعلى لوحة المفاتيح. تركز الخريطة على المدينة مع رمز. انقر بزر الماوس الأيمن على هذا الرمز واختر More info about this place . ثم يتم تحديث حقل البحث تلقائيًا باستخدام خطوط الطول والعرض.
أخيرًا ، إليك مثال ملموس على الاستخدام. سنقوم بعرض خريطة متمركزة على مدينة ألبي ، وتقع في الإحداثيات (43.92 ، 2.14). سيتم عرض النص "Albi" في فقاعة ، وسيبلغ عامل التكبير 10 وستكون الخريطة من النوع " relief view ". هنا هو كود للاستخدام:

$("#map").gMap({ markers: [{ 
  latitude: 43.92,
  longitude: 2.14,
  html: "Albi",
  popup: true }],
  maptype: 'TERRAIN',
  zoom: 10 }); 
  • من الممكن توسيع إمكانيات jQuery باستخدام المكونات الإضافية. هناك الكثير وسوف يخدمونك بشكل جيد.
  • للإشارة إلى مكون إضافي ، ما عليك سوى تسميته باستخدام علامة <script> .
  • بمجرد الرجوع إلى المكوّن الإضافي ، يمكنك تسميته مثل أي طريقة jQuery أخرى. على سبيل المثال: $('#monId').monPlugin(10, 'red')