الفهرس
تبسيط البرمجة ب 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 لعرض التظليل على الأزرار النشطة عند تحريك الماوس.
تقديم
- قم بأخذ الكود الذي أعطيته لك .
- قم بتغييره وفقا للتعليمات.
- حظ موفق !