1
00:00:00,000 --> 00:00:04,563
[NHẠC].

2
00:00:04,563 --> 00:00:09,231
Bây giờ chúng ta hãy dành thời gian để tìm hiểu cách Bootstrap và

3
00:00:09,231 --> 00:00:14,770
jQuery làm việc cùng nhau để hỗ trợ các thành phần JavaScript của Bootstrap.

4
00:00:16,310 --> 00:00:21,110
Như chúng ta đã hiểu từ các mô-đun trước đó, Bootstrap có

5
00:00:21,110 --> 00:00:26,410
một số thành phần dựa trên JavaScript thú vị.

6
00:00:26,410 --> 00:00:30,871
Và chúng tôi cũng học được rằng các thành phần dựa trên JavaScript của Bootstrap

7
00:00:30,871 --> 00:00:34,440
đều được kích hoạt bằng cách sử dụng jQuery làm hỗ trợ.

8
00:00:34,440 --> 00:00:38,160
Vì vậy, nhiều trong số các plugin này được viết bằng jQuery. Các

9
00:00:38,160 --> 00:00:41,780
plugin của họ có thể được bao gồm riêng lẻ hoặc

10
00:00:41,780 --> 00:00:45,950
bạn có thể bao gồm tất cả các plugin với nhau như một đơn vị duy nhất.

11
00:00:45,950 --> 00:00:50,350
Trong các bài tập, chúng tôi đã bao gồm tất cả các

12
00:00:50,350 --> 00:00:53,815
plugin JavaScript của Bootstrap vào trang web của chúng tôi.

13
00:00:55,040 --> 00:00:58,350
Chúng tôi cũng thấy đồ họa này trong mô-đun trước

14
00:00:58,350 --> 00:01:03,160
để giúp chúng tôi hiểu được mối quan hệ giữa JavaScript, jQuery, và

15
00:01:03,160 --> 00:01:07,740
cách thực hiện các plugin dựa trên JS của Bootstrap.

16
00:01:07,740 --> 00:01:14,820
Vì vậy, chúng tôi thấy rằng Bootstrap của JS thành phần bò trong các thành phần dựa trên jQuery và

17
00:01:14,820 --> 00:01:18,538
làm cho nó dễ dàng cho chúng tôi để sử dụng chúng trong trang web của chúng tôi.

18
00:01:18,538 --> 00:01:25,200
Chúng tôi cũng học được rằng các thành phần dựa trên JavaScript của Bootstrap có thể được sử dụng

19
00:01:25,200 --> 00:01:31,010
trong trang web của bạn mà không cần viết một dòng mã JavaScript.

20
00:01:31,010 --> 00:01:38,860
Vì vậy, đây là nơi các thuộc tính dữ liệu* đến để giải cứu chúng tôi.

21
00:01:38,860 --> 00:01:44,133
Vì vậy, bạn có thể sử dụng các thuộc tính khác nhau mà chúng tôi đã thấy trong

22
00:01:44,133 --> 00:01:50,910
mô-đun trước đó để kích hoạt nhiều thành phần dựa trên JavaScript Bootstrap của chúng tôi.

23
00:01:50,910 --> 00:01:55,705
Trong trường hợp bạn muốn linh hoạt hơn với các thành phần JavaScript của mình,

24
00:01:55,705 --> 00:02:00,405
thì sự linh hoạt đầy đủ của API dựa trên JavaScript đó

25
00:02:00,405 --> 00:02:05,565
có sẵn cho tất cả các thành phần JavaScript Bootstrap.

26
00:02:05,565 --> 00:02:10,875
Bạn có thể viết mã bằng cách sử dụng cú pháp jQuery và sau đó sử dụng nó

27
00:02:10,875 --> 00:02:16,025
cùng nhau để kiểm soát các thành phần JS của Bootstrap của bạn.

28
00:02:16,025 --> 00:02:20,350
Chúng ta sẽ khám phá điều đó một cách chi tiết hơn trong mô-đun này.

29
00:02:20,350 --> 00:02:26,080
Trước khi chúng tôi tiến hành thêm, hãy để tôi cung cấp cho bạn một tour du lịch nhanh chóng của jQuery và cú pháp

