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

2
00:00:04,523 --> 00:00:10,934
Viele der JavaScript-basierten Komponenten des Bootstrap bieten uns einen Mechanismus,

3
00:00:10,934 --> 00:00:17,070
um einige der Funktionen dieser Komponenten durch das Schreiben von JavaScript-Code zu steuern

4
00:00:17,070 --> 00:00:21,510
, insbesondere durch das Schreiben von Code mit der jQuery-Syntax.

5
00:00:21,510 --> 00:00:26,181
Daher werden wir diese Indexübung untersuchen, indem wir einige

6
00:00:26,181 --> 00:00:30,561
JavaScript-basierte Steuerelemente für unser Karussell verwenden, die wir

7
00:00:30,561 --> 00:00:35,537
in der vorherigen Übung auf der Seite index.html enthalten haben.

8
00:00:37,171 --> 00:00:42,810
In der vorherigen Übung haben wir dieses Karussell in unsere index.html Seite eingeführt.

9
00:00:42,810 --> 00:00:47,260
Was ich in dieser Übung tun möchte, ist, ein paar

10
00:00:47,260 --> 00:00:50,240
Steuertasten in dieses Karussell einzuführen und

11
00:00:50,240 --> 00:00:54,920
dann JavaScript zu verwenden, um diese Schaltflächen zu aktivieren.

12
00:00:54,920 --> 00:00:57,850
Die Tasten würden verwendet werden, um

13
00:00:57,850 --> 00:01:03,350
die Schiebeaktion dieses Karussell zu pausieren und zu spielen.

14
00:01:03,350 --> 00:01:08,410
Also, einschließlich der Schaltfläche in unserem Karussell hier,

15
00:01:08,410 --> 00:01:13,000
können wir auf eine Schaltfläche klicken, um die Gleitaktion des Karussell zu stoppen, und

16
00:01:13,000 --> 00:01:18,070
dann können wir auf eine andere Schaltfläche klicken, um die Gleitaktion des Karussell fortzusetzen.

17
00:01:18,070 --> 00:01:21,390
Also, das ist es, was wir in dieser Übung untersuchen können.

18
00:01:22,520 --> 00:01:26,920
Um mit dieser Übung zu beginnen, gehen wir zur Seite index.html.

19
00:01:26,920 --> 00:01:32,420
Und direkt nach der linken und rechten Steuerung unseres Karussell

20
00:01:32,420 --> 00:01:40,400
werde ich ein div mit der Klasse Button-Gruppe vorstellen.

21
00:01:40,400 --> 00:01:47,023
Dies wird also eine Schaltflächengruppe von zwei Schaltflächen hier einschließen, und dann mit einer ID von,

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

23
00:01:54,224 --> 00:01:59,290
das div dort schließen.

24
00:01:59,290 --> 00:02:03,530
Jetzt, in diesem, werde ich in zwei Tasten hinzufügen.

25
00:02:03,530 --> 00:02:12,385
Also lassen Sie mich einen Knopf mit der Klasse btn, btn-danger,

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

27
00:02:16,910 --> 00:02:24,030
einer ID von Karussell Pause hinzufügen.

28
00:02:24,030 --> 00:02:30,970
Dies wird also als Pause-Taste fungieren, verlangsamt den Knopf dort.

29
00:02:30,970 --> 00:02:36,600
Und für diese Schaltfläche, Ich werde

30
00:02:36,600 --> 00:02:41,201
eine Schriftart als Symbol mit der Klasse fa fa vorstellen,

31
00:02:42,923 --> 00:02:49,410
Pause, und schließen Sie die Spanne.

32
00:02:49,410 --> 00:02:55,790
Dadurch wird eine Pause-Taste in die Gruppe der Karussell-Tasten eingeführt.

33
00:02:55,790 --> 00:03:04,450
Ich werde dies kopieren und es erneut einfügen, um eine weitere Schaltfläche zu erstellen.

34
00:03:04,450 --> 00:03:09,368
Dieser zweite Knopf, ich werde btn btn-Gefahr btn-sm nennen, und

35
00:03:09,368 --> 00:03:12,259
dann wäre das Karussellspiel.

36
00:03:13,300 --> 00:03:17,580
Und die Span-Klasse,

37
00:03:17,580 --> 00:03:21,660
der Knopf wäre, wenn es hier spielen.

38
00:03:23,940 --> 00:03:27,965
Lassen Sie uns sagen, die Änderungen und gehen Sie und werfen Sie einen kurzen Blick auf es auf der Webseite. Wenn

39
00:03:29,180 --> 00:03:34,850
Sie einen Blick auf die Schaltflächen, wie sie in unserem Browser vorhanden

40
00:03:34,850 --> 00:03:39,940
sind, können Sie sehen, dass diese beiden Schaltflächen jetzt in der linken Ecke meines Karussell positioniert sind.

41
00:03:40,970 --> 00:03:44,660
Ich möchte diese Schaltflächen am rechten Rand neu positionieren,

42
00:03:44,660 --> 00:03:51,700
damit es hier nicht zu diesem blauen, leeren Raum unter dem Bild kommt.

43
00:03:51,700 --> 00:03:56,410
Lassen Sie mich also ein paar CSS-Eigenschaften verwenden, um diese Schaltflächen in

44
00:03:56,410 --> 00:03:59,230
der rechten Spalte des Karussell neu zu positionieren.

45
00:04:00,760 --> 00:04:04,140
Gehen Sie zu diesem Stil starten Sie CSS-Datei,

46
00:04:04,140 --> 00:04:08,440
lassen Sie mich hier einige CSS-Code vorstellen.

47
00:04:08,440 --> 00:04:14,166
Also für das Element mit der ID CarouselButtons

48
00:04:14,166 --> 00:04:18,880
positioniere ich es am rechten Rand und unten, 0 Pixel hier.

49
00:04:18,880 --> 00:04:22,280
Also diese beiden und dann die Position ist absolut.

50
00:04:22,280 --> 00:04:28,300
Damit werden diese Knöpfe in der rechten Ecke meines Karussell positioniert.

51
00:04:29,710 --> 00:04:34,280
Offensichtlich wird das Einführen der Knöpfe in das Karussell

52
00:04:34,280 --> 00:04:35,420
keinem Zweck dienen.

53
00:04:35,420 --> 00:04:40,330
Jetzt werden wir die JavaScript-Steuerelemente nutzen,

54
00:04:40,330 --> 00:04:46,310
die das Karussell bereitstellt, indem wir ein wenig jQuery-Code

55
00:04:46,310 --> 00:04:52,204
unten auf der Seite index.html schreiben, damit diese Schaltflächen ihre Arbeit erledigen.

56
00:04:52,204 --> 00:04:57,950
Wir wollen in der Lage sein, die Gleitaktion meines Karussell zu pausieren und wieder aufzunehmen.

57
00:04:58,970 --> 00:05:06,830
Gehen Sie zum Ende der Seite index.html, lassen Sie mich hier ein Skript vorstellen.

58
00:05:06,830 --> 00:05:10,980
Dieses Skript sollte also einen

59
00:05:10,980 --> 00:05:15,750
JavaScript-Code enthalten, der in jQuery-Syntax geschrieben wurde.

60
00:05:15,750 --> 00:05:19,088
Also werde ich sagen,

61
00:05:19,088 --> 00:05:28,664
$ (document) .ready (function), Und

62
00:05:28,664 --> 00:05:33,814
diese Funktion sollte ein paar

63
00:05:33,814 --> 00:05:39,320
Funktionen hier enthalten, um die Schaltflächen zu aktivieren.

64
00:05:39,320 --> 00:05:45,430
Also würde ich sagen, Mykarussell.

65
00:05:45,430 --> 00:05:50,427
Dies ist die ID des Karussell, das wir eingeführt werden,

66
00:05:50,427 --> 00:05:53,099
also würden wir sagen, Karussell,

67
00:05:56,960 --> 00:06:01,804
Intervall: 2000.

68
00:06:01,804 --> 00:06:06,720
Das macht also das Gleitintervall des Karussell

69
00:06:06,720 --> 00:06:10,130
auf 2000 Millisekunden oder 2 Sekunden.

70
00:06:10,130 --> 00:06:12,890
Also mache ich es ein bisschen schneller für

71
00:06:12,890 --> 00:06:16,330
die Gleitaktion im Karussell.

72
00:06:16,330 --> 00:06:20,430
Fahren Sie hier mit dem jQuery-Code fort.

73
00:06:20,430 --> 00:06:26,835
Ich werde jetzt den Pause-Button aktivieren, also werde ich Karussell Pause sagen.

74
00:06:26,835 --> 00:06:31,430
Das ist also die ID, die ich dem Pause-Button gab.

75
00:06:31,430 --> 00:06:34,960
Das ist also der Grund für die Angabe der ID.

76
00:06:34,960 --> 00:06:38,720
Also möchte ich den Pause-Button aktivieren.

77
00:06:38,720 --> 00:06:40,980
Also sage ich, wenn der Benutzer klickt.

78
00:06:40,980 --> 00:06:42,920
So können Sie sehen, wie Sie die Syntax lesen.

79
00:06:42,920 --> 00:06:47,470
Dies sagt also, für die Karussell-Pause-Taste,

80
00:06:47,470 --> 00:06:53,510
wenn eine Klickaktion vom Benutzer ausgeführt wird, dann führen Sie

81
00:06:53,510 --> 00:07:01,000
diese spezielle Funktion aus, die ich in diesem Code hier angebe.

82
00:07:01,000 --> 00:07:03,140
Was ist die Funktion, die ich tun möchte?

83
00:07:03,140 --> 00:07:05,324
Ich will in der Lage sein,

84
00:07:09,144 --> 00:07:15,200
Pausieren Sie das Karussell.

85
00:07:15,200 --> 00:07:20,665
Also würden wir sagen, Karussell ('Pause').

86
00:07:21,860 --> 00:07:29,884
Jetzt sehen Sie, wie Sie die jQuery-basierten Steuerelemente verwendet haben.

87
00:07:29,884 --> 00:07:36,020
Die JavaScript-Steuerelemente, die für die Bootstrap Carousel Komponente gegeben sind und

88
00:07:36,020 --> 00:07:41,611
einige Code geschrieben, um das Karussell steuern zu können.

89
00:07:41,611 --> 00:07:46,060
Ebenso möchte ich in der Lage sein, die Play-Schaltfläche zu aktivieren.

90
00:07:46,060 --> 00:07:48,410
Wenn also auf die Play-Taste geklickt wird,

91
00:07:48,410 --> 00:07:52,380
möchte ich, dass die Schiebeaktion des Karussell fortgesetzt wird.

92
00:07:52,380 --> 00:07:56,950
Also werde ich diesen Code einfach kopieren, ihn dort einfügen.

93
00:07:56,950 --> 00:08:00,720
Und dann würde ich sagen Karussell spielen,

94
00:08:00,720 --> 00:08:07,130
klicken Sie auf Funktion mein Karussell und dann sagt die Funktion Karussell ('Zyklus'). Auf

95
00:08:07,130 --> 00:08:12,477
diese Weise legen Sie fest, dass das Karussell

96
00:08:12,477 --> 00:08:16,850
wieder gleiten soll wie zuvor.

97
00:08:16,850 --> 00:08:21,620
Also diese, diese Funktion, die wir an den Play-Button hier befestigen.

98
00:08:21,620 --> 00:08:23,380
Also mit diesen beiden,

99
00:08:23,380 --> 00:08:28,800
unsere Funktion wird in diesem Dokument ready Funktion eingeführt.

100
00:08:28,800 --> 00:08:33,870
Ihr könnt alle das Karussell aktivieren,

101
00:08:33,870 --> 00:08:38,690
und die beiden Tasten, um das Verhalten unseres Karussell kontrollieren zu können.

102
00:08:38,690 --> 00:08:43,240
Lassen Sie uns also die Veränderungen zeigen und schauen Sie sich das Verhalten unseres Karussell an. Wenn Sie

103
00:08:44,570 --> 00:08:50,084
auf unsere Seite gehen, sehen Sie jetzt, dass sich Ihr Karussell sehr schnell bewegt,

104
00:08:50,084 --> 00:08:55,603
weil ich das Intervall auf 2.000 Millisekunden oder 2 Sekunden eingestellt habe.

105
00:08:55,603 --> 00:08:59,640
So sehen Sie alle zwei Sekunden die Gleitwirkung des Karussell.

106
00:08:59,640 --> 00:09:01,380
Das ist definitiv ärgerlich.

107
00:09:01,380 --> 00:09:05,410
Lassen Sie mich das also pausieren, indem Sie auf den Pause-Button klicken.

108
00:09:05,410 --> 00:09:11,080
Wenn Sie also auf die Pause-Taste klicken, wird die Schiebeaktion Ihres Karussell angehalten.

109
00:09:11,080 --> 00:09:15,080
Denn wenn Sie auf den Pause-Button klicken,

110
00:09:16,820 --> 00:09:21,360
kommt die Funktion, die wir im JavaScript-Code eingeführt haben, in Aktion und

111
00:09:21,360 --> 00:09:24,520
stoppt dann die Bewegung des Karussell.

112
00:09:24,520 --> 00:09:28,354
Nun, wenn Sie fortsetzen möchten, klicken Sie auf den Play-Button und

113
00:09:28,354 --> 00:09:31,980
dann sollte das Karussell seine Bewegung fortsetzen.

114
00:09:31,980 --> 00:09:37,044
Wie Sie sehen können, beginnt das Karussell in dem Moment, in dem Sie auf einen Play-Button klicken.

115
00:09:37,044 --> 00:09:43,125
Nun, natürlich, können Sie mehr zu verbessern, wie Sie diese Tasten erstellen und so weiter,

116
00:09:43,125 --> 00:09:48,350
aber dies ist eine einfache Möglichkeit, die wir vorstellen können, um unser Karussell zu steuern.

117
00:09:50,110 --> 00:09:55,400
Diese Übung veranschaulicht Ihnen, wie wir JavaScript-Code verwenden können,

118
00:09:55,400 --> 00:10:00,650
um unsere Bootstrap JavaScript-basierten Komponenten steuern zu können.

119
00:10:00,650 --> 00:10:03,933
Dies ist ein guter Zeitpunkt, um einen Kommentar

120
00:10:03,933 --> 00:10:08,365
Ihres Codes mit der Nachricht Bootstrap jQuery zu machen.

121
00:10:08,365 --> 00:10:14,422
( MUSIK)