1
00:00:00,000 --> 00:00:04,523
[

2
00:00:04,523 --> 00:00:10,934
MUSIC] توفر لنا العديد من المكونات المستندة

3
00:00:10,934 --> 00:00:17,070
إلى جافا سكريبت Bootstrap آلية للتحكم في بعض ميزات هذه المكونات عن طريق كتابة شفرة جافا سكريبت، على

4
00:00:17,070 --> 00:00:21,510
وجه الخصوص، عن طريق كتابة التعليمات البرمجية باستخدام بناء جملة jQuery.

5
00:00:21,510 --> 00:00:26,181
لذلك نحن ذاهبون لاستكشاف هذا التمرين الفهرس باستخدام بعض

6
00:00:26,181 --> 00:00:30,561
عناصر التحكم المستندة إلى جافا سكريبت لدينا Carousel التي قمنا

7
00:00:30,561 --> 00:00:35,537
بتضمينها في صفحة index.html في التمرين السابق.

8
00:00:37,171 --> 00:00:42,810
في التمرين السابق، قدمنا هذا دائري في صفحة index.html الخاصة بنا.

9
00:00:42,810 --> 00:00:47,260
ما أود القيام به في هذا التمرين هو إدخال اثنين من

10
00:00:47,260 --> 00:00:50,240
أزرار التحكم في هذا Carousel،

11
00:00:50,240 --> 00:00:54,920
ومن ثم استخدام JavaScript لتكون قادرة على تنشيط هذه الأزرار.

12
00:00:54,920 --> 00:00:57,850
سيتم استخدام الأزرار لوقفة

13
00:00:57,850 --> 00:01:03,350
ولعب العمل انزلاق من هذا دائري.

14
00:01:03,350 --> 00:01:08,410
لذلك، بما في ذلك الزر في كاروسيل

15
00:01:08,410 --> 00:01:13,000
لدينا هنا، يمكننا النقر فوق زر لوقف انزلاق العمل من دائري،

16
00:01:13,000 --> 00:01:18,070
وبعد ذلك يمكننا النقر فوق زر آخر لاستئناف انزلاق العمل من دائري.

17
00:01:18,070 --> 00:01:21,390
لذلك، هذا ما يمكننا استكشافه في هذا التمرين.

18
00:01:22,520 --> 00:01:26,920
للبدء في هذا التمرين، سنذهب إلى صفحة index.html.

19
00:01:26,920 --> 00:01:32,420
والحق بعد الضوابط اليسرى واليمنى من كاروسيل لدينا،

20
00:01:32,420 --> 00:01:40,400
وسوف أعرض ديف مع مجموعة زر الطبقة.

21
00:01:40,400 --> 00:01:47,023
لذلك هذا سوف أرفق مجموعة زر من اثنين من الأزرار هنا، ثم مع معرف من،

22
00:01:50,699 --> 00:01:54,224
كاروسيلبوتون

23
00:01:54,224 --> 00:01:59,290
وإغلاق ديف هناك.

24
00:01:59,290 --> 00:02:03,530
الآن، داخل هذا، أنا ذاهب لإضافة في اثنين من الأزرار.

25
00:02:03,530 --> 00:02:12,385
لذلك اسمحوا لي أن أضيف في زر واحد مع الطبقة BTN،

26
00:02:12,385 --> 00:02:16,910
btn-darging،

27
00:02:16,910 --> 00:02:24,030
btn-small، ومعرف من وقفة دائري.

28
00:02:24,030 --> 00:02:30,970
لذلك هذا سيكون بمثابة زر وقفة، يبطئ زر هناك.

29
00:02:30,970 --> 00:02:36,600
ولهذا الزر، أنا ذاهب لإدخال

30
00:02:36,600 --> 00:02:41,201
الخط كرمز مع كرة القدم فئة,

31
00:02:42,923 --> 00:02:49,410
وقفة, وإغلاق فترة.

