- التقييمات: 1
- #1
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
نكمل معكم هذه السلسلة بدرس جديد نشرح فيه دالتين من دوال مكتبة الـjQuery وهذا الدرس متعلق بالدرس السابق فمن فاته الدرس السابق يستطيع زيارة فهرس الدورة عن طريق الرابط التالي:
فهرس سلسلة دروس شرح مكتبة jQuery من تقديم الأستاذ تركي ( shqawe )
بسم الله الرحمان الرحيم و الصلاة و السلام على المظلل بالغمام محمد ابن عبد الله ، عليه أفضل الصلاة و أزكى التسليم. سيشمل هذا الموضوع فهرس لجميع الشروحات الخاصة بـ [ سلسلة دروس شرح مكتبة jQuery ] من إعداد أستاذنا الغالي تركي @shqawe و تحت رعاية زين العربية وذلك لتكون مرجعا شاملا لزوارنا و...
xenarabia.com
بسم الله نبدأ الدرس :
اليوم سوف نتكلم عن دالتين من دوال هذه المكتبة الرائعة:
الدالة الاولى
دالة show : تعمل هذه الدالة على اظهار العناصر المخفية عن طريق احد خواص لغة css مثل خاصية display: none
الدالة الثانية
دالة hide : وتعمل هذه الدالة عكس عمل الدالة السابقة تماما ً فهي تقوم باخفاء اي عنصر في الصفحة:
الدالتين تكتب بنفس الطريقة وطريقة كتابة الدالة تكون كالتالي:
JavaScript:
$(element).show();
كما تلاحظون اولا ً نقوم بتحديد العنصر الذي نريد تطبيق الدالة عليه ومن ثم نكتب الدالة بعد العنصر تماما ً لكي يتم تطبيقها عليه والاقواس التي تلي الدالتين تستخدم لتحديد سرعة ظهور واخفاء العنصر ويتم وضع فيها اما كلمة slow اي بطيء او fast وتعني سريع او يمكن استخدم عدد الثواني ويكون الاستخدام بالميلي ثانية بمعنى ال 1000 ميلي = ثانية
والان لنأخذ مثال لكي تتضح الصورة وسوف نأخذ نفس المثال في الدرس السابق ولكن سوف نقوم ببعض التغييرات
HTML:
<div class="container">
<button class="xenarabia show_div">
اضغط هنا لاظهار المحتوى
</button>
<button class="xenarabia hide_div">
اضغط هنا لاخفاء المحتوى
</button>
<div id="container" style="display: none;">
<h3>
محتوى مخفي
</h3>
</div>
</div>
نشرح الكود قليلا ً للتوضيح اكثر قمنا بوضع زرين احدهمها لاخفاء العنصر ويحمل الكلاس
hide_div
والاخر لاظهاره ويحميل الكلاس show_div
وقمنا بوضع div داخله عبارة
محتوى مخفي
ولاحظو اننا اضفنا لهذا ال div احد خواص css وهي display:none;
وذلك لاخفاء هذا المحتوى وسوف نقوم باظهاره واخفائه عن طريق الدالتين show و hide الان لنقوم بكتابة كود jQuery
JavaScript:
$(function() {
$('.show_div').click(function() {
$('#container').show('slow');
});
$('.hide_div').click(function() {
$('#container').hide('slow');
});
});
قمنا بداية ً بتعريف مكتبة ال jquery ثم بعد ذلك استخدمنا دالة click والذي سبق وشرحناها في الدرس السابق والتي سوف تستمر معنا في كثير من الدروس
ثم قمنا بتعريف العنصر الاول وهو كلاس اظهار المحتوى المخفي show_div وبعدها استخدمنا الدالة show واسندنا لها قيمة slow كما ذكرت سابقا ً
وقمنا بعد ذلك باستخدام نفس الكود ولكن عوضا ً عن استخدام الدالة show استخدمنا hide لاخفاء العنصر بعد بعد اظهاره
ويمكنكم تجربة الكود عبر الرابط التالي:
مثال الدرس
وفي النهاية اتمنى ان اكون قد وفقت في شرح هذا الدرس فان اصبت فهذا من فضل الله وان اخطأت فجل من لايخطأ
احترامي وتقديري
اخوكم
شقاوي
التعديل الأخير: