Продолжаем писать и сегодня для Вас уже выпущен 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 функцию.
Ребят, на этом как бы все, спасибо за Ваше внимание! Пишите в комментариях, чего Вы бы хотели увидеть в следующих выпусках по веб программированию!