2010-01-15
تعلم JQuery اليوم الثانى
بعد الدرس السابق " تعلم الـ jquery " اليوم الاول , اتمنى ان يكون استفاد منه البعض , اكمل هنا
اولا : خلاصة سريعة لما سبق
انظر الصورة التالية " اضغط للتكبير "
كيف تختار اى شئ بواسطة الجى كويرى ؟
هناك العديد من الروابط فى المدونة , كلهم يرمز له بالكود a اليس كذلك ؟ كيف تستطيع ان تختار واحد منهم فقط لتخصه بعمل تاثير ما او تخصه هو نفسه بتطبيق التاثير عليه ؟
كما ذكر فى الموضوع السابق ان الرابط يمكنك ان تنشأ له id خاص تستطيع من خلاله ان تختار هذا الرابط دون غيره .
هناك ايضا العديد من الاقسام div تستطيع ان تنشأ لايها class مخصوص لتتحكم فيه دون غيره , وهكذا , ينطبق هذا الاسلوب مع كل شئ فى المدونة حتى تتحكم فى كل شئ بعينه دون غيره . اوكى
$("#box")
هنا انت تختار اى شئ فى المدونه له آى دى = box
$(".class")
هنا انت تختار اى شئ فى المدونه له كلاس = box
$("a")
هنا انت تختار اى رابط فى المدونة بدون تحديد
$("#hello")
انت تختار الرابط ( الروابط ) التى لها اى دى = hello فقط
$("p a")
هنا انت تختار الروابط الموجودة داخل أى paragraph
$("#sidebar a")
فى حالة المدونات التى بها اطار جانبى اسمه sidebar , انت هنا تختار كل الروابط الموجودة داخل اى شئ له آى دى = sidebar
$("ul il")
انت هنا تختار فقط الـ list items (li) الموجودة داخل اى Unordered list (ul) داخل المدونة , لاحظ ان الادوات من نوع link list (او قائمة روابط ) ستندرج تحت هذا الاختيار لكونها قائمة غير مرتبة . ايضا سيندرج تحتها الجداول
$("ul li:first")
مثل السابق , لكنت انت هنا تختار فقط العنصر او الرابط الأول من القائمة
$("h2")
انت تختار كل عنوان header من النوع الثانى
$("div#content .photo")
انت هنا تختار الاشياء التى لها class = photo ألتى تتواجد فقط داخل القسم div الذى له id = content .
$(this)
لنفرض ان لديك فى المدونة رابط ما له id اسمه hello مثلا
انت تريد عندما تضغط على الرابط ان ينزلق جزء التدوينات main-wrapper لاعلى
علما بان بالفعل يوجد لديك فى المدونة هذا الـ main-wrapper , وايضا لهذا الـ main-wrapper كلاس اسمخ down كى يعبر عن ان حالة هذا الـ Main-wrapper الان هى انها منزلقة لاسفل .
انت تريد عندما تضغط على الرابط ان تنزلق تلك القطعة اولا وايضا يتغير الكلاس من down الى UP كى يعبر عن ان الحالة تغيرت بالفعل
الكود سيصبح بالشكل الاتى :
$(document).ready(function(){
$("a#hello").click(function(){
$("#main-wrapper").slideUp("slow");
$(this).toggleClass("UP");
});
});
الشرح : الرابط a ألذى به id اسمه hello عند الضغط عليه .click ستنشأ وظيفة function مفادها ان : القسم div ألذى له id اسمه main-wrapper سينزلق لأعلى slideUp هذا اولا , لاحظ ان الوظيفة لم تنتهى , ثانيا سيحدث أن this ومعناها ان الـ main-wrapper نفسها هى التى سيحدث عليها التاثير , فبدلا من كتابة main-wrapper مرة ثانية , لا انت تكتب فقط this لتعنى ان نفس الشئ المذكور مباشرة من قبل هو نفسه الذى سينطبق عليه التاثير التالى , الا وهو toggleClass اى غير الكلاس من اسمه السابق الى الاسم الجديد UP . لاحظ ان toogle معناها التغيير بالتبادل , بمعنى انك عندما تضغط للامرة الاول ستبدل من down الى up والمرة الثانية ستبدل لوضعها الاصلى down والمرة الثالثة up وهكذا .
الخلاصة : ان this تعنى القطعة المذكورة مباشرة من قبل , بدلا من التكرار .
--------------------------
التطبيق الأول :
عندما تضغط على الرابط سيتحول قسم ما من كلاس لآخر , وبالتالى سيتحول من مواصفات الكلاس الأول لمواصفات الكلاس الثانى
اولا : يجب وضع مواصفات الكلاس الاول وليكن down وهو الافتراضى , وايضا وضع مواصفات الكلاس الثانى وليكن up . نضع تلك المواصفات ( الاكواد ) داخل جزء الـ head بصندوق الاكواد :
.down{
height:10px;
width:200px;
background:eeeeee;
}
.up{
height:300px;
overflow:auto;
background:e0e0e0;
}
بينما فى جزء الـ body يجب عليك اولا ان تنشا الرابط ولنضع له id مثلا اسمه slide وايضا ان تنشأ هذا القسم الذى سيطبق عليه هذا التاثير , ولنضع لهذا القسم id مثلا اسمه panel ونضع بداخله صورة وتعليق
(ضع هذه الاكواد فى منطقة الـ body ) وليكن مثلا مباشرة بعد كلمة <body>
لاحظ ان الكلاس down الافتراضى ارتفاعه 10 بيكسل , اى تقريبا مختفى , عند الضغط على الرابط سيتغير الكلاس الى up ويتغير بالتالى الارتفاع الى 300 بيكسل
<a id='slide' href='javascript:void(0);'>اضغط هنا</a>
<div id='panel' class='down'>
<img class="pic" src="http://www.barnardos.org.uk/microsite_smile.gif" />
</div>
للاستفسار او الاسئلة : اترك تعليق
اشكال بديلة اخرى من هـنـا
اضغط على عنوان البوست لتظهر التعليقات