Доброго времени суток всем, кто желает изучить Bootstrap. Сегодняшняя публикация осветит ваш путь к изучению Bootstrap selectpicker. Это малоизвестный инструмент, который относится к Select Plugin. Поэтому я расскажу, что это такое и как его подключить к проекту, перечислю основные элементы управления и конечно же приведу примеры небольших программ. Ну что ж, вперед за обучение!
Знакомство с Bootstrap Select Plugin
Для начала вам стоит знать, что это достаточно новый пользовательский инструмент создания выпадающего списка, который использует знакомый всем dropdown.js для стилизации и внесения дополнительного функционала в стандартный тег <select>.
Для него существует несколько требований: версия подключаемой JavaScript-библиотеки jQuery должна быть не раньше, чем 1.1.8. Далее нужно подключить сам фреймворк или только компонент dropdown.js. И конечно же необходимо прописать подключение стилей Bootstrap-а и bootstrap- select. В противном случае плагин не работает.
Обязательно в хедере веб-страницы помимо наименования последней (например, <title>My Example</title>) и тега <meta> должны быть следующие строки:
<!--Подключение стилевых правил Бутстрапа -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Подключение стилевых правил плагина -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Скрипт Бутстрапа-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Скрипт плагина -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
Поговорим о методах и опциях
Для работы с изучаемым механизмом было предусмотрено большое количество различных методов. Но для начала ознакомьтесь с кодом реализации выпадающего списка:
1 2 3 4 5 6 7 8 | <div class="container"> <select class="selectpicker"> <option>Украинский</option> <option>Русский</option> <option>Английский</option> <option>Французский</option> </select> </div> |
Для того чтобы вызвать какой-либо метод, его название нужно поместить в
$('.selectpicker').selectpicker ()
Вот теперь разберем каждый из них.
Val
Начнем с двуликого метода. «Почему так?» — спросите вы. А все потому что в зависимости от вида вызова он будет выполнять несколько разные действия. Так, вы можете задать значения, используя конструкцию:
.selectpicker ('val', 'Наименование'/ ['Наименование1', 'Наименование2'])
$('.селектор').selectpicker ('val', 'Английский');
Но есть еще и такая конструкция, как
.val (‘Название’)
В этом случае пользовательский интерфейс автоматически не обновится и поэтому придется самостоятельно проводить так называемый re- render.
$('. селектор').val ('Английский');
$('. селектор').selectpicker ('render');
SelectAll
Данная команда позволяет выбрать все пункты из перечня.
Render
С помощью этого метода можно заставить повторить отображение пользовательского интерфейса плагина и таким образом обновить все параметры.
Mobile
Mobile предоставляет возможность пользователям мобильных устройств видеть на своих экранах встроенное раскрывающееся меню. Вызов метода происходит следующим образом:
if ( /BlackBerry|Android|iPhone|webOS|iPod|iPad/i.test (navigator.userAgent) ) {
$('. селектор').selectpicker ('mobile');
}
Refresh
Данный инструмент программно обновляет bootstrap-select в скрипте до соответствующего нового состояния. Метод необходимо использовать при удалении или добавлении пунктов меню (add or remove options), когда выполняется блокировка/разблокировка элементов (disabling/enabling) и при других событиях (events), вызванных в JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div class="container"> <select class="selectpicker"> <option value="u">Украинский</option> <option value="r">Русский</option> <option value="e">Английский</option> <option value="f">Французкий</option> </select> <button class="btn btn-warning rm1">Удалить украинский</button> <button class="btn btn-danger rm2">Удалить русский</button> <button class="btn btn-success rm3">Удалить английский</button> <button class="btn btn-info rm4">Удалить французкий</button> </div> <script> $('.rm1').click(function () { $('.selectpicker').find('[value=u]').remove(); $('.selectpicker').selectpicker('refresh'); }); $('.rm2').click(function () { $('.selectpicker').find('[value=r]').remove(); $('.selectpicker').selectpicker('refresh'); }); $('.rm3').click(function () { $('.selectpicker').find('[value=e]').remove(); $('.selectpicker').selectpicker('refresh'); }); $('.rm4').click(function () { $('.selectpicker').find('[value=f]').remove(); $('.selectpicker').selectpicker('refresh'); }); </script> |
Destroy
Программно удаляет плагин bootstrap-select. Таким образом, при использовании кода
$('.селектор').selectpicker ('destroy')
на экране отобразится обычный выпадающий список без стилевого оформления, предусмотренного фреймворком.
Я перечислил наиболее популярные методы Select Plugin. Что касается опций, то их еще больше. Однако для начала вам понадобятся такие популярные параметры, как: size, style, width и header.
На этом статья подошла к концу. Жду ваших заявок на подписку. Не забывайте делиться ссылкой на блог с друзьями и коллегами. Пока-пока!
С уважением, Роман Чуешов
без демок не удобно читать статьи
Учтем.
паиб