بواسطة 
مقدمة
جي كويري هي مكتبة خاصة بالجافا سكريبت، يقوم باختصار العديد من النصوص البرمجية المكررة والمهام المعروفة، وذلك لتسهيل عملية البرمجة وهذه هي سلسلة من مواضيع المدونه وهي عباره عن اكواد جاهزه لعمل معين لبرمجة الويب وشرح لهذه الاداه .. واليوم هو شرح اعطاء الامر لزر بفتح او اظهار او اخفاء اداه عند النقر عليه باستخدام الماوس او نقرتين " Double Click "
مكتبة jQuery
لاضافة مكتبة jQuery لمدونة قم باتباع تلك الخطوات :
- سجل الدخول الي لوحة تحكم بلوجر
- توجة الي : المظهر > تحرير HTML وقم بإضافة هذا الكود اسفل الوسم
<head> هكذا سيتم تفعيل مكتبة الجي كويري في مدونتك * هذه الخطوه مهمة جداً بدونها لن يعمل الكود
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
ويضاف هذا الكود فوق الوسم
<script>
$("A").hide();
$("B").click (fuction(){
$("A").toogle();
});
</script>
شرح الكود
هذا الكود بإختصار مُخصص للحدث التالي :
- العنصر A مختفي عند فتح الصفحه
- وعندما يتم الضغط علي العنصر B فإن : A يظهر اذا كان مُختفي ، يختفي اذا كان ظاهراً
العناصر
| العنصر | الوظيفه |
|---|---|
| .show | اظهار الاداه |
| .hide | اخفاء الاداه |
| .click | عند النقر |
| .dblclick | النقر المزدوج |
| .toogle | اخفاء اذا كان ظاهر او العكس |
كيف يمكنني اخفاء اداه ؟
بكل بساطه اذا كانت الاداه لها Id فتقوم بوضعه وراء علامة الهاتشاج
اما لو كانت الاداه بدون Id فستقوم بوضع Id لها
تجربة بسيطه
سأقوم بعمل زر ونص و اجعل النص يختفي بمجرد الضغط علي الزر . قم بنسخ الاكواد ووضعها في مُحرر واحفظها بصيغة .htm وشاهد النتيجه
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
ليست هناك تعليقات:
إرسال تعليق