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


الدرس: النشاط: إنشاء مولد نموذج


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

سجل النشاط


في هذا النشاط ، ستقوم بتعريف HMI (واجهة الجهاز البشري) لتسهيل إنشاء نماذج الإدخال. يتم توفير كود HTML . ستكون مهمتك إعادة تشغيل الأزرار الموجودة في العلامة الموجودة في <div>أقصى اليمين من خلال إضافة رمز jQuery . وهكذا، يمكن للمستخدم إنشاء النماذج المخصصة بالضغط على الأزرار Label، Text Zoneو Button، وتقديم المعلومات المطلوبة.
والآن ، الأمر متروك لك!
أقترح عليك أن تبدأ من هذا الكود

<!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%;
      }
    </style>
  </head>
  <body dir="rtl">
    <div id="gauche">
    </div>
    <div id="droite">
      استعمل هذه الازرار لانشاء النموذج<br><br>
      <button>Label تسمية</button>
      <button>Text zone مربع نص</button>
      <button> زر Button</button>
    </div>
  </body>
</html>      


لا يوجد شيء معقد حقًا: تنقسم الصفحة إلى منطقتين عموديتين بلون أصفر باهت وأزرق فاتح. تحتل المساحة الموجودة على اليسار 70٪ من عرض الصفحة بينما تبلغ المساحة الموجودة على اليمين 30٪:
jQuery web
الغرض من هذا التطبيق هو إنشاء نماذج تحتوي على ملصقات ومربعات نصية وأزرار باستخدام الأزرار المعروضة على الجانب الأيمن من الشاشة.
في الوقت الحالي ، الأزرار الثلاثة ليس لها أي تأثير. الأمر متروك لك لإضافة رمز jQuery لتنشيط الأزرار.

تفعيل زر التسمية


يؤدي النقر فوق الزر إلى Labelعرض العناصر التالية على الجانب الأيمن من الشاشة:
jQuery web
عندما ينقر المستخدم فوق الزر OK، يظهر النص الذي تم إدخاله في مربع النص على الجانب الأيمن من الشاشة داخل <span></span>:

  <span>الاسم</span>     

ويتم مسح عناصر التحكم المضافة في الجزء الأيسر لتظل مرئية فقط للنص "استخدم هذه الأزرار لإنشاء النموذج" والأزرار   Label تسمية،   text zone مربع نص   Buttonزر
jQuery web

تنشيط زر مربع النص وزر BUTTON


الأزرار الأخرى لها سلوك مماثل.
  • text zoneيسأل الزر عن معرف مربع النص:
    jQuery web
    وإدراج حقل إدخال لنوع النص عند النقر فوق الزر OK :
    
      <input id = "name" type = "text">
    
    
  • أخيرًا ، يسأل الزر الأخير عن تسمية الزر لإدراج:
    jQuery web
    وأدخل كود انشاء الزر <button></button>عند النقر فوق الزر OK :
    
      <button>موافق</button>
    
    

توليد النموذج


أدخل الكود jQuery و CSS اللازم للرد على النقرات على الأزرار وأدخل عناصر التحكم في الجانب الأيمن من الصفحة. بمجرد وضع الكود في مكانه ، قم بإنشاء النموذج التالي:
jQuery web

الكود الذي ستكتبه


إيلاء الاهتمام لكود المصدر والهيكل. يجب أن يكون الرمز مقروءًا مع مراعات المسافات البادئة للاسطر . اتبع ممارسات التطوير الجيدة ( مكان وضع كود jQuery ، واستخدام CSS ، ووضع العناصر في div باستخدام الأساليب ، وما إلى ذلك) .
إليك بعض النصائح لتبدأ بها:
  • استخدام الأساليب append() و after() لوضع المحتوى في div . الأمر متروك لك لمعرفة الطريقة التي يجب استخدامها للقسم الأول والثاني.
  • لإزالة المحتوى المعروض في div الثاني ، أدخل هذا المحتوى في حاوية.
  • إدراج رمز CSS في head لفصله

المطلوب


  1. ابدأ بتنزيل كود البدء الموجود اعلاه.
  2. قم بتغييره وفقا للتعليمات المطلوبة..
  3. حظ موفق !