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

2
00:00:04,523 --> 00:00:10,934
Nhiều thành phần dựa trên JavaScript của Bootstrap cung cấp cho chúng ta một cơ chế

3
00:00:10,934 --> 00:00:17,070
để kiểm soát một số tính năng của các thành phần này bằng cách viết mã JavaScript,

4
00:00:17,070 --> 00:00:21,510
đặc biệt, bằng cách viết mã Sử dụng cú pháp jQuery.

5
00:00:21,510 --> 00:00:26,181
Vì vậy, chúng tôi sẽ khám phá bài tập chỉ mục này bằng cách sử dụng một số

6
00:00:26,181 --> 00:00:30,561
điều khiển dựa trên JavaScript cho Carousel của chúng tôi mà chúng tôi

7
00:00:30,561 --> 00:00:35,537
đưa vào trang index.html trong bài tập trước đó.

8
00:00:37,171 --> 00:00:42,810
Trong bài tập trước, chúng tôi đã giới thiệu Carousel này vào trang index.html của chúng tôi.

9
00:00:42,810 --> 00:00:47,260
Những gì tôi muốn làm trong bài tập này là để giới thiệu một vài

10
00:00:47,260 --> 00:00:50,240
nút điều khiển vào Carousel này, và

11
00:00:50,240 --> 00:00:54,920
sau đó sử dụng JavaScript để có thể kích hoạt các nút này.

12
00:00:54,920 --> 00:00:57,850
Các nút sẽ được sử dụng để tạm dừng và

13
00:00:57,850 --> 00:01:03,350
phát hành động trượt của Carousel này.

14
00:01:03,350 --> 00:01:08,410
Vì vậy, bao gồm các nút trong Carousel của chúng tôi ở đây,

15
00:01:08,410 --> 00:01:13,000
chúng ta có thể nhấp vào một nút để ngăn chặn hành động trượt của Carousel, và

16
00:01:13,000 --> 00:01:18,070
sau đó chúng ta có thể nhấp vào một nút khác để tiếp tục hành động trượt của Carousel.

17
00:01:18,070 --> 00:01:21,390
Vì vậy, đó là những gì chúng ta có thể khám phá trong bài tập này.

18
00:01:22,520 --> 00:01:26,920
Để bắt đầu bài tập này, chúng tôi sẽ đi đến trang index.html.

19
00:01:26,920 --> 00:01:32,420
Và ngay sau khi điều khiển trái và phải của Carousel của chúng

20
00:01:32,420 --> 00:01:40,400
tôi, tôi sẽ giới thiệu một div với nhóm nút lớp.

21
00:01:40,400 --> 00:01:47,023
Vì vậy, điều này sẽ kèm theo một nhóm nút của hai nút ở đây, và sau đó với một ID của,

22
00:01:50,699 --> 00:01:54,224
CarouselButton và

23
00:01:54,224 --> 00:01:59,290
đóng div ở đó.

24
00:01:59,290 --> 00:02:03,530
Bây giờ, bên trong này, tôi sẽ thêm vào hai nút.

25
00:02:03,530 --> 00:02:12,385
Vì vậy, hãy để tôi thêm vào một nút với lớp btn, btn-danger,

26
00:02:12,385 --> 00:02:16,910
btn-small, và

27
00:02:16,910 --> 00:02:24,030
một id của băng chuyền tạm dừng.

28
00:02:24,030 --> 00:02:30,970
Vì vậy, điều này sẽ hoạt động như nút tạm dừng, làm chậm nút ở đó.

29
00:02:30,970 --> 00:02:36,600
Và đối với nút này, Tôi sẽ giới thiệu

30
00:02:36,600 --> 00:02:41,201
một phông chữ như một biểu tượng với fa lớp,

31
00:02:42,923 --> 00:02:49,410
tạm dừng, và đóng cửa khoảng.

32
00:02:49,410 --> 00:02:55,790
Vì vậy, điều này sẽ giới thiệu một nút tạm dừng vào nhóm các nút Carousel.

33
00:02:55,790 --> 00:03:04,450
Tôi sẽ sao chép này và dán nó một lần nữa để tạo một nút khác.

34
00:03:04,450 --> 00:03:09,368
Nút thứ hai đó, tôi sẽ gọi btn btn-danger btn-sm, và

35
00:03:09,368 --> 00:03:12,259
sau đó đây sẽ là carousel-play.

36
00:03:13,300 --> 00:03:17,580
Và lớp span,

37
00:03:17,580 --> 00:03:21,660
nút sẽ là nếu nó chơi ở đây.

38
00:03:23,940 --> 00:03:27,965
Giả sử những thay đổi và đi và xem nhanh nó trên trang web.

39
00:03:29,180 --> 00:03:34,850
Hãy nhìn vào các nút khi chúng tồn tại trong trình duyệt của chúng tôi, bạn có thể thấy rằng

40
00:03:34,850 --> 00:03:39,940
hai nút này bây giờ được đặt ở góc trái của Carousel của tôi.

41
00:03:40,970 --> 00:03:44,660
Tôi muốn đặt lại vị trí các nút này ở cạnh bên phải, để

42
00:03:44,660 --> 00:03:51,700
nó không gây ra không gian màu xanh, trống bên dưới hình ảnh ở đây.

43
00:03:51,700 --> 00:03:56,410
Vì vậy, hãy để tôi sử dụng một vài thuộc tính CSS để định vị lại các nút này

44
00:03:56,410 --> 00:03:59,230
vào cột bên phải của Carousel.

45
00:04:00,760 --> 00:04:04,140
Đi đến đó phong cách bắt đầu tập tin CSS,

46
00:04:04,140 --> 00:04:08,440
hãy để tôi giới thiệu một số mã CSS ở đây.

47
00:04:08,440 --> 00:04:14,166
Vì vậy, đối với các yếu tố với ID CarouselButtons,

48
00:04:14,166 --> 00:04:18,880
tôi đang định vị nó vào cạnh bên phải và dưới cùng, 0 pixel ở đây.

49
00:04:18,880 --> 00:04:22,280
Vì vậy, hai và sau đó vị trí là tuyệt đối.

50
00:04:22,280 --> 00:04:28,300
Vì vậy, điều này sẽ định vị các nút này ở góc phải của Carousel của tôi.

51
00:04:29,710 --> 00:04:34,280
Rõ ràng, chỉ cần giới thiệu các nút vào Carousel sẽ không phục vụ

52
00:04:34,280 --> 00:04:35,420
bất kỳ mục đích nào.

53
00:04:35,420 --> 00:04:40,330
Bây giờ, chúng ta sẽ tận dụng lợi thế của các điều khiển JavaScript mà

54
00:04:40,330 --> 00:04:46,310
Carousel cung cấp bằng cách viết một chút mã jQuery ở

55
00:04:46,310 --> 00:04:52,204
dưới cùng của trang index.html để làm cho các nút này làm công việc của họ.

56
00:04:52,204 --> 00:04:57,950
Chúng tôi muốn có thể tạm dừng và tiếp tục hành động trượt của Carousel của tôi.

57
00:04:58,970 --> 00:05:06,830
Đi đến cuối trang index.html, hãy để tôi giới thiệu một số kịch bản ở đây.

58
00:05:06,830 --> 00:05:10,980
Vì vậy, kịch bản này nên chứa một số

59
00:05:10,980 --> 00:05:15,750
mã JavaScript được viết bằng cú pháp jQuery.

60
00:05:15,750 --> 00:05:19,088
Vì vậy, tôi sẽ nói,

61
00:05:19,088 --> 00:05:28,664
$ (tài liệu) .ready (chức năng), Và

62
00:05:28,664 --> 00:05:33,814
chức năng này nên chứa một vài

