Доброго времени суток всем, кто заинтересовался данной темой. Довольно-таки часто на сайтах требуется создать привлекательные выпадающие списки с дополнительными плюшками для пользователей. Именно поэтому в сегодняшней публикации я подробно расскажу, как создается выпадающий список jQuery-средствами, каким образом можно организовать автозаполнение полей и как пользоваться дополнительным плагином jQuery UI.
Не изменяя своим принципам, я прикреплю несколько примеров, которые пошагово объясню. А теперь приступим к делу!
Что из себя представляет jQuery UI?
Это библиотека, основанная на обсуждаемой технологии, которая включает в себя множество дополнительных плагинов для работы с веб-приложениями. Так, после ее установки разработчик может внедрять в свой проект симпатичные темы, виджеты, модули поведения объектов и многое другое.
Чтобы ознакомиться со всеми возможностями jQuery UI перейдите на официальный сайт по этой ссылке. Там можно почитать документацию (правда на английском языке), узнать обо всех выпущенных версиях, скачать установочный файл, а также наиболее актуальное для нас сейчас опробовать все практически (можно вот по этой ссылке).
Кто читал мои прошлые статьи помнит, что подключить библиотеки можно несколькими способами. Так что если вы скачали установочный файл себе на компьютер, то строки подключения будут выглядеть примерно вот так (обратите внимание на версию jQuery):
1 2 3 | <link type="text/css" href="css/themename/jquery-ui-1.8.2.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script> |
Если же вы хотите загружать их с хранилищ CDN через ссылки, то пример подключения будет показан в практической части.
Реализация текстового поля с автозаполнением
Для начала я хочу познакомить вас с механизмом автозаполнения. Он создается при помощи виджета под названием Autocomplete, который в свою очередь реализует метод autocomplete ().
У виджета предусмотрено 6 свойств, благодаря которым можно управлять автоматической подстановкой слов. Для удобства я структурировал их в таблицу.
|
Свойство |
Предназначение |
| appendTo | Указывает к какому элементу на веб-странице применяется раскрывающийся список. По умолчанию это тег body. |
| minLength | Определяет начиная с какого количества символов выводить перечень слов (фраз) для автозаполнения. 1 – значение по умолчанию. |
| autoFocus | Изначально равен false. При изменении значения на true на первый пункт выпадающего списка устанавливается фокус. |
| source | Обязательное свойство. В нем прописывается имя ресурса, с которого вытаскиваются значения для автоматического заполнения. |
| disabled | При true отключает автозаполнение. |
| delay | Устанавливает в миллисекундах время, на которое будет задерживаться вывод раскрывающегося списка. |
Для закрепления материала перейдем к практической части.
В текстовом поле пользователь должен написать модель смартфона, которую хочет приобрести. После ввода более одного символа раскрывается перечень фраз для автоматической подстановки. Сама работа этого небольшого приложения будет напоминать поиск в привычных нам поисковиках.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Autocomplete </title>
<!--Обещанный пример подключения через ссылки-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/trontastic/jquery-ui.css"> <!--Здесь обязательно надо прописать тему. Если вам не нравится выбранная мной тема, то посмотрите другие на сайте http://www.asp.net/ajax/cdn/jquery-ui/cdnjqueryui1103 -->
<script type="text/javascript">
$(function() {
var mob= ["Samsung Galaxy", "Samsung J5", "Samsung J7", "Samsung A5", "Apple iPhone 5s", "Apple iPhone 6", "Apple iPhone 6s", "Microsoft Lumia 640", "Microsoft Lumia 550"]; /*Перечень моделей телефонов для автозаполнения*/
$('#mobSel').autocomplete({
source: mob,
minLength: 2,
autofocus: true
})
});
</script>
<style>
body {
background: url(https://elitefon.ru/images/201211/elitefon.ru_26586.jpg) center;
}
.cont {
font-size: 23px;
font-weight: 600;
color:#001101;
text-align: center;
border: 3px double;
padding: 2% 14% 35% 11%;
}
</style>
</head>
<body>
<div class="cont">
<form>
<div class="ui-widget">
<label for="mobSel">Выберите модель смартфона: </label>
<input id="mobSel"/>
</div>
</form>
</div>
</body>
</html> |
Это простая реализация автоматической подстановки слов и годиться только для примера. Для реального проекта потребуется не просто массив со словами, а использование дополнительных источников данных.
Так, через свойство source можно подгрузить файл с сервера, например, source: info.php или же воспользоваться базами данных.
Кстати, для работы с бд я порекомендую несколько продуктов. Это MS SQL Server и MySQL. Я не отрицаю, что существует множество других отличных технологий для работы с базами данных. Однако эти наиболее популярные и удобные в использовании.
Реализация выпадающего списка
Теперь перейдем к раскрывающемуся списку. Для его реализации не нужны привычные вам простые списки ul или ol. Я взял прошлый пример и несколько его изменил.
Для реализации красивого выпадающего перечня моделей смартфонов я воспользовался все той же библиотекой jQuery UI и в частности виджетом Selectmenu ().
Ниже я прикрепил программную реализацию таска. Обращайте, пожалуйста, внимание на комментарии по ходу кода!
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Раскрывающийся список</title>
<!--Обратите внимание, что ссылка ниже подключает тему с CDN разработчиков библиотеки. По уже знакомой вам ссылке http://jqueryui.com/themeroller/ можно выбрать другую тему, прописав ее название после слова themes".../themes/тема/jquery-ui.css"-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/vader/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#mobSel" ).selectmenu();/*применяю виджет по id объекта, имя которого "mobSel"*/
} );
</script>
<style>
body {
background: url(https://elitefon.ru/images/201211/elitefon.ru_26586.jpg) center;
}
.cont {
font-size: 23px;
font-weight: 600;
color:#001101;
text-align: center;
border: 3px double;
padding: 2% 14% 35% 11%;
}
</style>
</head>
<body>
<div class="cont">
<form>
<label for="mobSel">Выберите модель смартфона: </label>
<select id="mobSel"> /*По этому id будет срабатывать виджет*/
<option >Samsung Galaxy</option>
<option>Samsung J5</option>
<option>Samsung J7</option>
<option>Samsung A5</option>
<option>Apple iPhone 5s</option>
<option>Microsoft Lumia 640</option>
</select>
</form>
</div>
</body>
</html> |
Как видите все не так уж и сложно. Нужно только уделить немного времени для разбора материала.
Так же рекомендую посмотреть курс Евгения Попова Javascript + jQuery для начинающих, по ссылке. В нем Евгений пошагово объясняет про js и библиотеку jquery.
На этой ноте я прощаюсь с вами. Если вам понравилась публикация, то делитесь ссылкой на нее с коллегами и друзьями. И не забывайте подписываться на обновления блога. Впереди еще много интересных статей. До встречи! Пока-пока!
С уважением, Роман Чуешов