30
00:02:26,080 --> 00:02:32,030
của nó để chúng tôi hiểu một số mã mà chúng tôi sẽ viết trong mô-đun này.

31
00:02:32,030 --> 00:02:33,830
jQuery là một

32
00:02:33,830 --> 00:02:39,810
thư viện rất mạnh mẽ, nhẹ dựa trên JavaScript cung cấp một số thành phần khác nhau.

33
00:02:39,810 --> 00:02:45,100
Nó là một tính năng phong phú thư viện cho phép viết mã để

34
00:02:45,100 --> 00:02:47,880
thực hiện thao tác HTML hoặc DOM.

35
00:02:47,880 --> 00:02:50,170
Nó cho phép bạn thực hiện thao tác CSS.

36
00:02:50,170 --> 00:02:50,910
Vì vậy, ví dụ,

37
00:02:50,910 --> 00:02:56,840
bạn có thể áp dụng các lớp CSS cho các phần tử HTML khác nhau thông qua mã jQuery.

38
00:02:56,840 --> 00:03:00,860
Nó cho phép bạn xử lý các sự kiện HTML,

39
00:03:00,860 --> 00:03:05,920
và khi những sự kiện xảy ra bạn có thể thực hiện các phương pháp đang được thực hiện

40
00:03:05,920 --> 00:03:08,565
để đáp ứng với sự xuất hiện của các sự kiện này.

41
00:03:08,565 --> 00:03:11,160
jQuery cũng hỗ trợ các hiệu ứng và

42
00:03:11,160 --> 00:03:15,410
hình ảnh động khác nhau có thể được áp dụng cho các phần tử HTML của bạn.

43
00:03:15,410 --> 00:03:22,650
Ngoài ra jQuery cho phép bạn tương tác với một máy chủ back end sử dụng AJAX.

44
00:03:22,650 --> 00:03:27,390
Mặc dù chúng tôi sẽ không khám phá điều đó một cách chi tiết trong khóa học này.

45
00:03:27,390 --> 00:03:31,937
Chúng tôi cũng học được rằng các thành phần JavaScript của Bootstrap

46
00:03:31,937 --> 00:03:34,310
được xây dựng dựa trên jQuery. Các

47
00:03:34,310 --> 00:03:39,480
thành phần này sử dụng nhiều phương pháp jQuery có sẵn để

48
00:03:39,480 --> 00:03:45,340
thực hiện các tính năng khác nhau mà các thành phần JavaScript Bootstrap này hỗ trợ.

49
00:03:45,340 --> 00:03:48,120
Hãy hiểu ngắn gọn jQuery cú pháp.

50
00:03:48,120 --> 00:03:53,150
Bây giờ nếu bạn đã nhìn thấy một số mã mà chúng tôi bao gồm

51
00:03:53,150 --> 00:03:57,700
trong mô-đun trước đó, đặc biệt cho

52
00:03:57,700 --> 00:04:03,210
mẹo công cụ, bạn nhớ rằng có một cái gì đó bắt đầu với một ký hiệu đô la.

53
00:04:03,210 --> 00:04:09,780
Vì vậy, cú pháp jQuery được thực hiện bằng cách sử dụng ký hiệu đô la.

54
00:04:09,780 --> 00:04:19,113
Dấu đô la ở đầu câu ngụ ý rằng điều này định nghĩa và

55
00:04:19,113 --> 00:04:26,070
truy cập các plugin thư viện của jQuery có sẵn.

56
00:04:26,070 --> 00:04:31,070
Bây giờ bất cứ khi nào chúng tôi sử dụng ký hiệu đô la, bạn cũng cung cấp một bộ chọn.

57
00:04:31,070 --> 00:04:34,920
Bộ chọn được sử dụng để truy vấn và tìm thấy những

58
00:04:34,920 --> 00:04:40,270
phần tử HTML trong DOM của bạn mà bạn muốn áp dụng thao tác này.

59
00:04:40,270 --> 00:04:42,795
Có nhiều cách khác nhau để thực hiện lựa chọn.

60
00:04:42,795 --> 00:04:46,030
Chúng ta sẽ xem xét chúng trong slide tiếp theo.

61
00:04:47,550 --> 00:04:54,670
Sau đó, khía cạnh thứ ba của một câu lệnh jQuery là hành động mà bạn chỉ định.

