لغة JavaScript - سلسلة دروس شرح مكتبة jQuery - [ شرح الدالة slideDown والدالة slideUp - معهد زين العربية
موقع كيف افضل موقع للرد على جميع اسئلتك موقع كيف بوابتك للمستقبل
موقع حلبية الموقع الاول في العالم العربي لللمعلومات الصحيحة
تجارتنا منصة تجارية تساهم في تطور التجارة العالمية والاقتصاد

لغة JavaScript سلسلة دروس شرح مكتبة jQuery - [ شرح الدالة slideDown والدالة slideUp

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,580
مستوى التفاعل
2,282
النقاط
113
الإقامة
K.S.A
  • التقييمات: 0
  • #1
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نكمل اليوم ما بدأنها بدرس جديد فمن فاتته الدروس السابقة فيستطيع زيارة فهرس الدورة عن طريق هذا الرابط



بسم الله نبدأ :

درسنا اليوم يتحدث عن دالتين كل دالة عملها عكس الدالة الاخرى

فالدالة الاولى slideDown : عملها ان تقوم باظهار العنصر المخفي بطريقة منزلقة من الأعلى للأسفل

اما الدالة الثانية sideUp : فعملها ان تقوم باخفاء العنصر الظاهر بطريقة منزلقة من الاسفل للاعلى

طريقة كتابة الدالتين واحدة مع تغيير اسم الدالة فقط:


JavaScript:
$(selector).slideDown(num, function(){

    });

    $(selector).slideUp(num, function(){

    });

بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق ب selector

بعد ذلك قمنا بكتاب الدالة وكما تلاحظون الدالتين لهما نفس الطريقة

بعد ذلك تجدون متغير باسم num وهذا المتغير يتم وضع فيه سرعة انزلاق العنصر وكما ذكرت في درس الدالتين hide و show يتم كتابة عدد الثواني بالميلي ثانية 1000 ميلي = ثانية

بعد ذلك قمنا بكتابة function والتي تعتبر callback ومعناها لو احببت تبسيطه بعد انزلاق العنصر مالذي تود عمله

ولنأخذ مثال لكي تتضع الصورة:

لنفرض ان لدينا div بسيط داخله اسم معهدنا الغالي معهد زين العربية

وفوقه زرين الاول لاخفاء div والاخر لأظهاره فسوف يكون الكود بهذا الشكل


HTML:
<div class="container">
                    <button class="xenarabia slidedown_div">
                      اضغط هنا لاظهار المحتوى
                    </button>
                    <button class="xenarabia slideup_div">
                      اضغط هنا لاخفاء المحتوى
                    </button>
                  
                    <div id="container" style="display: none;">
                      <h3>
                        معهد زين العربية
                      </h3>
                    </div>
                </div>


والان سوف نستخدم الدالتين في درسنا هذا لاظهار واخفاء المحتوى اضافة الى ذلك قمت باستخدام ال callback كما سترون الان

JavaScript:
$(function() {
    $('.slidedown_div').click(function() {
        $('#container').slideDown("3000", function() {
            alert('تم اظهار المحتوى');
        });
    });

    $('.slideup_div').click(function() {
        $('#container').slideUp("3000", function() {
            alert('تم اخفاء المحتوى');
        });
    });

});

كما ترون في الكود السابق قمنا اولاً باستخدام الدالة click والتي سبق شرحها في الدروس السابقة

ثم قمنا بتعيين العنصر container للدالة الاولى slideDown لكي يتم اظهاره وبعد اظهارة استخدمنا دالة callback بحيث بعد اظهار العنصر تظهر لنا رسالة بانه تم اظهارة

وقمنا بعمل نفس الطريقة مع الدالة الثانية slideUp ولكن الاختلاف في دالة callback فقد غيرنا الرسالة الى تم اخفاء المحتوى

ولكي تتضح الصورة هذا مثال على الدرس


اضغط هنا للذهاب للمثال

واتمنى ان يكون الدرس واضح واي سؤال او استفسار لا تتردون في طرحه

في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ

وتقبلو احترامي وتقديري
اخوكم
شقاوي
 
التعديل الأخير:

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,258
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
بارك الله فيك اخي تركي على الدرس و الشرح الجميل

لكن المثال لا يعمل
 
التعديل الأخير:

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,580
مستوى التفاعل
2,282
النقاط
113
الإقامة
K.S.A
حياك الله حبيبي محمد

اتمنى التأكد فالرابط يعمل معي بدون مشاكل :unsure:
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,258
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
بالفعل اخي تركي هو يعمل على متصفح كروم لكن موزيلا لا يعمل ربما يحتاج الى ظبط اعدادات حتى تعلم اكواد java
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,580
مستوى التفاعل
2,282
النقاط
113
الإقامة
K.S.A
حبيبي محمد انا لا استخدم الكروم اطلاقا ً فانا استخدم فايربوكس واوبرا

لكن يمكن اعدادات المتصفح لديك في فايرفوكس تحتاج الى تعديل والله اعلم
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,258
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
بالفعل اخي تركي كما قلت يحتاج المصتفح لظبط اعداداته ربما قمت بالغاء احد الخصائص التي لا احتاج اليها فلم يعمل الكود معي.
 

zoolraqey

:: الأعضاء ::
إنضم
25 مايو 2021
المشاركات
5
مستوى التفاعل
0
النقاط
1
جزاك الله خير ع الشرح

لكن ايضا تواجهني مشكلة عدم عمل المثال , انا استخدم فايرفوكس
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,580
مستوى التفاعل
2,282
النقاط
113
الإقامة
K.S.A
اللهم امين واياك اخوي @zoolraqey

وتم تعديل روابط الدروس كاملا والمعذرة على هذا الخطأ

احترامي وتقديري
اخوك
شقاوي
 

zoolraqey

:: الأعضاء ::
إنضم
25 مايو 2021
المشاركات
5
مستوى التفاعل
0
النقاط
1
اللهم امين واياك اخوي @zoolraqey

وتم تعديل روابط الدروس كاملا والمعذرة على هذا الخطأ

احترامي وتقديري
اخوك
شقاوي

جل من لا يخطئ

الان يعمل بشكل ممتاز :love:
بارك الله فيك وفي وألديك

متابع إنشاء الله وفي إنتظار المزيد من خبراتك
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

إحصائيات المنتدى

المواضيع
1,649
المشاركات
17,820
الأعضاء
631
آخر عضو مسجل
almstqbl
أعلى