Предыдущий ролик Следующий ролик  

Видео урок: Создание поля для комментариев

Bootstrap 3: добавь интерактивность на свой сайт

Итак, следующее, что я хотела бы отформатировать в нашей форме обратной связи, - это поле для комментариев. Сейчас метка "Comments" находится рядом с полем. Это не очень красиво. Поэтому я хочу расположить их вертикально, как расположены все остальные элементы на странице, чтобы метка "Comments" находилась над полем ввода. Это я и собираюсь сейчас сделать. Еще кое-что, что я хочу видеть на этой странице, - это подсказки. Когда пользователь выберет то или иное поле на этой странице, мы можем предоставлять ему дополнительную информацию об этом поле, о требуемом формате данных или что-то еще.

В Bootstrap есть встроенные подсказки. Они являются частью коллекции JavaScript. И на этой странице они совсем не помешают. Итак, я собираюсь показать вам, как добавить подсказку к полю для комментариев. Давайте перейдем в Sublime Text и найдем строку 102. Это блок с form-group, с которого начинается поле для комментариев. В строке 103 к тегу label мы добавим атрибут for со значением comments, которое, конечно, совпадает с именем текстовой области.

А также мы присвоим ему класс control-label. Он отформатирует нашу метку. Затем к самому тегу textarea мы добавим класс form-control. Мы также можем добавить к нему атрибут row. От него будет зависеть размер поля. Итак, если вы сохраните страницу и обновите ее в браузере, то поле для комментариев должно расположиться чуть выше и растянуться в ширину, как и другие элементы на этой странице.

Таким образом мы получили поле для комментариев, с которым нам уже будет удобно работать. Теперь я хочу добавить к нему всплывающую подсказку. Для этого давайте вернемся в Sublime Text и сделаем следующее. Мы добавим в тег textarea атрибут данных. Опять же, это атрибут data-toggle, который будет содержать значение tooltip. Он свяжет эту конкретную текстовую область с кодом JavaScript, который будет отображать подсказку на странице.

Теперь нам нужно определиться с текстом подсказки. Это можно сделать с помощью атрибута title. Внутри этого атрибута вы можете написать что угодно. Я просто напишу, что мы рады вашим отзывам. И наконец, последний атрибут данных - data-placement. Подсказка может появиться в четырех местах. Сверху, снизу, слева или справа от элемента, к которому она относится.

Я помещу ее снизу, но конечно, вы можете выбрать любой другой вариант, какой вам нравится. Давайте сохраним то, что уже есть, а затем добавим еще одну вещь. Нам нужно уточнить, где именно должен запускаться код JavaScript, который требуется для всплывающей подсказки. Если на этой странице будет постоянно запускаться JavaScript и искать подсказки для каждой формы или каждого тега HTML, то для него потребуется много ресурсов. Поэтому мы собираемся добавить немного кода JavaScript внизу страницы, чтобы указать, где код JavaScript для подсказок должен искать подсказку.

Итак, прокрутим страницу вниз еще раз. Сразу после строки 126, где у нас есть вызов к файлу JavaScript из Bootstrap, мы добавим еще один тег сценария. Этот код будет вызывать подсказки в конкретной области. Для него требуется обычный формат jQuery, где мы создаем селектор и после точки пишем, что мы хотим вызвать функцию tooltip. И мы не будем передавать в него никаких аргументов. Вот такой формат. И тут возникает вопрос - для чего здесь этот селектор? Безусловно, сюда можно добавить какой-нибудь класс, примененный к текстовой области, но это единственная текстовая область на странице, так зачем усложнять? Давайте просто добавим в селектор тег textarea. Итак, мы просто добавим textarea в кавычках.

Сейчас давайте сохраним страницу. Затем вернемся к нашей контактной форме и обновим ее. Теперь, когда вы наведете курсор на область для комментариев, вы должны увидеть всплывающую подсказку. И вот она, прямо внизу. В ней написано, что мы рады вашим отзывам. Конечно, это тот текст, который был задан в атрибуте title. Вот так очень быстро и просто можно добавить подсказку к полю для комментариев. Эту подсказку можно также легко добавить к любому другому полю на этой странице, а также вы, конечно, можете поэкспериментировать и добавить ее и к другим элементам.

Но если вы сделаете это, не забудьте добавить эти новые HTML-теги или классы в селектор функции JavaScript tooltip.