62
00:04:54,670 --> 00:04:59,390
Bây giờ bạn chọn một phần tử HTML, loại hành động bạn muốn được thực hiện

63
00:04:59,390 --> 00:05:02,700
trên phần tử đó, vì vậy đó là phần thứ ba mà bạn sẽ thấy.

64
00:05:02,700 --> 00:05:09,032
Vì vậy, như một ví dụ bạn có thể chỉ định một câu lệnh jQuery

65
00:05:09,032 --> 00:05:15,540
như $ (“p”) trong mã, và sau đó .hide.

66
00:05:15,540 --> 00:05:20,268
Vì vậy, trong trường hợp này những gì nó ngụ ý là, chọn tất cả những phần tử HTML

67
00:05:20,268 --> 00:05:24,690
đó là các phần tử đoạn văn,

68
00:05:24,690 --> 00:05:30,440
bắt đầu với thẻ p, và sau đó những phần tử ẩn những phần tử đó.

69
00:05:30,440 --> 00:05:33,210
Vì vậy, hành động được thực hiện là chiều cao,

70
00:05:33,210 --> 00:05:38,150
vì vậy điều này sẽ dẫn đến tất cả các phần tử p bị ẩn khỏi

71
00:05:39,400 --> 00:05:43,050
DOM của bạn, và do đó từ trang web được kết xuất.

72
00:05:44,510 --> 00:05:49,165
Tương tự như vậy, bạn sẽ thấy sau này trên chúng tôi sử dụng

73
00:05:49,165 --> 00:05:53,288
một tuyên bố như nói đồng đô la, và

74
00:05:53,288 --> 00:05:58,608
sau đó trong dấu ngoặc kép, #mycarousel,

75
00:05:58,608 --> 00:06:06,189
ngụ ý rằng bạn đang chỉ định ID của một phần tử HTML cụ thể,

76
00:06:06,189 --> 00:06:10,970
và sau đó chỉ định băng chuyền và tạm dừng.

77
00:06:10,970 --> 00:06:14,340
Chúng ta sẽ xem xét thêm chi tiết về những gì nó thực sự thực hiện

78
00:06:14,340 --> 00:06:16,930
trong một trong các trang trình bày tiếp theo ở đó.

79
00:06:16,930 --> 00:06:22,870
Nhưng lưu ý cấu trúc của cú pháp câu lệnh jQuery ở đó.

80
00:06:22,870 --> 00:06:27,040
Bạn chỉ định bộ chọn, và sau đó bạn chỉ định hành động tương ứng được

81
00:06:27,040 --> 00:06:32,360
thực hiện trên phần tử được chọn bởi các bộ chọn này.

82
00:06:32,360 --> 00:06:36,335
Chúng ta hãy nhìn vào Bootstrap jQuery ví dụ.

83
00:06:36,335 --> 00:06:41,490
Chúng tôi sẽ quay lại ví dụ trước đó mà chúng tôi đã thấy trước đó,

84
00:06:41,490 --> 00:06:43,410
nơi chúng tôi giới thiệu chú giải công cụ.

85
00:06:43,410 --> 00:06:47,480
Vì vậy, khi chúng tôi giới thiệu tooltip, chúng tôi đã chỉ định kịch bản và

86
00:06:47,480 --> 00:06:50,940
sau đó bên trong kịch bản, chúng tôi đã nói $ (tài liệu).

87
00:06:50,940 --> 00:06:53,800
Trong trường hợp này tài liệu có nghĩa là toàn bộ tài liệu.

88
00:06:53,800 --> 00:06:56,510
Vì vậy, lựa chọn ở đây là cho toàn bộ tài liệu.

89
00:06:56,510 --> 00:07:01,010
Vì vậy, cho toàn bộ tài liệu, và sau đó chúng tôi sẽ chỉ định sẵn sàng.

90
00:07:01,010 --> 00:07:02,790
Sẵn sàng là hành động cần thực hiện.

91
00:07:02,790 --> 00:07:07,760
Vì vậy, khi tài liệu đã sẵn sàng, sau đó thực hiện chức năng này được

92
00:07:07,760 --> 00:07:11,500
chỉ định như một tham số cho hành động sẵn sàng này ở đó.

93
00:07:11,500 --> 00:07:17,710
Vì vậy, các chức năng mà chúng tôi thấy được sử dụng cho các tooltip chỉ định nó như $, và

94
00:07:17,710 --> 00:07:23,470
sau đó trong dấu ngoặc, nó nói, data-toggle =” tooltip”.

95
00:07:23,470 --> 00:07:28,240
Bây giờ ở đây chúng tôi đang xác định rằng chọn những yếu tố

96
00:07:28,240 --> 00:07:33,260
mà có một thuộc tính với data-toggle ="tooltip”.

97
00:07:33,260 --> 00:07:38,290
Và sau đó đối với những yếu tố phù hợp với tiêu chí này, thực hiện hành động này

98
00:07:38,290 --> 00:07:43,270
được gọi là bật chú giải công cụ cho những yếu tố đó.

99
00:07:43,270 --> 00:07:47,580
Và chúng tôi đóng chức năng ở đó.

100
00:07:47,580 --> 00:07:52,890
Vì vậy, điều này xác định rằng kịch bản cụ thể này

101
00:07:52,890 --> 00:07:57,640
sẽ được kích hoạt cho những yếu tố mà bạn đã áp dụng chú giải công cụ chuyển đổi dữ liệu.

102
00:07:57,640 --> 00:08:02,840
Vì vậy, về cơ bản đối với những yếu tố HTML mà trên đó bạn đã xác định tooltips,

103
00:08:02,840 --> 00:08:05,770
bạn muốn tooltip được kích hoạt ở đó.

104
00:08:05,770 --> 00:08:12,800
Vì vậy, đây là cách chúng tôi giải thích cú pháp này của ví dụ jQuery này ở đây.

105
00:08:12,800 --> 00:08:18,340
Hãy nhìn vào các cách khác nhau để xác định bộ chọn.

106
00:08:18,340 --> 00:08:23,490
Vì vậy, khi chúng ta nhận ra từ cú pháp câu lệnh jQuery,

107
00:08:23,490 --> 00:08:28,240
chúng ta luôn theo đô la và sau đó, trong dấu ngoặc đơn, chúng ta chỉ định một bộ chọn.

108
00:08:28,240 --> 00:08:32,990
Làm thế nào để chúng ta chỉ định bộ chọn, những cách khác nhau bạn có thể chỉ định bộ chọn là gì?

109
00:08:32,990 --> 00:08:35,450
Dưới đây là một số khả năng.

110
00:08:35,450 --> 00:08:38,900
Bạn có thể chỉ định một bộ chọn bằng cách chỉ định bất kỳ

111
00:08:38,900 --> 00:08:41,960
phần tử HTML cụ thể nào bằng cách chỉ định thẻ.

112
00:08:41,960 --> 00:08:46,050
Vì vậy, bạn có thể nói p, nút, h4,

113
00:08:46,050 --> 00:08:50,315
h3, hoặc bất kỳ thẻ HTML trực tiếp.

114
00:08:50,315 --> 00:08:54,725
Và như vậy trong trường hợp đó tên thẻ HTML được chỉ định trong dấu ngoặc kép và

115
00:08:54,725 --> 00:08:56,475
đó sẽ tạo thành bộ chọn của bạn.

116
00:08:56,475 --> 00:09:00,225
Khi bạn áp dụng một bộ chọn như thế này, bạn đang nói rằng tất cả các phần tử phù hợp với

117
00:09:00,225 --> 00:09:05,673
tiêu chí này sẽ được chọn.

118
00:09:06,950 --> 00:09:11,920
Sau đó, bạn cũng có thể chỉ định một

119
00:09:11,920 --> 00:09:16,640
phần tử HTML DOM cụ thể bằng cách xác định ID của phần tử đó bằng cách sử dụng #id.

120
00:09:16,640 --> 00:09:20,990
Vì vậy, ví dụ, chúng tôi sử dụng #myCarousel.

121
00:09:20,990 --> 00:09:26,480
Vì vậy, trong trường hợp này bạn đang nói chọn rằng

122
00:09:26,480 --> 00:09:31,119
phần tử HTML cụ thể mà ID là MyCarousel.

123
00:09:31,119 --> 00:09:36,500
Vì vậy, đó là cách khác để lựa chọn, bằng cách xác định một ID cho một phần tử.

