في التمرين السابق،
رأينا كيف يمكننا الاستفادة من
عناصر التحكم المستندة إلى جافا سكريبت التي يتم توفيرها
لمكونات جافا سكريبت Bootstrap
من أجل التحكم في سلوك المكونات. على
وجه الخصوص، رأينا استخدام دائري
وكيف كنا قادرين على إدخال
اثنين من الأزرار للسيطرة
على سلوك ركوب الدراجات من دائري.
الآن، أنا لست راضيا تماما عن هذا التنفيذ.
أود الآن أن تنهار كل شيء
في زر واحد واحد يمكن أن
يشير إلى السلوك الحالي
للدائري وأيضا أن تكون قادرة على السيطرة على دائري.
لذلك دعونا نرى كيف يمكننا الاستفادة من
مزيد من رمز jQuery من
أجل تحقيق ذلك، في هذا التمرين.
لتحقيق ذلك، سنعود إلى التعليمات البرمجية
في index.html حيث حددنا الزرين.
سأقوم الآن بإزالة هذا div
لمجموعة الأزرار لأننا سيكون لدينا
زر واحد فقط بدلاً من زرين.
لذلك قمت بإزالة div حول الزرين.
أنا أيضا ذاهب لحذف واحد من الأزرار،
لأننا ذاهبون للعمل مع
زر واحد فقط لهذا التمرين.
لذلك اسمحوا لي أن أغير المسافة البادئة.
حتى الآن، هذا الزر الخاص الذي لدينا هناك،
وأنا ذاهب لإعادة تسمية هذا الزر كما CarouselButton.
سنبدأ مع هذا الزر
كونه زر مع رمز الإيقاف المؤقت.
نحن ذاهبون إلى الوجه رمز
لهذا الزر من خلال شفرة جافا سكريبت.
إذن كيف نفعل ذلك؟
إلقاء نظرة على صفحة الويب الخاصة بنا،
سنرى الآن أن لدينا زر واحد هنا،
والذي يشير حاليًا إلى التوقف هناك.
الآن، أملي في نهاية هذا التمرين
هو تحويل هذا الزر إلى
عنصر تحكم واحد حيث إذا ضغطت على هذا الزر،
فإنه سيتم إيقاف السلوك الدوري للدائري،
ومن ثم تحويل
هذا الزر في نفس الوقت إلى زر تشغيل،
وهذا يعني أنه
سيتم استبدال هذا الرمز مع رمز التشغيل.
حتى أن هذا الزر واحد يشير
إلى ما هي الحالة الحالية
للسلوك الدوري من بلدي دائري هو. كيف نفعل ذلك؟
نحن بحاجة للذهاب وتحرير
شفرة جافا سكريبت من أجل تحقيق ذلك.
الانتقال إلى شفرة جافا سكريبت
في الجزء السفلي من صفحة index.html.
لذا هنا، كان لدينا هذا السيناريو الذي قمنا
بتضمينه في وقت سابق من
أجل تفعيل الزرين هناك.
سأقوم بتحرير هذا الرمز
للاستفادة من هذا الزر المفرد الذي لدينا هناك.
حتى يأتي إلى هنا،
وأنا ذاهب لإزالة
هذا الجزء الثاني لأن
لدينا فقط زر واحد واحد الآن هنا،
وهو كاروسيلبوتون،
وعندما يتم النقر على ذلك،
تحتاج إلى القيام بشيء ردا على القيام بذلك.
حتى إذا تم
النقر على زر دائري، ثم ماذا تفعل؟
الآن، لحسن الحظ، اعتمادا
على ما إذا كان الزر هو زر تشغيل أو زر وقفة،
ونحن سوف تكون قادرة على اتخاذ الإجراء المناسب.
ولكن كيف نعرف ما إذا كان
زر التشغيل أو زر وقفة؟
لذلك هذا هو المكان الذي سنستخدم فيه
بعض رموز jQuery من أجل
تحديد ما إذا كان هذا زر التشغيل أو زر الإيقاف المؤقت.
لمساعدتنا على تحديد هذا،
سنذهب إلى الداخل هنا ثم نستخدم بيان if،
وداخل هناك، سأقوم باختبار
لمعرفة ما إذا كان هذا هو زر اللعب أو الإيقاف المؤقت.
حتى هنا أقول،
كاروسيلبوتون. الأطفال تمتد.
وهذا يعني أنه،
لهذا الزر دائري،
داخل حيث إذا كان هناك عنصر مع علامة الامتداد،
لذلك نحن نعرف بوضوح أنه في زر دائري لدينا،
كان لدينا علامة الامتداد التي
تحتوي على رمز الخط رهيبة هناك.
لذلك بالنسبة لعلامة الامتداد هذه،
سنقوم بفحص HasClass.
لذلك نحن ذاهبون للتحقق من هذا HasClass،
ومن ثم الصف الذي سنقوم
بالتحقق منه هو fa-pause.
مما يعني أنه
إذا كانت علامة الامتداد تحتوي على فئة fa-pause،
فإننا نعلم أن هذا الزر
يعمل حاليًا كزر الإيقاف المؤقت.
لذلك من الواضح، عندما يتم النقر
على الزر، يتوقع المستخدم أن
يتم إيقاف السلوك الدوري مؤقتًا.
إذن هذا ما نعرفه هنا
لذلك ترى الآن أننا نكتب
بعض التعليمات البرمجية جافا سكريبت أكثر تقدما باستخدام
بناء جملة مسج من أجل جعل هذا العمل بشكل صحيح.
لذا بالداخل هنا، فماذا علي أن أفعل؟
الآن، مما يعني أنه إذا كان الزر
حاليًا زر إيقاف مؤقت
، فمن الواضح عند النقر على الزر،
فأنت تريد إيقاف دائري مؤقتًا.
ثم، بالإضافة إلى ذلك، نريد الآن أن نكون قادرين على قلب
هذا الرمز من رمز الإيقاف المؤقت إلى رمز التشغيل.
لذلك ما سنفعله هو،
سوف نقول هناك الحق بعد هذا،
ونحن سوف نقول $ Carouselbutton. الأطفال تمتد،
وبعد ذلك سوف نقول، ريموفيكلاس.
لذلك نحن ذاهبون لإزالة فئة وقفة.
لذلك لاحظ كيف يعمل هذا.
سنقوم بإزالة فئة الإيقاف المؤقت من ذلك،
وبعد ذلك، سنقوم بإضافة PlayClass.
وبهذه الطريقة
سيتم الآن قلب رمز الزر الخاص بك من زر إيقاف مؤقت إلى زر تشغيل.
لذلك نحن ذاهبون لإزالة بوسيكلاس.
سأقوم فقط بنسخ هذا الرمز
ثم لصقه
هناك ثم قم بإجراء التعديل على هذا الرمز.
نفس الشيء، ل CarouselButton للأطفال تمتد،
وأنا ذاهب إلى بدلا من ريموفيكلاس،
وأود أن أقول أدكلاس، ومن ثم فا اللعب.
وبهذه الطريقة، ما نقوم به هو،
نحن نقلب هذا الزر
من زر إيقاف مؤقت إلى زر تشغيل.
أيضا، نحن نتوقف
عن سلوك ركوب الدراجات من دائري.
الآن، إذا لم يكن هذا هو الحال ثم،
يجب أن يكون زر التشغيل بحيث
ينبغي إدخال التأثير المعاكسي.
ثم، سأقوم ببساطة بنسخ هذا الرمز،
ثم قم بإجراء اختبارات أخرى للحالة التي
يكون فيها الزر هو PlayButton.
لذلك أود أن أقول، الآن من الواضح،
أنا لست بحاجة إلى هذا إذا كان هنا ولكن فقط لأكون متأكدا مضاعفة،
وأنا ذاهب لوضع ذلك في هناك.
لأن هناك اثنين فقط من الاحتمالات,
إما انها زر وقفة أو زر التشغيل,
ولكن فقط لطمأنة بلدي,
أنا ذاهب لوضع ذلك باعتباره فا اللعب هناك.
الآن داخل هناك، وأنا ذاهب لتغيير
هذا من وقفة إلى دورة.
لأنه من التمرين السابق،
تتذكر أنه إذا كنت ترغب
في استئناف سلوك ركوب الدراجات،
سيكون لديك لتعيين عمل دائري لتكون دورة.
ثم وبالمثل، بالنسبة للبيانين المتبقيين،
سأقوم بإزالة PlayClass
ثم قم بإضافة PauseClass.
لذا لاحظ كيف نستخدم القليل من
شفرة jQuery المتقدمة
لتكون قادرة على تغيير رمز الأزرار ديناميكيًا،
وفي الوقت نفسه،
تحفيز سلوك ركوب الدراجات المناسب على دائري لدينا.
إلقاء نظرة على صفحة الويب لدينا،
ترى الآن أن بلدي دائري هو ركوب الدراجات،
وترى أن هذا الزر هو حاليا زر وقفة.
عندما أنقر على هذا الزر،
لاحظ كيف يتغير من وقفة إلى زر تشغيل هناك،
ثم في وقت واحد،
يتم إيقاف سلوك بلدي ركوب الدراجات من دائري.
حتى في هذه المرحلة،
بلدي دائري سوف تبقى مؤقتا في
ذلك الموقع حتى أنقر على زر.
حتى الآن، إذا قمت بالنقر فوق هذا الزر مرة أخرى،
لاحظ التغيير من زر التشغيل إلى زر وقفة،
ومن ثم
سيتم استئناف سلوك ركوب الدراجات من دائري على الفور.
لذلك باستخدام زر واحد الآن،
وأنا قادرة على السيطرة
على كل من سلوك دائري وأيضا في وقت واحد،
وعرض الحالة الحالية
لسلوك ركوب الدراجات دائري بلدي.
إذا كان هذا هو زر وقفة،
وهذا يعني أن بلدي دائري هو ركوب الدراجات حاليا.
إذا كان هذا هو زر التشغيل،
ثم يتم إيقاف دائري بلدي.
لذلك لاستئناف ذلك،
سيكون لدي للنقر على الزر.
لذلك هذا هو تغيير إضافي واحد
يمكنك القيام به لممارسة.
حتى الآن، ترى كيف في شفرتنا
استخدمنا طريقة HasClass،
ورأينا أيضًا استخدام أساليب
RemoveClass و addClass،
طرق jQuery التي قمنا بتطبيقها
من أجل التعامل مع DOM
لتعكس السلوك
ذي الصلة في هذه الحالة بالذات.
مع هذا، نكمل هذا التمرين.
حان الوقت بالنسبة لك للقيام جيت الالتزام مع
الرسالة أكثر بوتستراب و مسج.