1 073 При создании веб-дизайна разработчики очень часто спотыкаются на элементах управления (например, select), располагающихся на сайте. Дело в том, что такие элемены выглядят не одинаково в разных браузерах, поэтому дизайнеру труднее донести до пользователя нужную информацию.
Именно поэтому, в этой статье мы и рассмотрим создание улучшенного элемента select.
HTML
И начнем эту часть руководства со HTML. Мы будем использовать HTML 5, потому как он дает нам некоторые приемущства, например, дополнительные атрибуты данных, которые мы будем использовать в разметке страницы.
select-jquery.html
|
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 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Making Better Select Elements with jQuery and CSS3 | Tutorialzine Demo</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <body> <div id="page"> <h1>Your Product</h1> <form method="post" action=""> <!-- We are going to use jQuery to hide the select element and replace it --> <select name="fancySelect" class="makeMeFancy"> <!-- Notice the HTML5 data attributes --> <option value="0" selected="selected" data-skip="1">Choose Your Product</option> <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option> <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option> <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option> <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option> </select> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Вы, наверное, увидели, что мы использовали атрибуты data для встраивания информации в элементы option управляющего элемента select. Будем использовать иконки продуктов и их описание для отображения улучшенной версии элемента select.
В первый элемент из списка мы поставили атрибут data-skip. Он нужен для того, чтобы скрипт знал, что такой элемент в список выборки включать не нужно. Альтернативой этому атрибуту будет проверка значений атрибутов data-icon и data-html-text, и если они не заполнены, то не включать такой элемент в генерируемый список.
В конце документа подключаем jQuery и наш скрипт, о котором речь пойдет дальше.
jQuery
На событие document.ready jQuery проверяет все элементы select, и используя данные атрибутов, строит разметку новых улучшенных вариантов:
|
1 2 3 4 5 6 7 8 9 |
<div style="width: 144px;" class="tzSelect"> <div class="selectBox">iMac Station</div> <ul class="dropDown"> <li><img src="img/products/iphone.png"><span>iPhone 4<i>in stock</i></span></li> <li><img src="img/products/ipod.png"><span>iPod <i>in stock</i></span></li> <li><img src="img/products/air.png"><span>MacBook Air<i>out of stock</i></span></li> <li><img src="img/products/imac.png"><span>iMac Station<i>in stock</i></span></li> </ul> </div> |
Как вы можете видеть, новый элемент select представляет собой неупорядоченный список с элементами li. Сам бокс представлен элементом div с классом .selectBox.
Теперь посмотрим на генерацию кода.
js/script.js
|
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
$(document).ready(function(){ // Элемент select заменяется: var select = $('select.makeMeFancy'); var selectBoxContainer = $('<div>',{ width : select.outerWidth(), className : 'tzSelect', html : '<div class="selectBox"></div>' }); var dropDown = $('<ul>',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Проходим цикл исходного select select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // В jQuery 1.4.3 мы можем получить доступ к HTML5 // данным через метод data(). if(option.data('skip')){ return true; } // Создаем улучшенный список: var li = $('<li>',{ html: '<img src="'+option.data('icon')+'" /><span>'+ option.data('html-text')+'</span>' }); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); dropDown.bind('show',function(){ if(dropDown.is(':animated')){ return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide',function(){ if(dropDown.is(':animated')){ return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // Немного логики: $(document).click(function(){ dropDown.trigger('hide'); }); }); |
Стоит отметить, что при построении нового элемента старый select не уничтожается, а прячется от пользователя с помощью метода hide (). Это очень важно, потому что при отсутствии поддержки javascript функционал страницы останется работоспособным.
После генерации у нас есть разметка, которую мы будем оформлять с помощью CSS3.
CSS
Как вы можете видеть, мы использовали минимальное количество элементов для построения управляющего элемента. И все это стало возможным, благодаря CSS3.
css/styles.css
|
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 47 48 49 50 51 52 53 54 55 56 57 58 59 |
#page{ width:230px; margin:100px auto; } #page h1{ font-weight:normal; text-indent:-99999px; overflow:hidden; background:url('../img/your_product.png') no-repeat; width:230px; height:36px; } #page form{ margin:20px auto; width:200px; } .tzSelect{ height:34px; display:inline-block; min-width:200px; position:relative; background:url("../img/dropdown_slice.png") no-repeat -99999px; } .tzSelect .selectBox{ position:absolute; height:100%; width:100%; font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; text-shadow:1px 1px 0 #EEEEEE; color:#666666; /* Using CSS3 multiple backgrounds and a fallback */ background:url('../img/select_slice.png') repeat-x #ddd; background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'); background-position:0 -136px, right -204px, 50% -68px, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; cursor:pointer; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded{ background-position:0 -170px, right -238px, 50% -102px, 0 -34px; color:#2c5667; text-shadow:1px 1px 0 #9bc2d0; } |
Одной из самых приятных вещей, добавленных в CSS3, стала возможность добавлять мульти-бэкграунды.
В настоящее время мульти-бэкграунды поддерживаются всеми современными браузерами, кроме Internet Explorer. В нем отображается только первый заданный бэкграунд.
|
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 47 48 49 50 51 52 |
.tzSelect .dropDown{ position:absolute; top:40px; left:0; width:100%; border:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 0 4px #111; -webkit-box-shadow:0 0 4px #111; box-shadow:0 0 4px #111; } .tzSelect li{ height:85px; cursor:pointer; position:relative; /* Again, using CSS3 multiple backgrounds */ background:url('../img/dropdown_slice.png') repeat-x #222; background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'); background-position: 50% -171px, 0 -85px, 0 0; background-repeat: no-repeat, no-repeat, repeat-x; } .tzSelect li:hover{ background-position: 50% -256px, 0 -85px, 0 0; } .tzSelect li span{ left:88px; position:absolute; top:27px; } .tzSelect li i{ color:#999999; display:block; font-size:12px; } .tzSelect li img{ left:9px; position:absolute; top:13px; } |
Свойство box-sizing, которое используется для класса .dropDown, определяет будут ли бордюры участвовать в расчете размеров элемента. Обычно, если у элемента есть бордюры, то они увеличивают его размер. Но если установить для свойства box-sizing значение border-box, то размер элемента будет постоянным, вне зависимости от толщины его бордюров.
На этом создание улучшенного select-элемента с помощью jQuery и CSS3 завершено!