124
00:09:37,550 --> 00:09:40,620
Khả năng thứ ba là chọn các

125
00:09:40,620 --> 00:09:44,440
yếu tố của các lớp đã áp dụng cho điều đó.

126
00:09:44,440 --> 00:09:50,180
Vì vậy, ví dụ, bạn có thể thấy trong dấu ngoặc đơn nếu bạn nói .btn, có

127
00:09:50,180 --> 00:09:53,477
nghĩa là tất cả các phần tử HTML DOM

128
00:09:53,477 --> 00:09:58,702
mà bạn đã áp dụng lớp nút sẽ được chọn.

129
00:09:58,702 --> 00:10:03,670
Hoặc bạn thậm chí có thể hội đủ điều kiện hơn nữa bằng cách chỉ định một nhóm các lớp học bằng cách

130
00:10:03,670 --> 00:10:08,550
nói .btn.btn-default, nghĩa là những yếu tố

131
00:10:08,550 --> 00:10:14,080
mà lớp nút và lớp mặc định nút đã được áp dụng.

132
00:10:15,290 --> 00:10:16,620
Vì vậy, đó là một cách khác,

133
00:10:16,620 --> 00:10:19,607
bằng cách sử dụng các lớp được áp dụng cho các phần tử HTML.

134
00:10:20,630 --> 00:10:25,070
Khả năng khác là xác định một thuộc tính đã được áp dụng

135
00:10:25,070 --> 00:10:27,120
cho phần tử HTML.

136
00:10:27,120 --> 00:10:33,150
Vì vậy, ví dụ, bạn có thể nói các thuộc tính được xác định trong dấu ngoặc vuông ở đây.

137
00:10:33,150 --> 00:10:38,640
Vì vậy, bạn có thể nhìn thấy trong dấu ngoặc vuông href, và bao gồm nó trong dấu ngoặc kép để

138
00:10:38,640 --> 00:10:44,370
có nghĩa là tất cả những yếu tố HTML mà thuộc tính href đã được áp dụng.

139
00:10:44,370 --> 00:10:47,920
Tương tự, bạn có thể nói data-

140
00:10:50,630 --> 00:10:53,745
toggle ="tooltip”, mà về cơ bản lưu tất cả những yếu tố mà thuộc tính tooltip chuyển đổi dữ liệu đã được áp dụng.

141
00:10:53,745 --> 00:10:59,270
Ngoài ra, chọn phần tử hiện tại

142
00:10:59,270 --> 00:11:04,900
mà bạn muốn làm điều gì đó bằng cách nói $ (this).

143
00:11:04,900 --> 00:11:08,360
Vì vậy, có nghĩa là, đối với các yếu tố hiện tại đã được chọn, cho

144
00:11:08,360 --> 00:11:10,360
điều này, làm điều gì đó.

145
00:11:11,520 --> 00:11:14,900
Và rất nhiều khả năng khác.

146
00:11:14,900 --> 00:11:19,760
Vì vậy, đây là một số ví dụ, bạn sẽ thấy tôi sử dụng một số trong số này

147
00:11:19,760 --> 00:11:23,610
trong các ví dụ và bài tập sau đây.

148
00:11:24,650 --> 00:11:29,950
Không chỉ vậy, bạn còn có thể chỉ định các sự kiện jQuery, các

149
00:11:29,950 --> 00:11:34,840
sự kiện dựa trên đó bạn trả lời.

150
00:11:34,840 --> 00:11:37,720
Vì vậy, ví dụ, người dùng tương tác

151
00:11:37,720 --> 00:11:42,590
với các yếu tố khác nhau trên trang web của bạn sẽ gây ra các sự kiện DOM.

152
00:11:42,590 --> 00:11:47,220
Vì vậy, ví dụ, với một con chuột, người dùng có thể nhấp vào một vị trí cụ thể.

153
00:11:47,220 --> 00:11:52,790
Hoặc bấm đúp vào, hoặc khi chuột vào và rời khỏi một vị trí cụ thể.

154
00:11:52,790 --> 00:11:56,880
Đối với bàn phím, bạn có thể trả lời các phím bấm, phím tắt và phím tắt.

