[
MUSIC] توفر لنا العديد من المكونات المستندة
إلى جافا سكريبت Bootstrap آلية للتحكم في بعض ميزات هذه المكونات عن طريق كتابة شفرة جافا سكريبت، على
وجه الخصوص، عن طريق كتابة التعليمات البرمجية باستخدام بناء جملة jQuery.
لذلك نحن ذاهبون لاستكشاف هذا التمرين الفهرس باستخدام بعض
عناصر التحكم المستندة إلى جافا سكريبت لدينا Carousel التي قمنا
بتضمينها في صفحة index.html في التمرين السابق.
في التمرين السابق، قدمنا هذا دائري في صفحة index.html الخاصة بنا.
ما أود القيام به في هذا التمرين هو إدخال اثنين من
أزرار التحكم في هذا Carousel،
ومن ثم استخدام JavaScript لتكون قادرة على تنشيط هذه الأزرار.
سيتم استخدام الأزرار لوقفة
ولعب العمل انزلاق من هذا دائري.
لذلك، بما في ذلك الزر في كاروسيل
لدينا هنا، يمكننا النقر فوق زر لوقف انزلاق العمل من دائري،
وبعد ذلك يمكننا النقر فوق زر آخر لاستئناف انزلاق العمل من دائري.
لذلك، هذا ما يمكننا استكشافه في هذا التمرين.
للبدء في هذا التمرين، سنذهب إلى صفحة index.html.
والحق بعد الضوابط اليسرى واليمنى من كاروسيل لدينا،
وسوف أعرض ديف مع مجموعة زر الطبقة.
لذلك هذا سوف أرفق مجموعة زر من اثنين من الأزرار هنا، ثم مع معرف من،
كاروسيلبوتون
وإغلاق ديف هناك.
الآن، داخل هذا، أنا ذاهب لإضافة في اثنين من الأزرار.
لذلك اسمحوا لي أن أضيف في زر واحد مع الطبقة BTN،
btn-darging،
btn-small، ومعرف من وقفة دائري.
لذلك هذا سيكون بمثابة زر وقفة، يبطئ زر هناك.
ولهذا الزر، أنا ذاهب لإدخال
الخط كرمز مع كرة القدم فئة,
وقفة, وإغلاق فترة.
لذلك هذا سوف يقدم زر وقفة في مجموعة من أزرار كاروسيل.
سأقوم بنسخ هذا ولصقه مرة أخرى لإنشاء زر آخر.
هذا الزر الثاني، سأتصل BTN btn-darging btn-sm،
وبعد ذلك سيكون هذا لعب دائري.
وفئة الامتداد،
سيكون الزر إذا كان يلعب هنا.
لنفترض التغييرات وانتقل ونلقي نظرة سريعة على ذلك في صفحة الويب.
إلقاء نظرة على الأزرار كما هي موجودة في متصفحنا، يمكنك أن ترى أن
هذين الزرين يتم وضعهما الآن إلى الزاوية اليسرى من بلدي كاروسيل.
أود إعادة وضع هذه الأزرار إلى الحافة اليمنى،
بحيث لا يسبب هذه المساحة الزرقاء الفارغة أسفل الصورة هنا.
لذلك اسمحوا لي أن استخدم اثنين من خصائص CSS لإعادة وضع هذه الأزرار إلى
العمود الأيمن من Carousel.
الذهاب إلى هذا النمط بداية ملف CSS،
اسمحوا لي أن أعرض بعض التعليمات البرمجية CSS هنا.
لذلك بالنسبة للعنصر مع معرف CarouselButton،
أنا وضعه على الحافة اليمنى والقاع، 0 بكسل هنا.
لذلك هذين وبعد ذلك الموقف هو مطلق.
لذلك هذا سيضع هذه الأزرار في الزاوية اليمنى من بلدي كاروسيل.
من الواضح، فقط إدخال الأزرار في Carousel لن يخدم
أي غرض.
الآن، سنقوم بالاستفادة من عناصر تحكم جافا سكريبت التي
يوفرها Carousel عن طريق كتابة القليل من رمز jQuery في
الجزء السفلي من صفحة index.html لجعل هذه الأزرار تقوم بعملها.
نريد أن نكون قادرين على التوقف واستئناف العمل انزلاق بلدي كاروسيل.
الذهاب إلى الجزء السفلي من صفحة index.html، اسمحوا لي أن أعرض بعض البرامج النصية هنا.
لذلك يجب أن يحتوي هذا البرنامج النصي على بعض
شفرة جافا سكريبت مكتوبة في بناء جملة jQuery
لذلك أنا ذاهب إلى القول،
$ (وثيقة). ready (وظيفة)،
ويجب أن تحتوي هذه الوظيفة على اثنين من
الوظائف هنا لتنشيط الأزرار.
لذا أود أن أقول يا (ميكاروسيل)
هذا هو معرف دائري التي يتم تقديمنا،
لذلك نود أن نقول، دائري،
الفاصل الزمني: 2000.
لذا ما يفعله هذا هو أنه يحدد الفاصل الزمني للانزلاق من دائري
إلى 2000 ميلي ثانية أو ثانيتين.
لذلك أنا جعله أسرع قليلا
للعمل انزلاق أن يحدث في كاروسيل.
استمر في رمز jQuery هنا.
سأقوم الآن بتنشيط زر الإيقاف المؤقت هذا، لذا سأقول إيقاف مؤقت دائري.
لذلك هذا هو المعرف الذي أعطيته لزر الإيقاف المؤقت هناك.
لذلك هذا هو السبب في إعطاء الهوية،
لذلك أريد تفعيل زر الإيقاف المؤقت.
لذلك أقول عندما ينقر المستخدم.
حتى تتمكن من رؤية كيفية قراءة بناء الجملة.
لذلك هذا يقول، للزر دائري وقفة،
إذا تم إجراء نقرة من قبل المستخدم، ثم تنفيذ
هذه الوظيفة المعينة التي أحدها داخل هذا الرمز هنا.
ما هي الوظيفة التي أريد القيام بها؟
أريد أن أكون قادرة على ذلك،
وقفة دائري.
لذلك نود أن نقول، دائري ('وقفة').
حتى الآن ترى كيف استخدمت عناصر التحكم المستندة إلى jQuery.
عناصر تحكم جافا سكريبت التي تعطى لمكون Bootstrap Carousel
وكتب بعض التعليمات البرمجية لتكون قادرة على السيطرة على دائري.
وبالمثل، أريد أن أكون قادرا على تفعيل زر التشغيل.
لذلك عندما يتم النقر على زر التشغيل،
أريد أن يستأنف العمل المنزلق للدائري.
لذلك سأقوم ببساطة بنسخ هذا الرمز، ولصقه هناك.
ثم أود أن أقول دائري اللعب،
انقر فوق وظيفة بلدي دائري ثم وظيفة تقول دائري («دورة»).
هذه هي الطريقة التي تحدد أن كاروسيل
يجب أن تستأنف الانزلاق كما كان من قبل.
لذلك هذا واحد، هذه الوظيفة نحن نعلق على زر التشغيل هنا.
لذلك مع هذين،
تم تقديم وظيفتنا داخل هذه الوثيقة جاهزة الوظيفة.
جميعكم جاهزون لتنشيط (كاروسيل)
و الزرين ليتمكنوا من التحكم في سلوك (كاروسيل)
لذلك دعونا نعرض التغييرات، ونذهب ونلقي نظرة على سلوك كاروسيل لدينا.
الذهاب إلى صفحتنا، ترى الآن أن كاروسيل الخاص بك يتحرك بسرعة كبيرة،
لأنني وضعت الفاصل الزمني إلى 2،000 ميلي ثانية أو 2 ثانية.
لذلك كل ثانيتين، سترى الحركة المنزلقة من كاروسيل.
هذا مزعج بالتأكيد
لذلك اسمحوا لي أن وقفة ذلك عن طريق النقر على زر وقفة.
لذلك عند النقر على زر الإيقاف المؤقت، يتم إيقاف العمل المنزلق الخاص بك Carousel مؤقتًا.
لأنه عند النقر على زر الإيقاف المؤقت، فإن الوظيفة التي
قدمناها في شفرة جافا سكريبت تدخل حيز التنفيذ
ثم توقف حركة دائري مؤقتًا.
الآن، إذا كنت ترغب في استئناف، انقر على زر التشغيل ومن
ثم دائري يجب استئناف حركته.
حتى كما ترون، لحظة النقر على زر التشغيل، دائري يبدأ التحرك.
الآن، بالطبع، يمكنك تحسين أكثر حول كيفية إنشاء هذه الأزرار وهلم جرا،
ولكن هذه طريقة بسيطة يمكننا أن نقدم للسيطرة على كاروسيل لدينا.
يوضح لك هذا التمرين كيف يمكننا استخدام شفرة جافا سكريبت
لتكون قادرة على التحكم في المكونات المستندة إلى Bootstrap جافا سكريبت.
هذا هو الوقت المناسب للقيام بتعليق من
التعليمات البرمجية الخاصة بك مع الرسالة Bootstrap jQuery.
[ موسيقى]