التعامل مع الأحداث Events والتأثيرات Effect
بسم الله الرحمن الرحيم
التعريف بالحدث او الأحداث
الحدث هو وقوع شيء ما اي عندما نمرر الفأرة على رابط او نضغط عليه فهذا يسمى حدث Event
المثال ينطبق على كل العناصر داخل الصفحة
المثال الذي وضعته في الدرس السابق هو حدث click اي عندما نضغط على شيء نطلب منه ان يفعل كذا وكذا بلغة javascript
الأحداث موجود في لغة javascript
وهي كالتالي
onClick
onMouseover
onMouseout
onKeypress
ويتم التحكم في الحدث في مكان الحدث بهذه الطريقة
كود HTML:
<a href="#" onClick="your function">رابط</a>
يمكنك معرفة باقي الأحداث من هنا
وتأتي مكتبة jQuery لتختصر وتصبح الأحداث بدون on اي
click
mouseover
mouseout
keypress
جميع الأحداث من موقع المكتبة
وكذالك التحكم في الحدث بعيدا عن مكان الحدث اي <head> او ملف خارجي يتم استدعائه في <head> ايضا
مثال
كود jquery
كود HTML:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#link").click(function(){
if(!confirm('هل حقا تريد زيارة هذا الرابط \n'+this)){
return false; // الغاء تحويله الى الرابط
}
}); // #link
}); // document
</script>
كود الرابط
كود HTML:
<a href="http://google.com" id="link">جوجل</a>
لقد تحكمنا في رابط واحد وهو جوجل من خلال id=link ولكن ماذا لو اردنا ان ننبه الزائر في جميع الروابط
نغير #link الى a
مثال
كود HTML:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
if(!confirm('هل حقا تريد زيارة هذا الرابط \n'+this)){
return false; // الغاء تحويله الى الرابط
}
}); // #link
}); // document
</script>
كود الرابط
كود HTML:
<a href="http://google.com">جوجل</a>
<a href="http://yahoo.com" >ياهو</a>
<a href="http://bp.ma">مدونة مبرمج</a>
بما انني وضعت مثال عن الرابط من خلال الأحداث احببت ان اوضح هذه النقطة "التحكم في الروابط" بشكل اوسع قليلا
لكي تعرف جميع دوال المكتبة يمكنك تجربتها مباشرة من خلال هذا الموقع Visual jQuery
الأن مع التأثيرات Effect
هناك دوال خاصة بصنع التأثيرات منها الانزلاق والتلاشي والاخفاء ...
في كل دالة هناك ثلاث مستويات من التحكم زائد التحكم بالميلي ثانية
مثلا دالة hide
كود HTML:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myp").click(function(){
$('#mydiv').hide(); // سيتم اخفاء العنص بسرعة
});
}); // document
</script>
<p id="myp">اخفاء</p>
<div id="mydiv">
السلام عليكم
</div>
الحالات الأخرى هي
كود HTML:
$('div').hide('fast'); // بسرعة ايضا
كود HTML:
$('div').hide('slow'); // بطيء
كود HTML:
$('div').hide('normal'); // طبيعي
كود HTML:
$('div').hide(1000); // السرعة بثانية
كود HTML:
$('div').hide(500); // السرعة بنصف ثانية
كذلك يمكنك تغيير السرعة كما تشاء من 0 الى اي سرعة تريدها
هذه الاعدادات تستطيع تطبيقها على جميع دوال التأثيرات التي سأذكرها
كود HTML:
hide(); // اخفاء
show(); // اظهار
toggle(); // اخفاء اظهار في نفس الوقت
slideDown(); // اخفاء من الأعلى الى الأسفل
slideUp(); // عكس السابق
slideToggle(); // اخفاء واظهار بتأثير الدالتين السابقتين
fadeIn(); // يتلاشى الى الخارج
fadeOut(); // عكس السابق
fadeTo(); // يتلاشى في نس المكان
هناك دوال اخرى اكتشفها بنفسك
اما هذه الدالة فهي رائعة بمعنى الكلمة
اخفاء واظهار
كود HTML:
$('#mydiv').animate({
"height": "toggle", "opacity": "toggle"
},'slow');
الأن العب مع jquery
كود HTML:
$(document).ready(function(){
$("#start").click(function(){
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"left": "-=750px"}, "fast");
$(".mydiv").animate({
"left": "+=350px",
"top":"+=350px",
}, 500);
$(".mydiv").animate({
"left": "-=350px",
"top":"-=350px",
}, 500).fadeOut(800);
});
}); // document
مثال حي
الدرس القادم عن استخدام تقنية اجاكس من خلال jquery
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Dezology 