155
00:11:57,980 --> 00:12:01,680
Sự kiện cho biểu mẫu, khi biểu mẫu được gửi,

156
00:12:01,680 --> 00:12:05,870
khi có sự thay đổi trong một

157
00:12:07,040 --> 00:12:13,230
giá trị phần tử đầu vào cụ thể, và khi một phần tử cụ thể được tập trung vào, v.v.

158
00:12:13,230 --> 00:12:16,140
Chúng ta thậm chí có thể nói về toàn bộ tài liệu.

159
00:12:16,140 --> 00:12:20,080
Vì vậy, khi tải tài liệu, khi thay đổi kích thước tài liệu,

160
00:12:20,080 --> 00:12:24,920
khi cuộn hoặc dỡ tài liệu, bạn có thể trả lời những sự kiện đó.

161
00:12:24,920 --> 00:12:31,253
Vì vậy, trong trường hợp đó, các phương pháp sự kiện jQuery được hỗ trợ bao gồm sẵn sàng

162
00:12:31,253 --> 00:12:35,140
, nhấp chuột, dblclick, mousedown, và vân vân.

163
00:12:35,140 --> 00:12:38,430
Vì vậy, đây là tất cả các phương pháp sự kiện

164
00:12:38,430 --> 00:12:42,770
sẽ được thực hiện khi xảy ra bất kỳ sự kiện nào ở đó.

165
00:12:43,850 --> 00:12:48,480
Hãy lấy một ví dụ về Carousel của Bootstrap để xem cách

166
00:12:48,480 --> 00:12:53,640
mã JavaScript có thể được viết để kiểm soát các hành động carousel.

167
00:12:54,980 --> 00:13:01,490
Vì vậy, đối với một băng chuyền, bạn đã thấy từ mô-đun trước đó, kích thước chỉ mục.

168
00:13:01,490 --> 00:13:03,584
Chúng tôi đã sử dụng tất cả các thuộc tính này.

169
00:13:03,584 --> 00:13:08,250
Vì vậy, chúng tôi đã sử dụng thuộc tính data-slide="prev|next”, hoặc

170
00:13:08,250 --> 00:13:13,780
chúng tôi đã nói data-slide-to và sau đó chỉ định số slide cụ thể,

171
00:13:13,780 --> 00:13:16,910
nơi nó nói data-ride+"carousel”.

172
00:13:16,910 --> 00:13:21,570
Và sau đó chúng tôi đã xác định khoảng thời gian dữ liệu, khoảng thời gian

173
00:13:21,570 --> 00:13:25,800
cho hành động trượt diễn ra.

174
00:13:25,800 --> 00:13:29,590
Vì vậy, đối với băng chuyền, bạn có thể làm những việc như,

175
00:13:29,590 --> 00:13:33,076
ví dụ, bạn có thể chỉ định điều khiển dựa trên JavaScript.

176
00:13:33,076 --> 00:13:38,674
Bạn có thể thấy $, và trong dấu ngoặc chỉ định để chọn những phần tử,

177
00:13:38,674 --> 00:13:44,565
băng chuyền, được bao gồm trong trang của bạn bằng cách chỉ định .carousel. Có

178
00:13:44,565 --> 00:13:50,577
nghĩa là tất cả những yếu tố mà lớp băng chuyền đã được áp dụng,

179
00:13:50,577 --> 00:13:56,700
và sau đó sau đó bạn sử dụng .carousel để xác định một cái gì đó.

180
00:13:56,700 --> 00:14:00,580
Vì vậy, như một ví dụ, bạn sẽ thấy tôi sử dụng một cái gì đó như thế này

181
00:14:00,580 --> 00:14:02,090
trong bài tập sau.

182
00:14:02,090 --> 00:14:05,400
Chúng ta sẽ nói .carousel và carousel, và

183
00:14:05,400 --> 00:14:09,409
bên trong đó bạn sẽ chỉ định interval:2000, có

184
00:14:09,409 --> 00:14:15,140
nghĩa là thiết lập khoảng thời gian cho trượt là 2000 mili giây.

185
00:14:15,140 --> 00:14:17,620
Hoặc hai giây, trong trường hợp này.

186
00:14:17,620 --> 00:14:22,850
Vì vậy, theo cách đó bạn kiểm soát hoặc sửa đổi một thuộc tính cụ thể

