المدونة قيد التطوير والتحديث,عند حدوث اي مشاكل يرجى اعلامنا على صفحة اتصل بنا ×

كود jQuery عند الضغط علي زر يُظهر اداة او نص




مقدمة

جي كويري هي مكتبة خاصة بالجافا سكريبت، يقوم باختصار العديد من النصوص البرمجية المكررة والمهام المعروفة، وذلك لتسهيل عملية البرمجة وهذه هي سلسلة من مواضيع المدونه وهي عباره عن اكواد جاهزه لعمل معين لبرمجة الويب وشرح لهذه الاداه .. واليوم هو شرح اعطاء الامر لزر بفتح او اظهار او اخفاء اداه عند النقر عليه باستخدام الماوس او نقرتين  " Double Click "

مكتبة jQuery 

لاضافة مكتبة jQuery لمدونة قم باتباع تلك الخطوات :

  1. سجل الدخول الي لوحة تحكم بلوجر
  2. توجة الي : المظهر > تحرير HTML وقم بإضافة هذا الكود اسفل الوسم   <head> هكذا سيتم تفعيل مكتبة الجي كويري في مدونتك * هذه الخطوه مهمة جداً بدونها لن يعمل الكود

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

ويضاف هذا الكود فوق الوسم </body>

الكود

<script>
$("A").hide();            
$("B").click (fuction(){    
$("A").toogle();       
});
</script>

شرح الكود

هذا الكود بإختصار مُخصص للحدث التالي :

  • العنصر A مختفي عند فتح الصفحه
  • وعندما يتم الضغط علي العنصر B فإن :   A يظهر اذا كان مُختفي ، يختفي اذا كان ظاهراً 

العناصر

العنصرالوظيفه
.showاظهار الاداه
.hideاخفاء الاداه
.clickعند النقر
.dblclickالنقر المزدوج
.toogleاخفاء اذا كان ظاهر او العكس

كيف يمكنني اخفاء اداه ؟

بكل بساطه اذا كانت الاداه لها Id فتقوم بوضعه وراء علامة الهاتشاج $("#element 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>

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل