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


الدرس: واجهة المستخدم JQUERY UI


الصفحة السابقة
إذا كانت jQuery تقدم العديد من الطرق لإدارة خصائص DOM و CSS و AJAX وإدارة الأحداث ، فإن jQuery UI تكملها تمامًا من خلال تقديم طرق إضافية مطبقة في تحقيق واجهة المستخدم ("UI" ، في "jQuery UI" "يعني" واجهة المستخدم (" هي عبارة عن مجموعة كبيرة من المكونات الإضافية يمكن الوصول إليها من خلال ملف JavaScript واحد.

على ماذا هو قادر JQUERY UI ؟


للحصول على نظرة عامة على الإمكانيات التي توفرها jQuery UI ، انتقل إلى الموقع الرسمي واختبر الميزات المختلفة المتوفرة.
في بقية هذا الفصل ، سأريك كيفية استخدام الأساليب التي بدت لي الأكثر إثارة للاهتمام في jQuery UI . لاستخدام هذه المكتبة ، ما عليك سوى الرجوع إليها باستخدام علامة <script> تشير إلى Google CDN :
لتحسين العرض ، يمكن أن يستند تنسيق العناصر التي يتم معالجتها بواسطة jQuery UI إلى سمة CSS ، والتي ستشير إليها عبر علامة <link>، في رأس المستند. جميع المواضيع يمكن الوصول إليها من خلال النقر هنا
هذا الفصل هو مجرد مقدمة ل jQuery UI

نقل وتغيير حجم العناصر


الإزاحة
تسمح الطريقة draggable() بنقل أي عنصر DOM بحرية في الصفحة. لنفترض أن صفحة الويب تتكون من العناصر التالية:

<style>
div{
  width: 150px;
  height: 150px;
  padding: 0.5em;
  border: 1px black solid;
} 
</style>

<span>Déplacez les images et le div comme vous l'entendez</span><br /><br />
<img src="miniPaysage1.jpg">
<img src="miniPaysage2.jpg">
<img src="miniPaysage3.jpg">
<div>Déplacez-moi</div> 
بعد الإشارة إلى مكتبات jQuery و jQuery UI ، كل ما تحتاجه هو عبارة jQuery لعمل جميع العلامات <img> و <div> :

$(function() {
  $('img,div').draggable();
}); 
يوضح الشكل التالي مثالًا على تنفيذ هذا الكود ، قبل وبعد نقل الصور والعلامة <div>
jQuery web
يمكن نقل الصور الثلاث والعلامة <div> أينما تريد

تغيير حجم


طريقة resizable() تمكن من تغيير حجم أي كائن. على الرغم من إمكانية استخدامه على جميع كائنات DOM ، إلا أنك ستستخدمها بشكل أساسي للسماح للمستخدم بتغيير حجم الصور. مرة أخرى ، يضيء jQuery UI بالبساطة: لجعل عنصر يمكن تغيير حجمه ، قم ببساطة بتطبيق الطريقة resizable() .

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
                        jqueryui/1.8.12/themes/base/jquery-ui.css">

<img id="redim" src="visage.jpg">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
            jquery-ui.min.js">
</script> 
<script>
  $(function() {
    $("#redim").resizable();
  });
</script> 
يوضح الشكل التالي النتيجة.
jQuery web
يمكن تغيير حجم الصورة عن طريق العمل على الحواف اليمنى والسفلية ، وفي الزاوية اليمنى السفلية

الأكورديون


تخيل مجموعة من العلامات <div> ذات محتوى واحد فقط مرئي في كل مرة وستكون لديك فكرة جيدة عن الطريقة التي يمكن أن تنتج بها هذه الطريقة accordion() . لتنفيذ هذه الطريقة ، ابدأ بتعريف علامة <div> حاوية تتكون من عدة علامات عناوين <h3> مرتبطة بالعلامات <div> التي ستعرض المحتوى عليها. انظر إلى الكود التالي ، يجب أن يكون أكثر وضوحًا.

<div id="accordeon">
  <h3><a href="#">Titre du bloc 1</a></h3>
  <div>Contenu du bloc 1</div>
  <h3><a href="#">Titre du bloc 2</a></h3>
  <div>Contenu du bloc 2</div>
  etc.
</div> 
ارجع إلى ملف CSS jquery-ui.css على Google CDN ، ثم قم بتشغيل طريقة jQuery accordion() على <div> الحاوية ، كما في الكود التالي.

<html>
  $(document).ready(function() {
    $("#accordeon").accordion();
  });
</html> 
جرب الكود
يوضح الشكل التالي النتيجة.
jQuery web
لا تتردد في اختبار السمات المتاحة لتغيير جذري في تقديم الأكورديون.

اختيار التاريخ


تقوم الطريقة datepicker() بتحويل مربع نص بسيط <input type="text"> إلى تقويم حيث يمكن للمستخدم اختيار تاريخ. ثم يتم نسخ التاريخ المختار في مربع النص. لاستخدام هذه الطريقة ، قم فقط بتطبيقه على أي مربع نص ، بعد الإشارة إلى سمة وإلى مكتبات jQuery و jQuery UI :

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
                        jqueryui/1.8.12/themes/base/jquery-ui.css">

Date <input type="text" id="datepicker">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
            jquery-ui.min.js"></script> 

<script>
  $(function() {
    $( "#datepicker").datepicker();
  });
</script> 
يوضح الشكل التالي النتيجة التي تم الحصول عليها.
jQuery web
تم تحويل مربع النص إلى منتقي تاريخ في سطر من التعليمات البرمجية
ماذا تقول؟ جميلة جدا ، لا؟ ولكن ماذا عن وجود التقويم الفرنسي؟ سيكون أفضل ، أليس كذلك؟ لهذا ، ستتم تهيئة الصفيف $.datepicker.regional['ar']مثل هذا:

$.datepicker.regional['ar'] = {
  closeText: 'اغلاق',
  prevText: 'السابق',
  nextText: 'اللاحق',
  currentText: 'اليوم',
  monthNames: ['يناير','فبراير','مارس','ابريل','مايو','يونيو','يوليو',
            'اغسطس','سبتمبر','اكتوبر','نوفمبر','ديسمبر'],
  monthNamesShort: ['يناير','فبراير','مارس','ابريل','مايو','يونيو',
             'يوليو','اغسطس','سبتمبر','اكتوبر','نوفمبر','ديسمبر'],
  dayNames: ['الاحد','الاثنين','الثلاثاء','الاربعاء','الخميس',
            'الجمعة','السبت'],
  dayNamesShort: ['الاحد','الاثنين','الثلاثاء','الاربعاء','الخميس',
                'الجمعة','السبت'],
  dayNamesMin: ['الاحد','الاثنين','الثلاثاء','الاربعاء','الخميس',
                'الجمعة','السبت'],
  weekHeader: 'Sem.',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''}; 
ثم أشر إلى أنك تريد استخدام هذه البيانات في الطريقة datepicker()

$.datepicker.setDefaults($.datepicker.regional['ar']); 
يجب وضع هذه التعليمات أعلى استدعاء الأسلوب مباشرة datepicker() . هنا أنت مع تقويم باللغة العربية!
jQuery web

مربعات الحوار


تسمح لك هذه الطريقة dialog() بإنشاء مربعات حوار تبدو أفضل بكثير من تلك المعروضة مع وظيفة JavaScript alert() . إليك كيفية تنفيذها:
  1. إنشاء علامة <div> .
  2. حدد عنوان مربع الحوار في السمة الخاصة به title .
  3. تطبيق الأسلوب dialog()على العلامة <div> .
العبارة التالية بإنشاء مثيل لمربع الحوار وفتحه:

$('sel').dialog();
إذا كان يجب فتح مربع الحوار وإغلاقه عدة مرات ، فستستخدم الإرشادات الأخرى:

$('sel').dialog({ autoOpen: false; }); 
$('sel').dialog('open'); 
$('sel').dialog('close'); 
فيما يلي بعض الخيارات الأخرى التي يمكن استخدامها في مدخلات الطريقة dialog() :
خيارات معنى
heightوwidth ارتفاع وعرض مربع الحوار عند فتحه.
modal تهيئة true، يجعل مربع حوار مشروط (أي ، يمنع الوصول إلى الصفحة). القيمة الافتراضية هي false.
position موضع مربع الحوار على الصفحة (يتم توسيطه افتراضيًا).
zindex الفهرس Z لمربع الحوار (1000 افتراضياً).
buttons واحد أو أكثر من الأزرار المعروضة في مربع الحوار.
فيما يلي مثال أساسي <div>يتم فيه تحويل علامة إلى مربع حوار غير معتدل مركزه أبعادها هي الافتراضية:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
                    jqueryui/1.8.12/themes/base/jquery-ui.css">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
…
fugiat quo voluptas nulla pariatur?
<div id="dialog" title="Boîte de dialogue de base">
  Cette boîte de dialogue peut être redimensionnée, déplacée et fermée.
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/
            jqueryui/1.8/jquery-ui.min.js"></script> 
<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
</script> 
يوضح الشكل التالي النتيجة التي تم الحصول عليها.
jQuery web
افترض الآن أنك تريد إنشاء مربع حوار مشروط مع زرين ( Oui و Non ) ووضعه في (100 ، 100) . هنا هو كود للاستخدام:

<script>
  $(function() {
    $( "#dialog" ).dialog({
      modal: true,
      buttons: {
        "Oui": function() {
          $('body').css('background', 'yellow');
          $( this ).dialog( "close" );
        },
        "Non": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
</script> 
يوضح الشكل التالي النتيجة التي تم الحصول عليها. كما ترون ، الصفحة رمادية ولا يمكن الوصول إليها. عندما ينقر المستخدم فوق الزر Oui، تتحول خلفية الصفحة إلى اللون الأصفر ، ويغلق مربع الحوار. عند النقر فوق الزر Non، تظل الخلفية دون تغيير ويغلق مربع الحوار. أهم شيء يجب تذكره هو أنه يمكنك تحديد الوظائف.
jQuery web

عرض علامات التبويب


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

<div id="onglets">
  <ul>
    <li><a href="#onglet-1">تبويب 1</a></li>
    <li><a href="#onglet-2">تبويب 2</a></li>
    <li><a href="#onglet-3">تبويب 3</a></li>
  </ul>
  <div id="onglet-1">
    <!--contenu -->
  </div>
  <div id="onglet-2">
    <!--contenu -->
  </div>
  <div id="onglet-3">
    <!--contenu -->
  </div>
</div> 
بمجرد تنفيذ هذه التعليمات ، قم بتطبيق الطريقة tabs() على العلامة <div> الأصل ( هنا #onglets ) :

<script>
  $(function() {
    $('#onglets').tabs();
  });
</script> 
jQuery UI ثم يعتني الباقي. انظر إلى الشكل التالي ليكون مقتنعا.
jQuery web
يمكن أيضًا الحصول على محتويات علامات التبويب المختلفة في AJAX . للقيام بذلك ، حدد عنوان URL للصفحات المراد عرضها في سمة href علامات التبويب المختلفة. هنا على سبيل المثال ، يتم الحصول على علامة التبويب الأولى من العلامة <div> الفرعية #onglet-1 ، والثانية من الصفحة البعيدة page2.htm والثالثة من برنامج PHP page3.php :

<ul>
  <li><a href="#onglet-1">Titre onglet 1</a></li>
  <li><a href="http://www.site.com/page2.htm">Titre onglet 2</a></li>
  <li><a href=" http://www.site.com/page3.php">Titre onglet 3</a></li>
</ul> 

الرسوم المتحركة: انطباع "تمت رؤيتها"


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

show(effet, options, vitesse, retour);
hide(effet, options, vitesse, retour);
toggle(effet, options, vitesse, retour); 
... حيث:
  • Effet هو واحد من الإجراءات التالية: blind ، clip، drop، explode، fold، puff، slide، scale، size و pulsate .
  • Options يمثل الخيارات لتطبيقها على التأثير. هذه المعلمة اختيارية.
  • Vitesse هي سرعة تنفيذ تأثير slow، normal(القيمة الافتراضية تساوي 400 مللي ثانية)، fastأو الرقم الذي يمثل الوقت بالمللي ثانية. هذه المعلمة اختيارية.
  • Retour هي وظيفة الإرجاع ، يتم تنفيذها عند اكتمال التأثير. هذه المعلمة اختيارية.
فيما يلي مثال عملي لاستخدام طريقة jQuery UI show() مع التأثير explode:

<style type="text/css">
  #contenu 
  { 
    width: 240px; 
    height: 135px; 
    border: 1px gray solid; 
    background-color: #aaeae1;
  }
  #contenu h3 
  { 
    margin: 0; 
    padding: 0.4em; 
    text-align: center; 
    background-color: #777;
  }
</style>

  <div id="contenu" style="width: 400px;">
    <h3>Un titre</h3>
    At vero eos et accusamus et iusto odio dignissimos ducimus 
    qui blanditiis praesentium voluptatum deleniti atque corrupti 
    quos dolores et quas molestias excepturi sint occaecati 
    cupiditate non provident, similique sunt in culpa qui officia 
    deserunt mollitia animi, id est laborum et dolorum fuga.
  </div>

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/
                jqueryui/1.8/jquery-ui.min.js">
    </script> 
  <script>
    $(function() {
    $('#contenu').show('explode');
    });
  </script> 
جرب الكود
كود CSS موجود فقط لإعطاء القليل من الاتساق للعلامة <div id="contenu"> . هذا الأخير يحتوي على عنوان </div> <H1 id="togg1" class="togg"><i id='c1' class="fas fa-chevron-down" style="float:left"></i> ونص صغير. يطبق كود jQuery التأثير explode على العلامة <div id="contenu"> عبر الطريقة show() .
أنصحك لاختبار الآثار وغيرها من الأساليب hide() و toggle() أن أبلغكم الفرص المتاحة. إذا كنت تريد المزيد من المعلومات حول خيارات التأثيرات المختلفة ، فراجع الصفحة المخصصة لها.
لتطبيق تأثير على عنصر ما دون ظهوره أو اختفائه ، استخدم الطريقة effect() ، باستخدام بناء الجملة نفسه كما هو الحال مع الطرق show() ، hide() و toggle() .

لون الرسوم المتحركة


في الجزء الثالث من الدورة ، تعلمت كيفية تحريك العناصر بالطريقة animate() . يمدد jQuery UI هذه الطريقة: يمكنك الآن تحريك لون العناصر! الخصائص التي يمكنك العمل عليها هي:
  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor
لا يتغير بناء جملة الطريقة animate() :

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, 
                  duration, model, function() {
  //instructions
}); 
... حيث:
  • sel هو محدد jQuery
  • prop1 ، prop2، prop3 هل خصائص CSS val1 ، val2، val3 القيم المرتبطة بها؛
  • duration هي مدة الرسوم المتحركة ؛
  • Model هو نموذج تطور الرسوم المتحركة ؛
  • function() تحتوي على عبارة واحدة أو أكثر سيتم تنفيذها عند اكتمال الرسوم المتحركة.
لتوضيح الرسوم المتحركة الملونة ، سنقوم تدريجياً بتغيير لون الخلفية ولون النص في علامة ما <div> ، مع دمج هذه الرسوم المتحركة مع تغيير في العرض والموضع الأفقي للعلامة.

<style>
#contenu 
{
  border: 4px gray solid; 
  background-color: #aaeae1; 
  color: black; 
  width: 100px;
  position: relative;
}
#contenu h3 
{
  margin: 0; 
  padding: 0.4em; 
  text-align: center; 
  background-color: #777;
}
</style>

<div id="contenu">
  <h3>Cliquez ici</h3>
  At vero eos et accusamus et iusto odio dignissimos ducimus 
qui blanditiis praesentium voluptatum deleniti atque corrupti 
quos dolores et quas molestias excepturi sint occaecati 
cupiditate non provident, similique sunt in culpa qui officia 
deserunt mollitia animi, id est laborum et dolorum fuga.
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
              jquery-ui.min.js">
</script> 
<script>
  $(function() {
  $('#contenu').toggle(
    function() {
    $( '#contenu').animate({
      backgroundColor: '#fff',
      color: 'red',
      left: '+=200',
      width: 500
    }, 1000 );
  },
  function() {
    $('#contenu').animate({
      backgroundColor: '#aaeae1',
      color: 'black',
      left: '-=200',
      width: 100
    }, 1000 );
  }
  );  
  });
</script> 
جرب الكود
يحدد كود CSS خصائص العلامة <div> والعنوان المدرج </div> <H1 id="togg1" class="togg"><i id='c1' class="fas fa-chevron-down" style="float:left"></i> فيها . تتم تهيئة الخاصية position مع القيمة relative للسماح للعلامة بالتحرك.
يطبق كود jQuery الطريقة toggle() )على العلامة <div id="contenu">) . عندما ينقر المستخدم على هذه العلامة ، يتم تنفيذ الوظيفتين المحددتين في معلمات الطريقة toggle() بالتناوب.
تعمل الوظيفة الأولى على تنشيط لون الخلفية ولون الحرف والموضع الأفقي (+ = 200) وعرض العلامة <div>(500) . الوظيفة الثانية تعطي العلامة خصائصها عند فتح الصفحة. لهذا ، فإنها تنعش لون الخلفية ولون الشخصيات والموضع الأفقي (- = 200) وعرض العلامة <div> (100) .

نماذج التقدم


باستخدام jQuery ، يمكنك فقط الوصول إلى نموذجين للتقدم في الرسوم المتحركة الخاصة بك : swing و linear . تقدم مكتبة jQuery UI العديد من نماذج التقدم:
easeInOutQuad easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart easeInQuint
easeOutQuint easeInOutQuint easeInSine easeOutSine
easeInOutSine easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc easeInElastic
easeOutElastic easeInOutElastic easeInBack easeOutBack
easeInOutBack easeInBounce easeOutBounce easeInOutBounce
بعد الإشارة إلى مكتبة jQuery UI، يمكنك استخدامها في جميع وسائل الرسوم المتحركة : show() ، hide()، fadeIn()، fadeOut()، fadeTo()، slideUp()، slideDown() و animate() . للحصول على فكرة عن تأثير نماذج التقدم ، انتقل إلى الصفحة المخصصة لها (انظر الشكل أدناه) وانقر على الصور المصغرة
jQuery web
العرض التوضيحي عبر الإنترنت لقوالب تقدم واجهة المستخدم jQuery
فيما يلي مثال قصير يوضح كيفية تطبيق نماذج تقدم jQuery UI على صورة:

<button id="easeOutElastic">Effet easeOutElastic</button>
<button id="easeInOutBack">Effet easeInOutBack</button><br />
<img src="balle.png" style="position: relative;">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
            jquery-ui.min.js"></script> 
<script>
  $(function() {
    $('#easeOutElastic').click( function() {
      $('img').css('left','0px');
      $('img').animate({ left: '+=200'}, 3000, 'easeOutElastic' );
    });  
    $('#easeInOutBack').click( function() {
      $('img').css('left','0px');
      $('img').animate({ left: '+=200'}, 3000, 'easeInOutBack' );
    });  
  });
</script> 
جرب الكود
عند النقر فوق الزر الأول ، يتم نقل الصورة إلى اليمين بمقدار 200 بكسل باستخدام قالب تقدم easeOutElastic . الزر الثاني يفعل نفس الشيء ، ولكن باستخدام نموذج التقدم easeInOutBack .
  • jQuery UI هو تكملة مثالية ل jQuery . ستساعدك الطرق العديدة المتوفرة في هذه المكتبة على تحسين مظهر صفحاتك وإمكانياتها.
  • للوصول إلى جميع الأساليب الموجودة في مكتبة jQuery UI ، ما عليك سوى إضافة علامة <script> للإشارة إليها.
  • لتحسين العرض ، يمكن أن يستند تنسيق العناصر التي يتم معالجتها بواسطة jQuery UI إلى سمات CSS يمكن الوصول إليها على CDN .
  • الطرق show() hide() و toggle() للمكتبة jQuery UI توفر الوصول إلى العديد من التاثيرات الإضافية.
  • تقدم jQuery UI عدد كبير من نماذج النمو المستخدمة في جميع أساليب الرسوم المتحركة : show(), hide(), fadeIn(), fadeOut(), fadeTo() slideUp() slideDown() و animate() .