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


الدرس: النشاط: تبسيط المولد الخاص بك مع رسائل المساعدة


الصفحة السابقة
لجعل HMI أكثر سهولة ، ستقوم بعرض معلومات المساعدة في العلامة <div> اليسرى عندما ينقر المستخدم فوق الزر Label. يجب أن تظهر هذه المعلومات وتختفي باستخدام تأثير fadeIn/fadeOut . يجب أن توضع في ملف نصي واحد ، والتي تحددها معرفات وقراءة باستخدام أجاكس. أقترح عليك أن تبدأ من رمز التمرين السابق .

<!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>    
في هذا التمرين ، ستقوم بعرض رسالة مساعدة على الجانب الأيسر من الصفحة عندما يقوم المستخدم بالنقر فوق الزر Label . يجب أن يظهر هذا النص أسفل العناصر المعروضة.
إليك ما تحتاج إلى الحصول عليه بعد النقر فوق Label :
jQuery web
أقترح إنشاء ملف بيانات والوصول إليه في AJAX عبر الطريقة load() . يجب أن يظهر نص التعليمات ويختفي مع التأثير fadeIn/fadeOut، بالإضافة إلى العناصر الأخرى المعروضة عند النقر فوقها Label .
إذا كنت ترغب في المكافأة، حاول فعل الشيء نفسه على الأزرار Zone de texteو Bouton .

تقديم

  1. ابدأ بنسخ كود البداية .
  2. تغييره وفقا للتعليمات.
  3. انشاء الكود الخاص بك.
  4. حظ موفق !