JavaScript для Bootstrap
Используйте компоненты Bootstrap с 13-ю обычными плагинами jQuery.
JavaScript в Bootstrap
Индивидуальный или компилированный
Если вы загрузили последнюю версию Bootstrap, оба файла bootstrap.js и bootstrap.min.js содержат все плагины, перечисленные на странице.
Атрибуты данных
Вы можете использовать исключительно все плагины Bootstrap с использованием разметки API, не написав ни одной строки JavaScript. API — это первый класс Bootstrap, он должен быть вашим первым решением при выборе плагина.
Это говорит о том, что в некоторых ситуациях желательно выключить полную функциональность. По этой причине мы также предоставляем возможность отключить атрибут данных API путем отсоединения всех событий`’data-api’`. Это выглядит подобным образом:
Кроме того, чтобы выбрать специальный плагин, просто поместите название плагина в поле ввода имён вместе с названием data-api, как показано в примере:
Программный API
Мы также уверены в том, что вам следует использовать абсолютно все плагины Bootstrap, применяя JavaScript API. Все доступные API — это единичные методы, образующие цепочку, они выполняют целые серии действий.
Все методы должны принимать дополнительный объект опций, строку, которая нацелена на конкретный метод, или ничего (что включает в себя плагин с функциями по умолчанию):
События
Все инфинитивные события предотвращают использование функций по умолчанию. Это обеспечивает возможность остановить выполнение действия перед тем, как оно начнется.
Переходы bootstrap-transition.js
О переходах
Для простого эффекта перехода добавьте элемент bootstrap-transition.js к другим файлам JS. Если вы используете компилированный минимизированный элемент bootstrap.js, нет нужды добавлять этот элемент — он уже есть.
Варианты использования
Немного примеров плагина перехода:
Модальные элементы bootstrap-modal.js
Примеры
Модальные элементы — это хорошо налаженные, но гибкие, с окнами подсказок, с минимальными функциональными требованиями и толковыми настройками по умолчанию.
Статичный пример
Модальный элемент отображается с заголовком, телом, и набором действий в нижнем колонтитуле.
Заголовок модального элемента
Некое изящное тело…
Заголовок модального элемента
Некое изящное тело……
Демонстрация
Переключите модальный элемент JavaScript нажатием кнопки внизу. Элемент соскользнет вниз и появится поверх затененной страницы.
Заголовки модальных элементов
Текст в модальном элементе
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.
Информационный блок
Эта кнопка должна запустить информационный блок при наведении курсора.
Всплывающие подсказки в модальных элементах.
Эта ссылка и та ссылка должны показывать всплывающую подсказку при наведении курсора..
При вводе слишком большого фрагмента текста появляется полоса прокрутки.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
id = «myModalLabel» > Заголовок модального элемента
Некое изящное тело…
Использование
Как атрибут данных
Активируйте модальный элемент без использования JavaScript. Установите data-toggle=»modal» в элемент контроллера, как кнопку, вместе с data-target=»#foo» или href=»#foo» чтобы указать на конкретный модальный элемент для переключения.
С помощью JavaScript
Вызовите модальный элемент с id myModal одной строкой JavaScript:
Опции
Методы
.modal(options)
.modal(‘toggle’)
Позволяет переключать модальный элемент вручную.
.modal(‘show’)
Позволяет открыть модальный элемент вручную.
.modal(‘hide’)
Позволяет скрыть модальный элемент вручную.
События
Bootstrap поддерживает вызов событий для работы с всплывающими элементами..
Выпадающие списки меню bootstrap-dropdown.js
Примеры
Добавляйте выпадающие списки к любому элементу, включая панель навигации, вкладки и кнопки.
В панели навигации
Во вкладках
Использование
С помощью атрибутов данных
Добавьте data-toggle=»dropdown» к ссылке или кнопке, чтобы переключить выпадающий список.
С помощью JavaScript
Вызовите выпадающий список при помощи JavaScript:
Опции
Методы
$().dropdown()
Программный api для активации меню для заданной панели или таблицы навигации.
Слежение за перемещением по странице bootstrap-scrollspy.js
Пример панели навигации
Плагин ScrollSpy предназначен для автоматического обновления элементов навигации, основанных на прокрутке. Прокрутите текст внутри элемента ниже, для демонстрации работы плагина. Элементы, включенные в выпадающий список, также обновляются..
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney’s vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney’s quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney’s proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven’t heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven’t heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Использование
С помощью атрибутов данных
Полное руководство по HTML-атрибутам data-*
Общие сведения
HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.
При этом не рекомендуется создавать собственные атрибуты, или применять существующие атрибуты такими способами, на которые они не рассчитаны.
Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.
Синтаксис
Можно ли использовать атрибут, имеющий имя data?
Вот пример кода, в котором используется атрибут с именем data :
Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.
Чего не стоит делать с атрибутами data-*
Вот материал о том, как скрывать элементы веб-страниц.
Стилизация элементов с использованием атрибутов data-*
В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.
Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList ), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.
Специфичность селекторов атрибутов
Специфичность селекторов атрибутов такая же, как у классов. Специфичность часто рассматривают как значение, состоящее из 4 частей:
А вот ещё один селектор:
Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.
1 тег, 1 класс и 1 атрибут
У селекторов атрибутов специфичность ниже, чем у идентификаторов ( ID ), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.
Значения атрибутов, нечувствительные к регистру
Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.
Вывод данных, хранящихся в атрибутах data-*
CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
Примеры использования атрибутов data-* для стилизации элементов
Вот соответствующий CSS-код:
А вот — фрагмент результирующей страницы.
Grid-контейнеры, настройка которых производится с помощью атрибутов data-*
Поэкспериментировать с этим примером можно на CodePen.
Работа с атрибутами data-* в JavaScript
К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.
Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):
Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так:
В JavaScript можно работать и со встроенными в элементы наборами данных:
А почему бы не записать в атрибут data-* JSON-данные? Ведь это всего лишь строки, которые можно отформатировать как валидные JSON-данные (учитывая кавычки и прочее). При необходимости эти данные можно извлечь из атрибута и распарсить.
Об использовании атрибутов data-* в JavaScript
Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like :
Итоги
Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?
Использование data-атрибутов в HTML, CSS, JavaScript и jQuery
Использование data-атрибутов в HTML и CSS
Для того чтобы записать data-атрибуты в HTML, не нужно придумывать ничего нового. Поскольку это стандартный для HTML5 атрибут, то в любом открывающем теге вы ставите пробел после названия этого тега или другого атрибута, записываете обязательный префикс data- и добавляете любое слово, связанное по смыслу с тем значением, которое вы хотите в этот атрибут поместить.
Например, атрибуты data-text-top и data-text-bottom в разметке ниже нужны для того, чтобы использовать текст в них сверху и снизу в выезжающих при наведении на фото псевдоэлементах ::before и ::after, соответственно.
Результат использования data-атрибутов в HTML и CSS можно посмотреть ниже. Для этого нужно навести курсор мыши на любое изображение.
See the Pen by Elen (@ambassador) on CodePen.0
Использование data-атрибутов в JavaScript и jQuery.
И это все, что нужно сделать для работы плагина, не считая подключения файлов jQuery и файлов самого плагина Fancybox.
Ранее для аналогичных целей разработчики часто использовали атрибут class или создавали нестандартные атрибуты, но атрибут class на самом деле не предназначен для этого, да и на нестандартную разметку «ругается» валидатор W3C. С введением же data-атрибутов в HTML5 сохранять и извлекать пользовательские данные из HTML стало действительно легко и приятно, тем более, что для этого есть свойства и методы как в JavaScript, так и в jQuery. Рассмотрим их подробнее.
Доступ к data-атрибутам с помощью нативного JavaScript
Рассмотрим эти способы нативнного JavaScript подробнее.
Свойство HTMLElement.dataset
Свойство dataset (набор данных в переводе с английского) позволяет легко получить доступ к атрибутам данных любого html-элемента. Рассмотрим следующий пример.
Методы getAttribute()/setAttribute()
Теперь давайте посмотрим, как можно использовать метод getAttribute(‘attribute’) для получения значения data-атрибутов и метод setAttribute(‘attribute’, ‘value’) для добавления data-атрибута с нужным значением. Перепишем код примера, представленного выше.
Доступ к атрибутам данных с помощью jQuery. Метод data()
Пример решения задачи с составными условиями и data-атрибутами
В статье «Простые задачи по JavaScript» вы можете найти задачу на составные условия, в которой нужно написать код, проверяющий ответы пользователя на 4 вопроса и предлагающий ему определенные книги. Задачу можно решить с помощью ряда условий if. else, использования массивов объектов и методов для работы с массивами, но также можно сделать список с data-атрибутами, имеющими значение 0 или 1. А список вопросов представить с помощью нескольких флажков. Вариант решения будет таким:
Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.
Работа с data атрибутами в HTML/CSS/JS
Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.
Использование data атрибутов в HTML и CSS
Как добавить data атрибут к HTML тегу
Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.
Длина названия data атрибута может быть любой, слова должны разделяться через дефис.
Пример стилизации элементов с data атрибутом
Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.
// CSS код
// селектор по названию атрибута
[data-size=»large»] <
font-size: 30px;
padding: 20px;
>
// селектор по тегу и названию
div [data-size=»large»] <
font-size: 30px;
padding: 20px;
>
// селектор по классу и названию
large_btn.[data-size=»large»] <
font-size: 30px;
padding: 20px;
>
Принцип создания подсказок с data атрибутом на CSS
Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.
[data-tooltip]::after <
content: attr(data-tooltip);
>
Использование data атрибутов в JavaScript
В JS существует, как минимум два способа получения data атрибута:
Первый способ, через getAttribute и setAttribute
Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.
Метод setAttribute добавляет значение, указанное вторым параметром («pillows») в data атрибут в первом параметре («data-filter»).
Второй способ, через объект dataset в структуре DOM
Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).
// Получение data атрибута
div.dataset.person
// Добавление значения для data атрибута
div.dataset.person = «Donald»
Итоги
Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как использовать data-атрибуты HTML5
Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:
Наш JavaScript код будет искать элемент с ID msglist. С помощью скрипта мы будем искать классы, начинающиеся с user_, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.
Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):
Data-атрибуты HTML5
К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data-, например:
Пример №1 обработки на JavaScript: getAttribute и setAttribute
Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:
Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.
Пример №2 обработки на JavaScript: метод data() библиотеки jQuery
Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data-, так что подобный код будет работать:
Пример №3 обработки на JavaScript: API для работы с наборами данных
И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:
| Имя атрибута | Имя в API набора данных |
| data-user | user |
| data-maxage | maxage |
| data-list-size | listSize |
Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь, но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/use-html5-data-attributes/
Перевел: Станислав Протасевич
Урок создан: 14 Марта 2014
Просмотров: 77469
Правила перепечатки
5 последних уроков рубрики «HTML5»
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