32
00:02:49,410 --> 00:02:55,790
لذلك هذا سوف يقدم زر وقفة في مجموعة من أزرار كاروسيل.

33
00:02:55,790 --> 00:03:04,450
سأقوم بنسخ هذا ولصقه مرة أخرى لإنشاء زر آخر.

34
00:03:04,450 --> 00:03:09,368
هذا الزر الثاني، سأتصل BTN btn-darging btn-sm،

35
00:03:09,368 --> 00:03:12,259
وبعد ذلك سيكون هذا لعب دائري.

36
00:03:13,300 --> 00:03:17,580
وفئة الامتداد،

37
00:03:17,580 --> 00:03:21,660
سيكون الزر إذا كان يلعب هنا.

38
00:03:23,940 --> 00:03:27,965
لنفترض التغييرات وانتقل ونلقي نظرة سريعة على ذلك في صفحة الويب.

39
00:03:29,180 --> 00:03:34,850
إلقاء نظرة على الأزرار كما هي موجودة في متصفحنا، يمكنك أن ترى أن

40
00:03:34,850 --> 00:03:39,940
هذين الزرين يتم وضعهما الآن إلى الزاوية اليسرى من بلدي كاروسيل.

41
00:03:40,970 --> 00:03:44,660
أود إعادة وضع هذه الأزرار إلى الحافة اليمنى،

42
00:03:44,660 --> 00:03:51,700
بحيث لا يسبب هذه المساحة الزرقاء الفارغة أسفل الصورة هنا.

43
00:03:51,700 --> 00:03:56,410
لذلك اسمحوا لي أن استخدم اثنين من خصائص CSS لإعادة وضع هذه الأزرار إلى

44
00:03:56,410 --> 00:03:59,230
العمود الأيمن من Carousel.

45
00:04:00,760 --> 00:04:04,140
الذهاب إلى هذا النمط بداية ملف CSS،

46
00:04:04,140 --> 00:04:08,440
اسمحوا لي أن أعرض بعض التعليمات البرمجية CSS هنا.

47
00:04:08,440 --> 00:04:14,166
لذلك بالنسبة للعنصر مع معرف CarouselButton،

48
00:04:14,166 --> 00:04:18,880
أنا وضعه على الحافة اليمنى والقاع، 0 بكسل هنا.

49
00:04:18,880 --> 00:04:22,280
لذلك هذين وبعد ذلك الموقف هو مطلق.

50
00:04:22,280 --> 00:04:28,300
لذلك هذا سيضع هذه الأزرار في الزاوية اليمنى من بلدي كاروسيل.

51
00:04:29,710 --> 00:04:34,280
من الواضح، فقط إدخال الأزرار في Carousel لن يخدم

52
00:04:34,280 --> 00:04:35,420
أي غرض.

53
00:04:35,420 --> 00:04:40,330
الآن، سنقوم بالاستفادة من عناصر تحكم جافا سكريبت التي

54
00:04:40,330 --> 00:04:46,310
يوفرها Carousel عن طريق كتابة القليل من رمز jQuery في

55
00:04:46,310 --> 00:04:52,204
الجزء السفلي من صفحة index.html لجعل هذه الأزرار تقوم بعملها.

56
00:04:52,204 --> 00:04:57,950
نريد أن نكون قادرين على التوقف واستئناف العمل انزلاق بلدي كاروسيل.

57
00:04:58,970 --> 00:05:06,830
الذهاب إلى الجزء السفلي من صفحة index.html، اسمحوا لي أن أعرض بعض البرامج النصية هنا.

58
00:05:06,830 --> 00:05:10,980
لذلك يجب أن يحتوي هذا البرنامج النصي على بعض

59
00:05:10,980 --> 00:05:15,750
شفرة جافا سكريبت مكتوبة في بناء جملة jQuery

60
00:05:15,750 --> 00:05:19,088
لذلك أنا ذاهب إلى القول،

61
00:05:19,088 --> 00:05:28,664
$ (وثيقة). ready (وظيفة)،

62
00:05:28,664 --> 00:05:33,814
ويجب أن تحتوي هذه الوظيفة على اثنين من

63
00:05:33,814 --> 00:05:39,320
الوظائف هنا لتنشيط الأزرار.

64
00:05:39,320 --> 00:05:45,430
لذا أود أن أقول يا (ميكاروسيل)

65
00:05:45,430 --> 00:05:50,427
هذا هو معرف دائري التي يتم تقديمنا،

66
00:05:50,427 --> 00:05:53,099
لذلك نود أن نقول، دائري،

67
00:05:56,960 --> 00:06:01,804
الفاصل الزمني: 2000.

68
00:06:01,804 --> 00:06:06,720
لذا ما يفعله هذا هو أنه يحدد الفاصل الزمني للانزلاق من دائري

69
00:06:06,720 --> 00:06:10,130
إلى 2000 ميلي ثانية أو ثانيتين.

70
00:06:10,130 --> 00:06:12,890
لذلك أنا جعله أسرع قليلا

71
00:06:12,890 --> 00:06:16,330
للعمل انزلاق أن يحدث في كاروسيل.

72
00:06:16,330 --> 00:06:20,430
استمر في رمز jQuery هنا.

73
00:06:20,430 --> 00:06:26,835
سأقوم الآن بتنشيط زر الإيقاف المؤقت هذا، لذا سأقول إيقاف مؤقت دائري.

74
00:06:26,835 --> 00:06:31,430
لذلك هذا هو المعرف الذي أعطيته لزر الإيقاف المؤقت هناك.

75
00:06:31,430 --> 00:06:34,960
لذلك هذا هو السبب في إعطاء الهوية،

76
00:06:34,960 --> 00:06:38,720
لذلك أريد تفعيل زر الإيقاف المؤقت.

77
00:06:38,720 --> 00:06:40,980
لذلك أقول عندما ينقر المستخدم.

78
00:06:40,980 --> 00:06:42,920
حتى تتمكن من رؤية كيفية قراءة بناء الجملة.

79
00:06:42,920 --> 00:06:47,470
لذلك هذا يقول، للزر دائري وقفة،

80
00:06:47,470 --> 00:06:53,510
إذا تم إجراء نقرة من قبل المستخدم، ثم تنفيذ

81
00:06:53,510 --> 00:07:01,000
هذه الوظيفة المعينة التي أحدها داخل هذا الرمز هنا.

82
00:07:01,000 --> 00:07:03,140
ما هي الوظيفة التي أريد القيام بها؟

83
00:07:03,140 --> 00:07:05,324
أريد أن أكون قادرة على ذلك،

84
00:07:09,144 --> 00:07:15,200
وقفة دائري.

85
00:07:15,200 --> 00:07:20,665
لذلك نود أن نقول، دائري ('وقفة').

86
00:07:21,860 --> 00:07:29,884
حتى الآن ترى كيف استخدمت عناصر التحكم المستندة إلى jQuery.

87
00:07:29,884 --> 00:07:36,020
عناصر تحكم جافا سكريبت التي تعطى لمكون Bootstrap Carousel

88
00:07:36,020 --> 00:07:41,611
وكتب بعض التعليمات البرمجية لتكون قادرة على السيطرة على دائري.

89
00:07:41,611 --> 00:07:46,060
وبالمثل، أريد أن أكون قادرا على تفعيل زر التشغيل.

90
00:07:46,060 --> 00:07:48,410
لذلك عندما يتم النقر على زر التشغيل،

91
00:07:48,410 --> 00:07:52,380
أريد أن يستأنف العمل المنزلق للدائري.

92
00:07:52,380 --> 00:07:56,950
لذلك سأقوم ببساطة بنسخ هذا الرمز، ولصقه هناك.

