Уроки JQuery плагин SelectBoxIt
8 июня 2015
2277
JQuery плагин SelectBoxIt, стилизация селекта

JQuery плагин SelectBoxIt

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Продолжаем писать и сегодня для Вас уже выпущен 101-й скрипт с темой JQuery плагин SelectBoxIt. Наверно, Вы уже догадались, что тема данного материала связана с стилизацией селекта и в принципе очень приемлема для многих сайтов, так как протестировав на кроссбраузерность, отображение оказалось в последних версиях просто идеальным!

 

Как бы немного сначала расскажу, сделаю выноску скажем так к обсуждению плагина. Начнем с того, что автором данного плагина является инженер разработчик на JavaScript Greg Franko, являющийся блогером такого сайта как http://gregfranko.com/. Сам плагин позволяет с помощью языка JQuery и наборов элемента CSS свойств, изменять полноценно обычную стилизацию тегов Select, Option и придавать им свою собственную форму. Имеются богатые возможности выбора различные эффектов, применимых для изменения Select свойств. Мы их рассмотрим во-второй части, JQuery и внутренняя сторона плагина SelectBoxIt.

 

Первая часть. HTML.

 

Первым делом, нам надо подключить все необходимые JavaScript и CSS библиотеки и стили, и уже только после этого заниматься кодом HTML для разработки Select структуры.

Сначала подключаем все нужные нам библиотеки.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>

 

Как можно заметить, что последняя библиотека jquery.selectBoxIt.min.js, предназначена как раз для нашего плагина и сочетается со стандартными библиотеками JQuery - jquery-ui.js и jquery-min.js. Теперь давайте подключим два файла CSS.

 

<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" />

 

Стиль jquery.selectBoxIt.css нужен обязательно, так как без него данный плагин будет не корректно отображать содержимое Select и соответственно, стилизации не будет. На счет CSS стиля jquery-ui.css, можно с уверенностью сказать, что он не обязателен, если только нужны те свойства, которые нет в первом стиле. В дополнение, хотел бы отметить, что можно подключать дополнительные файлы стилизации, например Bootstrap. Выбор достаточно разнообразен, поэтому трудностей с определением стиля не должно возникнуть. А теперь давайте перейдем непосредственно, к самому коду Select. Для примера, я взял два скрипта, которые Вам будут достаточно понятны.

 

Первый пример.

 

<select id="primerone" name="primerone">
    <option value="SelectBoxIt is:">SelectBoxIt is:</option>
    <option value="a jQuery Plugin">a jQuery Plugin</option>
    <option value="a Select Box Replacement">a Select Box Replacement</option>
    <option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>

 

Как видим, абсолютно обычный код Select c идентификатором primerone, вся суть как раз с ним и связана. Во-второй части, мы рассмотрим JQuery код, который придает стилизацию Select.

 

Второй пример.

 

<select id="primertwo" name="primertwo">
    <option value="SelectBoxIt is:">SelectBoxIt is:</option>
    <optgroup label="Optgroup 1">
      <option value="a jQuery Plugin">a jQuery Plugin</option>
    </optgroup>
    <optgroup label="Optgroup 2">
      <option value="a Select Box Replacement">a Select Box Replacement</option>
    </optgroup>
    <optgroup label="Optgroup 3">
      <option value="a Stateful UI Widget">a Stateful UI Widget</option>
    </optgroup>
</select>

 

Этот вариант, нам будет выдавать такие же Select, только скажем так с делением на категории опции. И в итоге мы должны получить, два различных примера, который Вы можете посмотреть в демо версии. Кстати, пока не забыл, есть пример виды select, в нем подробно написано, как можно с помощью тегов span, button создать такой же Select, как обычный, естественно, не без JQuery. Кому интересно, посмотрите!

 

Вторая часть. Query и внутренняя сторона плагина SelectBoxIt.

 

Переходим к стилизации Select с помощью настроек SelectBoxIt. Сразу хочу посоветовать, изучите сначала мануал на официальном сайте и посмотрите какие функции, эффекты, стилизации там имеются, а уже после этого разрабатывайте то, что Вам нужно! 

Те JQuery свойства нашего плагина, которые я написал в демо, они минимальны, поэтому без полноценного мануала, не бойтесь. А  теперь, давайте разберем код и будем заканчивать наш материал.

 

<script>
   $(function() {
      $("#primerone").selectBoxIt({ 
		theme:"jqueryui",
		showEffect: "drop",
		showEffectSpeed: 500,
		hideEffect:"explode",
		hideEffectSpeed: 500
	  });
	  $("#primertwo").selectBoxIt();
    });
</script>

 

Как я уже говорил, связь между Select идет через индефикатор, имея два идентификатора, тут мы их применяем к плагину SelectBoxIt. Разбирая первый пример, мы задаем:

 

Theme - Тема jqueryui
ShowEffect - Эффект при показе drop
ShowEffectSpeed - Скорость появления эффекта 500
HideEffect - Эффект при скрытии explode
HideEffectSpeed - Скорость скрытия эффекта 500

 

Сразу хотел бы сказать по поводу различных эффектов, которые Вы можете найти на официальном сайте JQueryui и выбрать себе подходящий. По поводу второго примера, сказать то и нечего, так как никаких эффектов я там не указывал, а просто для демонстрации обозначил пустую JQuery функцию. 

 

Ребят, на этом как бы все, спасибо за Ваше внимание! Пишите в комментариях, чего Вы бы хотели увидеть в следующих выпусках по веб программированию!





Роман КраутерИсточник материала »