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


الدرس: النشاط: إضافة بعض الاساليب الى المولد الخاصة بك


الصفحة السابقة

سجل النشاط


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

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          margin: 0;
        }
        #gauche {
          float: left;
          width: 70%;
          height: 1000px;
          background-color: #EFECCA;
        }
        #droite {
          background-color: #CEFFF8;
          height: 1000px;
          padding : 10px;
          padding-left: 71%;
        }
        span, button, input {
          margin: 10px;
        }	
      </style>
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body dir="rtl">
      <div id="gauche">
      </div>
      <div id="droite">
        استخدم هذه الأزرار لإنشاء النموذج الخاص بك<br><br>
        <button id="btn1" disabled>Label تسمية</button>
        <button id="btn2"disabled>Zone de texte مربع نص</button>
        <button id="btn3"disabled>Bouton زر</button>
        <hr> 
      </div>
      <script>
        $(function(){
          $('#btn1').click(function(){
            $('hr').after('<div id="conteneur">نص التسمية <input type="text" id="tex"><button id="btnok">OK</button></div>');
            $('#btnok').click(function(){
              var lid =  '<span>' + $('#tex').val() + '</span>';
              $('#gauche').append(lid);
              $('#conteneur').remove();
            });
          });
          $('#btn2').click(function(){
            $('hr').after('<div id="conteneur">id مربع النص <input type="text" id="tex"><button id="btnok">OK</button></div>');
            $('#btnok').click(function(){
              var lid =  '<input type="text" id="' + $('#tex').val() + '"><br>';
              $('#gauche').append(lid);
              $('#conteneur').remove();
            });
          });
          $('#btn3').click(function(){
            $('hr').after('<div id="conteneur">نص الزر <input type="text" id="tex"><button id="btnok">OK</button></div>');
            $('#btnok').click(function(){
              var lid =  '<button>' + $('#tex').val() + '</button>';
              $('#gauche').append(lid);
              $('#conteneur').remove();
            });
          });
        });
      </script>
    </body>
  </html>      
ستقوم الآن بتعديل هذا الكود لإضافة ميزات.
الهدف هو البناء على ما تعلمته في الجزء 3 من هذه الدورة. إليك ما أقترح القيام به:
  1. عرض تدريجي للعناصر على الجانب الأيمن من الصفحة باستخدام الطريقة fadeIn(). jQuery web
  2. اختفاء تدريجي لهذه العناصر نفسها باستخدام الطريقة fadeOut() عندما ينقر المستخدم على الزر OK. jQuery web
  3. زر مضاف إلغاء، على يمين الزر OKللسماح للمستخدم بإلغاء إدراج تسمية أو مربع نص أو زر. jQuery web
  4. تعطيل أزرار Label، Zone de texteو Boutonعندما قام المستخدم بالنقر على واحد منهم، وتنشيط هذه الأزرار عندما ينقر المستخدمون على OKأو Annuler. jQuery web
  5. إضافة كود CSS أو jQuery لعرض التظليل على الأزرار النشطة عند تحريك الماوس. jQuery web

تقديم


  1. قم بأخذ الكود الذي أعطيته لك .
  2. قم بتغييره وفقا للتعليمات.
  3. حظ موفق !