الفهرس

الجزء 3 - المضي قدما مع jQuery

تبسيط البرمجة ب 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 من هذه الدورة. إليك ما أقترح القيام به:

عرض تدريجي للعناصر على الجانب الأيمن من الصفحة باستخدام الطريقة fadeIn().
اختفاء تدريجي لهذه العناصر نفسها باستخدام الطريقة fadeOut() عندما ينقر المستخدم على الزر OK.
زر مضاف إلغاء، على يمين الزر OKللسماح للمستخدم بإلغاء إدراج تسمية أو مربع نص أو زر.
تعطيل أزرار Label، Zone de texteو Boutonعندما قام المستخدم بالنقر على واحد منهم، وتنشيط هذه الأزرار عندما ينقر المستخدمون على OKأو Annuler.
إضافة كود CSS أو jQuery لعرض التظليل على الأزرار النشطة عند تحريك الماوس.

تقديم

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