93
00:07:56,950 --> 00:08:00,720
ثم أود أن أقول دائري اللعب،

94
00:08:00,720 --> 00:08:07,130
انقر فوق وظيفة بلدي دائري ثم وظيفة تقول دائري («دورة»).

95
00:08:07,130 --> 00:08:12,477
هذه هي الطريقة التي تحدد أن كاروسيل

96
00:08:12,477 --> 00:08:16,850
يجب أن تستأنف الانزلاق كما كان من قبل.

97
00:08:16,850 --> 00:08:21,620
لذلك هذا واحد، هذه الوظيفة نحن نعلق على زر التشغيل هنا.

98
00:08:21,620 --> 00:08:23,380
لذلك مع هذين،

99
00:08:23,380 --> 00:08:28,800
تم تقديم وظيفتنا داخل هذه الوثيقة جاهزة الوظيفة.

100
00:08:28,800 --> 00:08:33,870
جميعكم جاهزون لتنشيط (كاروسيل)

101
00:08:33,870 --> 00:08:38,690
و الزرين ليتمكنوا من التحكم في سلوك (كاروسيل)

102
00:08:38,690 --> 00:08:43,240
لذلك دعونا نعرض التغييرات، ونذهب ونلقي نظرة على سلوك كاروسيل لدينا.

103
00:08:44,570 --> 00:08:50,084
الذهاب إلى صفحتنا، ترى الآن أن كاروسيل الخاص بك يتحرك بسرعة كبيرة،

104
00:08:50,084 --> 00:08:55,603
لأنني وضعت الفاصل الزمني إلى 2،000 ميلي ثانية أو 2 ثانية.

105
00:08:55,603 --> 00:08:59,640
لذلك كل ثانيتين، سترى الحركة المنزلقة من كاروسيل.

106
00:08:59,640 --> 00:09:01,380
هذا مزعج بالتأكيد

107
00:09:01,380 --> 00:09:05,410
لذلك اسمحوا لي أن وقفة ذلك عن طريق النقر على زر وقفة.

108
00:09:05,410 --> 00:09:11,080
لذلك عند النقر على زر الإيقاف المؤقت، يتم إيقاف العمل المنزلق الخاص بك Carousel مؤقتًا.

109
00:09:11,080 --> 00:09:15,080
لأنه عند النقر على زر الإيقاف المؤقت، فإن الوظيفة التي

110
00:09:16,820 --> 00:09:21,360
قدمناها في شفرة جافا سكريبت تدخل حيز التنفيذ

111
00:09:21,360 --> 00:09:24,520
ثم توقف حركة دائري مؤقتًا.

112
00:09:24,520 --> 00:09:28,354
الآن، إذا كنت ترغب في استئناف، انقر على زر التشغيل ومن

113
00:09:28,354 --> 00:09:31,980
ثم دائري يجب استئناف حركته.

114
00:09:31,980 --> 00:09:37,044
حتى كما ترون، لحظة النقر على زر التشغيل، دائري يبدأ التحرك.

115
00:09:37,044 --> 00:09:43,125
الآن، بالطبع، يمكنك تحسين أكثر حول كيفية إنشاء هذه الأزرار وهلم جرا،

116
00:09:43,125 --> 00:09:48,350
ولكن هذه طريقة بسيطة يمكننا أن نقدم للسيطرة على كاروسيل لدينا.

117
00:09:50,110 --> 00:09:55,400
يوضح لك هذا التمرين كيف يمكننا استخدام شفرة جافا سكريبت

118
00:09:55,400 --> 00:10:00,650
لتكون قادرة على التحكم في المكونات المستندة إلى Bootstrap جافا سكريبت.

119
00:10:00,650 --> 00:10:03,933
هذا هو الوقت المناسب للقيام بتعليق من

120
00:10:03,933 --> 00:10:08,365
التعليمات البرمجية الخاصة بك مع الرسالة Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[ موسيقى]