187
00:14:22,850 --> 00:14:27,890
của các yếu tố JavaScript carousel đó.

188
00:14:27,890 --> 00:14:32,160
Băng chuyền cũng hỗ trợ nhiều điều khiển khác.

189
00:14:32,160 --> 00:14:35,020
Vì vậy, ví dụ, bạn có thể nói carousel ('cycle'),

190
00:14:35,020 --> 00:14:38,730
nghĩa là bắt đầu đi xe đạp các mục từ trái sang phải.

191
00:14:38,730 --> 00:14:44,410
Bạn có thể nói carousel ('tạm dừng '), để tạm dừng hành động trượt của carousel.

192
00:14:44,410 --> 00:14:48,171
Sau đó, bạn có thể nói carousel (số), vì vậy

193
00:14:48,171 --> 00:14:53,441
nó chu kỳ carousel đến mục carousel cụ thể đó.

194
00:14:53,441 --> 00:14:56,370
Và sau đó bạn có thể nói carousel ('prev'),

195
00:14:56,370 --> 00:15:01,710
carousel ('tiếp theo') để đi đến mục trước đó và mục tiếp theo trong carousel của tôi.

196
00:15:01,710 --> 00:15:07,420
Vì vậy, chúng có thể được gọi trực tiếp từ mã JavaScript của chúng tôi.

197
00:15:07,420 --> 00:15:10,390
Tương tự, khi

198
00:15:12,280 --> 00:15:17,550
mục băng chuyền JavaScript nằm trong trang web của bạn, nó gây ra các sự kiện khác nhau.

199
00:15:17,550 --> 00:15:20,870
Và dựa trên sự xuất hiện của những sự kiện này, bạn có thể trả lời.

200
00:15:20,870 --> 00:15:23,980
Vì vậy, ví dụ, bạn có thể nói slide.bs.carousel.

201
00:15:23,980 --> 00:15:28,220
Sự kiện cụ thể này sẽ được kích hoạt khi phương pháp thể hiện slide được gọi.

202
00:15:29,550 --> 00:15:32,990
Tương tự như vậy, slid.bs.carousel có nghĩa

203
00:15:32,990 --> 00:15:38,460
là sự kiện này bị bắn khi nó đã hoàn thành quá trình chuyển đổi slide sang mục tiếp theo.

204
00:15:38,460 --> 00:15:41,880
Vì vậy, trong mã của bạn, bạn có thể chỉ định một cái gì đó

205
00:15:43,370 --> 00:15:48,780
như $ (” #myCarousel “) .on ('slide.bs.carousel'.

206
00:15:48,780 --> 00:15:54,110
Vì vậy, có nghĩa là khi hành động slide đó bắt đầu, sau đó gọi chức năng này,

207
00:15:54,110 --> 00:15:57,870
và sau đó làm một cái gì đó bên trong chức năng đó ở đó.

208
00:15:57,870 --> 00:16:00,958
Vì vậy, loại mã này có thể được trả lại cũng

209
00:16:00,958 --> 00:16:06,400
để đáp ứng với các sự kiện được gây ra bởi hành vi băng chuyền của bạn.

210
00:16:07,490 --> 00:16:12,300
Sau khi xem xét một số trong những ví dụ này, chúng tôi sẽ đi vào một bài tập mà chúng tôi

211
00:16:12,300 --> 00:16:17,460
sẽ thực sự viết một số mã dựa trên JavaScript để kiểm soát băng chuyền của chúng tôi.

212
00:16:17,460 --> 00:16:23,190
Chúng tôi sẽ viết mã để bao gồm một vài nút trong băng chuyền của chúng tôi,

213
00:16:23,190 --> 00:16:28,280
sẽ được sử dụng để kiểm soát hành động trượt của băng chuyền.

214
00:16:28,280 --> 00:16:33,560
Vì vậy, có nghĩa là chúng ta có thể tạm dừng và tiếp tục hành động trượt của băng chuyền của chúng tôi.

215
00:16:33,560 --> 00:16:37,699
Và chúng tôi sẽ kích hoạt các nút này từ JavaScript.

216
00:16:37,699 --> 00:16:43,799
[ NHẠC]