- التقييمات: 0
- #1
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
نكمل اليوم ما بدأنها بدرس جديد فمن فاتته الدروس السابقة فيستطيع زيارة فهرس الدورة عن طريق هذا الرابط
بسم الله نبدأ:
درسنا اليوم يتحدث عن دالة change
وعمل هذه الدالة هي انها تقوم بعرض حدث ما عند تغيير حالة العنصر واكثر عملها على النماذج والحقول
طريقة كتابة الدالة بهذا الشكل:
بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق بــ element
ومن ثم نقوم بادراج الاحداث التي نريد عملها داخل اقواس الدالة
لنأخذ مثال لكي تتضح الصورة اكثر ونبسطها بشكل اكبر
فلنفرض ان لدينا نموذج تسجيل اعضاء ويحمل هذا النموذج حقلين اختيار من نوع checkbox تشير الى حالة العضو العائلية
الخيار الاول: اعزب
الخيار الثاني: متزوج
ونريد عندما يقوم العضو باختيار الخيار متزوج ان تظهر له رسالة تسأله عن عدد الابناء وعند اختياره الخيار أعزب تختفي هذه الرسالة
سوف يكون كود html بهذا الشكل
وكود ال jquery بهذا الشكل
لنشرح الكود قمنا اولا ً باسناد العنصر الخاص بخيار المتزوج الى الدالة
ثم قمنا باستخدام دالة
ومن ثم قمنا باستخدام الدالة مرة أخرى بنفس الطريقة لاخفاء الرسالة عند اختيار الخيار أعزب وكما تلاحظون قمنا هنا باستخدام الدالة
ولرؤية مثال يمكنكم زيارة هذا الرابط
اضغط هنا للذهاب للمثال
وفي النهاية اتمنى ان يكون الدرس واضح واي استفسار حاضرين للغالين
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
نكمل اليوم ما بدأنها بدرس جديد فمن فاتته الدروس السابقة فيستطيع زيارة فهرس الدورة عن طريق هذا الرابط
فهرس سلسلة دروس شرح مكتبة jQuery من تقديم الأستاذ تركي ( shqawe )
بسم الله الرحمان الرحيم و الصلاة و السلام على المظلل بالغمام محمد ابن عبد الله ، عليه أفضل الصلاة و أزكى التسليم. سيشمل هذا الموضوع فهرس لجميع الشروحات الخاصة بـ [ سلسلة دروس شرح مكتبة jQuery ] من إعداد أستاذنا الغالي تركي @shqawe و تحت رعاية زين العربية وذلك لتكون مرجعا شاملا لزوارنا و...
xenarabia.com
بسم الله نبدأ:
درسنا اليوم يتحدث عن دالة change
وعمل هذه الدالة هي انها تقوم بعرض حدث ما عند تغيير حالة العنصر واكثر عملها على النماذج والحقول
طريقة كتابة الدالة بهذا الشكل:
JavaScript:
$(element).change(function() {
});
بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق بــ element
ومن ثم نقوم بادراج الاحداث التي نريد عملها داخل اقواس الدالة
لنأخذ مثال لكي تتضح الصورة اكثر ونبسطها بشكل اكبر
فلنفرض ان لدينا نموذج تسجيل اعضاء ويحمل هذا النموذج حقلين اختيار من نوع checkbox تشير الى حالة العضو العائلية
الخيار الاول: اعزب
الخيار الثاني: متزوج
ونريد عندما يقوم العضو باختيار الخيار متزوج ان تظهر له رسالة تسأله عن عدد الابناء وعند اختياره الخيار أعزب تختفي هذه الرسالة
سوف يكون كود html بهذا الشكل
HTML:
<label class="btn btn-primary ">
متزوج
<input type="radio" name="show_change_msg" id="show_change_msg" >
</label>
<label class="btn btn-primary active">
أعزب
<input type="radio" name="show_change_msg" id="hide_change_msg" >
</label>
<div id="container" style="display: none;">
<h3>
كم عدد الابناء
</h3>
</div>
وكود ال jquery بهذا الشكل
JavaScript:
$(function() {
$('#show_change_msg').change(function() {
$('#container').slideDown("3000");
});
$('#hide_change_msg').change(function() {
$('#container').hide("3000");
});
});
لنشرح الكود قمنا اولا ً باسناد العنصر الخاص بخيار المتزوج الى الدالة
change
والذي يحمل اسم show_change_msg
ثم قمنا باستخدام دالة
slideDown
والتي قمنا بشرحها في الدروس السابقة لكي تقوم باظهار رسالة كم عدد الابناء ومن ثم قمنا باستخدام الدالة مرة أخرى بنفس الطريقة لاخفاء الرسالة عند اختيار الخيار أعزب وكما تلاحظون قمنا هنا باستخدام الدالة
hide
والتي سبق شرحها في الدروس السابقة ولرؤية مثال يمكنكم زيارة هذا الرابط
اضغط هنا للذهاب للمثال
وفي النهاية اتمنى ان يكون الدرس واضح واي استفسار حاضرين للغالين
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي
التعديل الأخير: