1
00:00:03,580 --> 00:00:09,250
В предшествующей лекции мы увидели несколько способов раскрытия контента пользователям.

2
00:00:09,250 --> 00:00:11,870
Таким образом, это будет наложение поверх

3
00:00:11,870 --> 00:00:15,285
вашей веб-страницы, чтобы показать информацию пользователям.

4
00:00:15,285 --> 00:00:17,880
Итак, мы рассмотрим два из этих подходов,

5
00:00:17,880 --> 00:00:21,575
Tooltips и Modals в этом упражнении.

6
00:00:21,575 --> 00:00:25,300
Во-первых, мы добавим всплывающую подсказку на эту страницу.

7
00:00:25,300 --> 00:00:29,040
Итак, перейдя к index.html и в Jumbotron,

8
00:00:29,040 --> 00:00:33,305
мы видим эту кнопку в Jumbotron там.

9
00:00:33,305 --> 00:00:36,000
К этой кнопке я собираюсь добавить всплывающую подсказку.

10
00:00:36,000 --> 00:00:38,125
Итак, перейдя в эту кнопку,

11
00:00:38,125 --> 00:00:44,380
то, что я буду делать сейчас, просто перейдите в следующую строку,

12
00:00:44,380 --> 00:00:50,420
чтобы было немного яснее написать код там и в эту кнопку,

13
00:00:50,420 --> 00:00:53,535
я собираюсь ввести всплывающую подсказку здесь.

14
00:00:53,535 --> 00:00:57,740
Итак, после предупреждения кнопки, я бы сказал,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip, чтобы вы могли видеть, что

16
00:01:04,550 --> 00:01:12,230
компонент javascript, который используется здесь, а затем data-html-true.

17
00:01:12,230 --> 00:01:17,630
Итак, если мы применим этот атрибут HTML данных и отправим его в true, это

18
00:01:17,630 --> 00:01:21,965
означает, что содержимое всплывающей подсказки может быть стилизовано с помощью

19
00:01:21,965 --> 00:01:27,060
HTML, а затем они скажут следующую строку,

20
00:01:27,060 --> 00:01:31,165
я дам атрибут заголовка.

21
00:01:31,165 --> 00:01:35,680
Таким образом, это место, где содержимое всплывающей подсказки будет заключено.

22
00:01:35,680 --> 00:01:42,090
Так что мы скажем «или позвоним нам».

23
00:01:45,810 --> 00:01:52,950
Итак, вы можете видеть, что я использую HTML для

24
00:01:52,950 --> 00:02:02,510
форматирования содержимого всплывающей подсказки там.

25
00:02:06,070 --> 00:02:16,315
Таким образом, всплывающая подсказка вводится в кнопку там, а также последний атрибут, который

26
00:02:16,315 --> 00:02:26,095
я дам, - это размещение данных, которое я дам внизу здесь.

27
00:02:26,095 --> 00:02:32,700
Таким образом, это означает, что эта всплывающая подсказка будет показана внизу этой кнопки.

28
00:02:32,700 --> 00:02:36,815
После добавления этого в кнопку,

29
00:02:36,815 --> 00:02:38,610
мы теперь перейдем и

30
00:02:38,610 --> 00:02:45,130
добавим код JavaScript в нижней части этой страницы, чтобы активировать эту всплывающую подсказку.

31
00:02:45,130 --> 00:02:47,505
Перейдя к нижней части страницы,

32
00:02:47,505 --> 00:02:57,470
позвольте мне представить сценарий там, добавив теги для скрипта.

33
00:02:57,470 --> 00:03:04,665
Внутри этого мы определим фактический код JavaScript здесь.

34
00:03:04,665 --> 00:03:07,790
Так что скажем долларовые документы.

35
00:03:07,790 --> 00:03:13,910
Таким образом, этот скрипт использует синтаксис jQuery здесь.

36
00:03:15,890 --> 00:03:20,880
Таким образом, это указывает, когда документ готов,

37
00:03:20,880 --> 00:03:23,810
когда этот конкретный HTML-документ готов

38
00:03:23,810 --> 00:03:28,775
для рендеринга и определить вызов этой конкретной функции здесь.

39
00:03:28,775 --> 00:03:32,790
Таким образом, мы поставляем функцию JavaScript для

40
00:03:32,790 --> 00:03:37,780
вызова в этот момент, поэтому мы будем указывать нашу функцию, а затем мы скажем

41
00:03:38,570 --> 00:03:51,510
в скобках data-toggle-tooltip и всплывающая подсказка.

42
00:03:53,240 --> 00:04:01,315
Итак, это код, который мы собираемся ввести на этой странице здесь.

43
00:04:01,315 --> 00:04:09,255
Это в синтаксисе jQuery, и мы рассмотрим jQuery немного больше в следующем модуле.

44
00:04:09,255 --> 00:04:13,995
На данный момент это указывает, что везде, где есть атрибут

45
00:04:13,995 --> 00:04:19,650
такого рода для этого конкретного HTML-тега,

46
00:04:19,650 --> 00:04:21,570
включайте всплывающую подсказку.

47
00:04:21,570 --> 00:04:25,420
Итак, но это изменение сохранит изменения, а

48
00:04:25,420 --> 00:04:30,510
затем пойдет и посмотрим, как выглядит всплывающая подсказка на веб-странице.

49
00:04:30,510 --> 00:04:32,760
Переходя на веб-страницу,

50
00:04:32,760 --> 00:04:36,600
теперь, когда мы держим наш указатель мыши на шаблон здесь,

51
00:04:36,600 --> 00:04:40,755
вы можете увидеть, что всплывающая подсказка отображается внизу здесь.

52
00:04:40,755 --> 00:04:44,950
Итак, вы можете заметить, что содержание этой подсказки является

53
00:04:44,950 --> 00:04:50,115
именно тем, что мы дали в качестве атрибута заголовка для этого дна.

54
00:04:50,115 --> 00:04:54,095
Таким образом, мы можем добавить всплывающие подсказки на нашу страницу.

55
00:04:54,095 --> 00:04:58,030
Подсказки являются хорошим способом предоставления некоторой дополнительной информации для

56
00:04:58,030 --> 00:05:03,370
пользователя, когда пользователь переходит в разные места на странице.

57
00:05:03,370 --> 00:05:06,790
Продолжая упражнение, на следующем шаге,

58
00:05:06,790 --> 00:05:10,045
мы собираемся создать модальный в нашей веб-странице.

59
00:05:10,045 --> 00:05:17,665
Этот модальный будет содержать форму входа и будет показан с помощью ссылки в их навигационной панели.

60
00:05:17,665 --> 00:05:19,720
Итак, чтобы начать работу,

61
00:05:19,720 --> 00:05:26,700
bootstrap советует, чтобы весь модальный связанный код был помещен в верхней части вашей страницы.

62
00:05:26,700 --> 00:05:31,530
Итак, я собираюсь войти и написать ниже навигационной панели здесь,

63
00:05:31,530 --> 00:05:34,455
я собираюсь поместить в код для модального там.

64
00:05:34,455 --> 00:05:36,080
Поэтому, чтобы создать модальный,

65
00:05:36,080 --> 00:05:43,400
я начну с того, что скажу div ID login modal.

66
00:05:43,400 --> 00:05:48,355
Итак, мы даем идентификатор этому модальному, чтобы он мог быть вызван

67
00:05:48,355 --> 00:05:53,895
ссылкой на навигационную панель, а затем класс как «модальное затухание».

68
00:05:53,895 --> 00:05:56,910
Таким образом, вы видите, что класс модальный, а fade означает,

69
00:05:56,910 --> 00:06:00,220
что, когда модальный выводится на экран,

70
00:06:00,220 --> 00:06:07,185
он исчезает на экране, и роль является диалогом.

71
00:06:07,185 --> 00:06:11,625
Таким образом, это означает, что он отображается в верхней части страницы.

72
00:06:11,625 --> 00:06:14,195
Давайте закроем div части.

73
00:06:14,195 --> 00:06:18,415
Так что внутри здесь, мы собираемся создать модальный.

74
00:06:18,415 --> 00:06:28,510
Итак, там я собираюсь создать второй div с классом в качестве модального диалога, а затем

75
00:06:28,510 --> 00:06:32,620
внутри здесь мы определим содержание

76
00:06:32,620 --> 00:06:39,550
фактического модального здесь и закроем div.

77
00:06:39,550 --> 00:06:45,220
И так, это должно быть модальное содержание будет структурировано здесь.

78
00:06:45,220 --> 00:06:51,370
Итак, внутри этого модального диалога мы создадим еще один div с

79
00:06:51,370 --> 00:07:00,770
классом модального содержимого и

80
00:07:00,770 --> 00:07:10,350
закроем div, а типичный модальный будет содержать модальный заголовок.

81
00:07:10,350 --> 00:07:14,255
Итак, вот где будет размещен следующий div.

82
00:07:14,255 --> 00:07:23,635
А затем модальное тело

83
00:07:23,635 --> 00:07:28,980
, которое будет содержать большую часть модального связанного содержимого.

84
00:07:28,980 --> 00:07:34,835
Все эти разделы модального являются необязательными,

85
00:07:34,835 --> 00:07:38,020
но, по крайней мере, у вас должен быть один такой раздел в вашем

86
00:07:38,020 --> 00:07:41,645
модальном, иначе нет смысла создавать модальный там.

87
00:07:41,645 --> 00:07:46,455
Таким образом, с этим структура модального теперь готова.

88
00:07:46,455 --> 00:07:50,550
Итак, мы собираемся войти и заполнить содержание в этот модальный.

89
00:07:50,550 --> 00:07:54,005
Итак, теперь нам нужно определить, что идет в модальный.

90
00:07:54,005 --> 00:07:57,505
Теперь в заголовке мы собираемся поставить кнопку,

91
00:07:57,505 --> 00:08:01,770
кросс-кнопку в модальном, который при нажатии будет отклонять модальный.

92
00:08:01,770 --> 00:08:05,715
Это обычный способ разработки модалов.

93
00:08:05,715 --> 00:08:08,805
И модальное тело само будет содержать форму.

94
00:08:08,805 --> 00:08:12,610
Теперь модальный может содержать все, что вы хотите, так что, например,

95
00:08:12,610 --> 00:08:16,040
если вы

96
00:08:16,040 --> 00:08:19,630
нажмете на изображение в галерее изображений и хотите показать больший размер изображения,

97
00:08:19,630 --> 00:08:24,415
даже там вы можете использовать модальный для отображения информации.

98
00:08:24,415 --> 00:08:26,280
Теперь в этом упражнении,

99
00:08:26,280 --> 00:08:31,765
мы будем использовать модальный для размещения формы, которая показана для пользователя.

100
00:08:31,765 --> 00:08:35,695
Хорошо, теперь, в модальном заголовке,

101
00:08:35,695 --> 00:08:40,175
мы собираемся ввести кнопку с

102
00:08:40,175 --> 00:08:49,170
кнопкой типа и закрыть класс.

103
00:08:49,170 --> 00:08:59,080
Итак, вы видите, что это кнопка, которая используется для закрытия модального, а затем вы скажете,

104
00:08:59,080 --> 00:09:04,685
data dismiss, а затем модальный.

105
00:09:04,685 --> 00:09:07,180
Итак, это означает, что эта конкретная кнопка

106
00:09:07,180 --> 00:09:09,845
при нажатии будет отклонять модальный с экрана.

107
00:09:09,845 --> 00:09:18,700
И эта кнопка, я собираюсь использовать время,

108
00:09:21,100 --> 00:09:24,900
будет отображаться как крест в модальностях здесь.

109
00:09:24,900 --> 00:09:27,380
Так что я бы сказал раз здесь.

110
00:09:27,380 --> 00:09:30,549
Перед этой кнопкой мы собираемся ввести

111
00:09:30,549 --> 00:09:36,470
заголовок, который мы будем отображать в заголовке модального, поэтому я

112
00:09:36,470 --> 00:09:46,180
начну с h4 с классом модального заголовка.

113
00:09:46,180 --> 00:09:48,635
И затем внутри этого h4

114
00:09:48,635 --> 00:09:52,200
я включу название модального,

115
00:09:52,200 --> 00:09:56,995
который является логином, потому что это покажет форму входа.

116
00:09:56,995 --> 00:10:01,625
Теперь, когда мы поместили некоторые детали в этот модальный,

117
00:10:01,625 --> 00:10:06,110
давайте добавим ссылку в нашу навигационную панель, которая

118
00:10:06,110 --> 00:10:07,770
вызовет этот модальный, а затем мы будем иметь

119
00:10:07,770 --> 00:10:11,515
быстрый взгляд на то, как модальный выглядит на экране.

120
00:10:11,515 --> 00:10:14,280
Перейдя к навигационной панели,

121
00:10:14,280 --> 00:10:16,095
сразу после UL здесь,

122
00:10:16,095 --> 00:10:17,845
я собираюсь включить в

123
00:10:17,845 --> 00:10:22,910
ссылку, которая может быть использована для запуска показа и скрытия модального.

124
00:10:22,910 --> 00:10:31,080
Поэтому, чтобы сделать это, я войду и использую span с классом navbar-text.

125
00:10:31,080 --> 00:10:37,950
Это то, что позволяет мне включить ссылку в навигационную панель и показать ее как текст.

126
00:10:37,950 --> 00:10:39,995
Итак, внутри диапазона

127
00:10:39,995 --> 00:10:45,345
я буду использовать A с переключателем данных,

128
00:10:45,345 --> 00:10:50,010
поэтому вы можете увидеть, как включается переключатель данных JavaScript, а

129
00:10:50,010 --> 00:10:55,400
переключение данных - для модального, а затем для цели данных.

130
00:10:55,400 --> 00:11:03,940
Вы помните, что мы дали ID как логин модальный для наши-

131
00:11:04,170 --> 00:11:06,460
модальный, который мы включили.

132
00:11:06,460 --> 00:11:11,950
Итак, я собираюсь использовать это как мою цель данных с хэшем перед этим.

133
00:11:11,950 --> 00:11:15,815
И внутри здесь, я войду и использую

134
00:11:15,815 --> 00:11:24,520
шрифт удивительный значок для входа в систему.

135
00:11:24,520 --> 00:11:28,710
Итак, это шрифт удивительный

136
00:11:28,800 --> 00:11:37,945
значок «fa- sign-in» и сказать логин и закрыть e-tech.

137
00:11:37,945 --> 00:11:43,975
Таким образом, давайте сохраним изменения и взглянем на веб-страницу.

138
00:11:43,975 --> 00:11:47,265
Перейдя на нашу веб-страницу в браузере,

139
00:11:47,265 --> 00:11:50,530
вы теперь видите, что на правом краю

140
00:11:50,530 --> 00:11:56,680
вы видите этот логин с этим значком, созданным там.

141
00:11:56,680 --> 00:12:00,850
Таким образом, это ссылка, которая будет инициировать отображение модального.

142
00:12:00,850 --> 00:12:02,530
Поэтому, если я нажму на эту ссылку,

143
00:12:02,530 --> 00:12:05,015
то модальный отобразится на экране.

144
00:12:05,015 --> 00:12:08,500
Поэтому обратите внимание, что когда мы создали этот модальный, мы сказали,

145
00:12:08,500 --> 00:12:14,565
заголовок, который содержал логин, а затем эту кнопку, а затем тело

146
00:12:14,565 --> 00:12:17,605
, в настоящее время пустое, мы собираемся ввести больше кода там.

147
00:12:17,605 --> 00:12:20,860
Теперь, если вы нажмете на эту кнопку, модальный исчезнет.

148
00:12:20,860 --> 00:12:23,170
Нажмите на это снова, модальный отображается.

149
00:12:23,170 --> 00:12:25,470
Даже если вы нажимаете за пределами модального, модальный исчезнет.

150
00:12:25,470 --> 00:12:30,985
Таким образом, это поведение модального, что мы пришли ожидать.

151
00:12:30,985 --> 00:12:36,275
Теперь, на следующем шаге я собираюсь войти и представить форму здесь.

152
00:12:36,275 --> 00:12:39,990
Я не собираюсь объяснять детали формы, потому что вы

153
00:12:39,990 --> 00:12:43,924
уже изучали формы на одном из предыдущих уроков.

154
00:12:43,924 --> 00:12:47,830
Поэтому я просто собираюсь просто войти и вставить код формы, а

155
00:12:47,830 --> 00:12:52,370
затем мы посмотрим на форму в модальном здесь.

156
00:12:52,370 --> 00:12:54,505
Возвращаясь к коду,

157
00:12:54,505 --> 00:12:57,640
теперь вы можете видеть, что в

158
00:12:57,640 --> 00:13:01,115
модальном теле я заполнил форму.

159
00:13:01,115 --> 00:13:07,850
И тогда у меня есть две группы форм здесь с вводом с типом электронной почты

160
00:13:07,850 --> 00:13:14,795
и паролем типа ввода, а затем у меня есть флажок здесь, который у меня есть.

161
00:13:14,795 --> 00:13:21,970
Таким образом, это должно быть легко для вас, чтобы расшифровать, что эта форма представляет собой структуру кода EE, исходя

162
00:13:21,970 --> 00:13:26,505
из вашего понимания того, как создаются формы Bootstrap.

163
00:13:26,505 --> 00:13:28,250
Я поставил две пуговицы.

164
00:13:28,250 --> 00:13:33,060
Один - кнопка отправки, а другой - кнопка отмены.

165
00:13:33,060 --> 00:13:36,440
Кнопка отмены имеет первую кнопку.

166
00:13:36,440 --> 00:13:41,580
Кнопка отмены здесь имеет модель отклонения данных.

167
00:13:41,580 --> 00:13:45,215
Таким образом, это означает, что при нажатии на кнопку отмены модель будет уволена.

168
00:13:45,215 --> 00:13:50,170
И другой является кнопкой отправки, которая используется для отправки формы.

169
00:13:50,170 --> 00:13:51,480
Таким образом, с этими изменениями,

170
00:13:51,480 --> 00:13:55,550
давайте сохраним изменения, а затем пойдем и посмотрим на нашу веб-страницу.

171
00:13:55,550 --> 00:13:57,205
Возвращаясь к веб-странице,

172
00:13:57,205 --> 00:14:04,045
теперь вы нажимаете на логин, тогда вы увидите форму для входа пользователя.

173
00:14:04,045 --> 00:14:07,025
Итак, вы увидите, что у вас тут две коробки.

174
00:14:07,025 --> 00:14:09,850
Ввод полей здесь для ввода электронной почты

175
00:14:09,850 --> 00:14:12,870
и пароля, а затем флажок «Запомнить меня».

176
00:14:12,870 --> 00:14:15,320
А потом у вас есть вход и отмена.

177
00:14:15,320 --> 00:14:17,860
Поэтому, если вы нажмете на отмену, модальный уйдет.

178
00:14:17,860 --> 00:14:20,710
Так же, как когда вы нажимаете на крест там.

179
00:14:20,710 --> 00:14:23,915
А затем, если вы заполняете эту информацию и продолжаете кликать на входе,

180
00:14:23,915 --> 00:14:26,120
процесс входа должен быть инициирован.

181
00:14:26,120 --> 00:14:29,885
На данный момент у нас нет сервера для этого,

182
00:14:29,885 --> 00:14:34,640
но я просто показываю вам в Bootstrap, как вы создадите такую форму.

183
00:14:34,640 --> 00:14:37,240
Я уверен, что вы видели такие вещи на

184
00:14:37,240 --> 00:14:40,610
многих веб-сайтах, где, когда вы нажимаете на кнопку входа,

185
00:14:40,610 --> 00:14:43,220
что-то вроде этого с формой появляется на экране

186
00:14:43,220 --> 00:14:46,585
и ожидает, что вы введете информацию.

187
00:14:46,585 --> 00:14:50,160
Теперь вы увидите, как вы можете использовать модели для отображения

188
00:14:50,160 --> 00:14:54,740
информации, накладывающей веб-страницу.

189
00:14:54,740 --> 00:14:57,910
С этим мы завершаем это упражнение.

190
00:14:57,910 --> 00:15:01,950
В этом упражнении мы видели использование подсказок

191
00:15:01,950 --> 00:15:06,835
и мы видели использование моделей для отображения содержимого.

192
00:15:06,835 --> 00:15:14,200
Это хорошее время для вас, чтобы сделать git-commint с подсказками и моделями сообщения.