63
00:05:33,814 --> 00:05:39,320
chức năng ở đây để kích hoạt các nút.

64
00:05:39,320 --> 00:05:45,430
Vì vậy, tôi sẽ nói, mycarousel.

65
00:05:45,430 --> 00:05:50,427
Đây là ID của băng chuyền mà chúng tôi được giới thiệu,

66
00:05:50,427 --> 00:05:53,099
vì vậy chúng tôi sẽ nói, băng chuyền,

67
00:05:56,960 --> 00:06:01,804
Khoảng thời gian: 2000.

68
00:06:01,804 --> 00:06:06,720
Vì vậy, điều này làm là nó thiết lập khoảng trượt của Carousel

69
00:06:06,720 --> 00:06:10,130
để 2000 mili giây hoặc 2 giây.

70
00:06:10,130 --> 00:06:12,890
Vì vậy, tôi làm cho nó nhanh hơn một chút cho

71
00:06:12,890 --> 00:06:16,330
hành động trượt để diễn ra trong Carousel.

72
00:06:16,330 --> 00:06:20,430
Tiếp tục với mã jQuery ở đây.

73
00:06:20,430 --> 00:06:26,835
Bây giờ tôi sẽ kích hoạt nút tạm dừng đó, vì vậy tôi sẽ nói băng chuyền tạm dừng.

74
00:06:26,835 --> 00:06:31,430
Vì vậy, đó là id tôi đã đưa cho nút tạm dừng ở đó.

75
00:06:31,430 --> 00:06:34,960
Vì vậy, đó là lý do để đưa ra id

76
00:06:34,960 --> 00:06:38,720
Vì vậy, tôi muốn kích hoạt nút tạm dừng.

77
00:06:38,720 --> 00:06:40,980
Vì vậy, tôi nói khi người dùng nhấp chuột.

78
00:06:40,980 --> 00:06:42,920
Vì vậy, bạn có thể xem làm thế nào để đọc cú pháp.

79
00:06:42,920 --> 00:06:47,470
Vì vậy, điều này nói, cho nút băng chuyền tạm dừng,

80
00:06:47,470 --> 00:06:53,510
nếu một hành động nhấp chuột được thực hiện bởi người dùng, sau đó thực hiện

81
00:06:53,510 --> 00:07:01,000
chức năng đặc biệt này mà tôi chỉ định bên trong mã này ở đây.

82
00:07:01,000 --> 00:07:03,140
Chức năng mà tôi muốn làm là gì?

83
00:07:03,140 --> 00:07:05,324
Tôi muốn có thể,

84
00:07:09,144 --> 00:07:15,200
tạm dừng Carousel.

85
00:07:15,200 --> 00:07:20,665
Vì vậy, chúng tôi sẽ nói, carousel ('tạm bời').

86
00:07:21,860 --> 00:07:29,884
Vì vậy, bây giờ bạn thấy làm thế nào bạn đã sử dụng các điều khiển dựa trên jQuery.

87
00:07:29,884 --> 00:07:36,020
Các điều khiển JavaScript được đưa ra cho thành phần Bootstrap Carousel và

88
00:07:36,020 --> 00:07:41,611
viết một số mã để có thể kiểm soát Carousel.

89
00:07:41,611 --> 00:07:46,060
Tương tự như vậy, tôi muốn có thể kích hoạt nút phát.

90
00:07:46,060 --> 00:07:48,410
Vì vậy, khi nút phát được nhấp,

91
00:07:48,410 --> 00:07:52,380
tôi muốn hành động trượt của Carousel để tiếp tục.

92
00:07:52,380 --> 00:07:56,950
Vì vậy, tôi sẽ chỉ đơn giản là sao chép mã này, dán nó ở đó.

93
00:07:56,950 --> 00:08:00,720
Và sau đó tôi sẽ nói carousel-play,

94
00:08:00,720 --> 00:08:07,130
nhấp vào chức năng carousel của tôi và sau đó chức năng nói carousel ('chu kỳ').

95
00:08:07,130 --> 00:08:12,477
Đó là cách bạn chỉ định rằng Carousel

96
00:08:12,477 --> 00:08:16,850
nên tiếp tục trượt như trước.

97
00:08:16,850 --> 00:08:21,620
Vì vậy, một trong những chức năng này chúng tôi đang gắn vào nút chơi ở đây.

98
00:08:21,620 --> 00:08:23,380
Vì vậy, với hai,

99
00:08:23,380 --> 00:08:28,800
chức năng của chúng tôi được giới thiệu bên trong chức năng sẵn sàng tài liệu này.

100
00:08:28,800 --> 00:08:33,870
Tất cả các bạn đã thiết lập cho Carousel để được kích hoạt,

101
00:08:33,870 --> 00:08:38,690
và hai nút để có thể kiểm soát hành vi của Carousel của chúng tôi.

102
00:08:38,690 --> 00:08:43,240
Vì vậy, chúng ta hãy hiển thị những thay đổi, và đi và có một cái nhìn vào hành vi của Carousel của chúng tôi.

103
00:08:44,570 --> 00:08:50,084
Đi đến trang của chúng tôi, bây giờ bạn thấy rằng Carousel của bạn đang di chuyển rất nhanh,

104
00:08:50,084 --> 00:08:55,603
bởi vì tôi đặt khoảng thời gian là 2.000 mili giây hoặc 2 giây.

105
00:08:55,603 --> 00:08:59,640
Vì vậy, mỗi hai giây, bạn sẽ thấy hành động trượt của Carousel.

106
00:08:59,640 --> 00:09:01,380
Điều này chắc chắn là khó chịu.

107
00:09:01,380 --> 00:09:05,410
Vì vậy, hãy để tôi tạm dừng điều đó bằng cách nhấp vào nút tạm dừng.

108
00:09:05,410 --> 00:09:11,080
Vì vậy, khi bạn nhấp vào nút tạm dừng, hành động trượt của Carousel của bạn sẽ bị tạm dừng.

109
00:09:11,080 --> 00:09:15,080
Bởi vì khi bạn nhấp vào nút tạm dừng, sau đó chức năng mà chúng tôi

110
00:09:16,820 --> 00:09:21,360
giới thiệu trong mã JavaScript đi vào hoạt động và

111
00:09:21,360 --> 00:09:24,520
sau đó tạm dừng chuyển động của Carousel.

112
00:09:24,520 --> 00:09:28,354
Bây giờ, nếu bạn muốn tiếp tục, nhấp vào nút phát và

113
00:09:28,354 --> 00:09:31,980
sau đó Carousel sẽ tiếp tục chuyển động của nó.

114
00:09:31,980 --> 00:09:37,044
Vì vậy, như bạn có thể thấy, thời điểm bạn nhấp vào một nút phát, băng chuyền bắt đầu di chuyển.

115
00:09:37,044 --> 00:09:43,125
Bây giờ, tất nhiên, bạn có thể cải thiện nhiều hơn về cách bạn tạo các nút này và như vậy,

116
00:09:43,125 --> 00:09:48,350
nhưng đây là một cách đơn giản mà chúng tôi có thể giới thiệu để kiểm soát Carousel của chúng tôi.

117
00:09:50,110 --> 00:09:55,400
Bài tập này minh họa cho bạn cách chúng tôi có thể sử dụng mã JavaScript

118
00:09:55,400 --> 00:10:00,650
để có thể kiểm soát các thành phần dựa trên JavaScript Bootstrap của chúng tôi.

119
00:10:00,650 --> 00:10:03,933
Đây là thời điểm tốt để làm một nhận xét về

120
00:10:03,933 --> 00:10:08,365
mã của bạn với thông điệp Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[ NHẠC]