Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Bootstrap selectpicker малоизвестный инструмент для организации выпадающего списка на сайте

Доброго времени суток всем, кто желает изучить 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.

На этом статья подошла к концу. Жду ваших заявок на подписку. Не забывайте делиться ссылкой на блог с друзьями и коллегами. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 2476 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: