Необычные checkbox для сайта
На многих сайтах замечал различные checkboxы или проще говоря чеки, все они в основном одинаковые, по этому данной статье я расскажу как можно сделать более оригинальным Ваш сайт изменив в нем стандартные чеки на более креативные, кто то скажет что это мелочь, но именно такие мелочи помогут сделать ваш сайт более оригинальным и приятным для пользователя.
Для начала я хочу представить с чем мы вообще будем иметь дело:
Шаг 1. Создаем простую HTML-форму:
1 2 3 4 5 6 7 8 9 10 11 12 |
<form> <fieldset> <label for="choices"> <input name="jqdemo" value="value1" type="checkbox" /> Первый <input name="jqdemo" value="value2" type="checkbox" /> Второй <input name="jqdemo" value="value3" type="checkbox" /> Третий <input name="jqdemo" value="value4" type="checkbox" /> Четвертый </label> <br/><br/> <button type="submit" name="submitbutton" title="Submit the form" />Send it! </fieldset> </form> |
Двигаемся далее. Добавим в форму элементы списка и контроллы select и сancel для перекрытия флажков. В качестве контроллов у нас будут выступать простые ссылки с классами checkbox-select и checkbox-deselect соответственно:
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 |
<form> <fieldset> <label for="choices"> <ul> <li> <input name="jqdemo" value="value1" type="checkbox" /> <p>Первая секция </p> <a href="#">Select</a> <a href="#">Cancel</a> </li> <li> <input name="jqdemo" value="value2" type="checkbox" /> <p>Вторая секция</p> <a href="#">Select</a> <a href="#">Cancel</a> </li> <li> <input name="jqdemo" value="value3" type="checkbox" /> <p>Третья секция</p> <a href="#">Select</a> <a href="#">Cancel</a> </li> <li> <input name="jqdemo"value="value4" type="checkbox" /> <p>Четвертая секция</p> <a href="#">Select</a> <a href="#">Cancel</a> </li> </ul> </label> <div style="clear: both;"></div> <button type="submit" name="submitbutton" title="Заполнить форму RUDEBOX" />Отправить! </fieldset> </form> |
Шаг 2. Придаем внешний вид
Выбранные элементы у нас будут зеленого цвета. Невыбранные — серого. Проще всего это сделать с помощью одного фонового изображения и сдвига его позиции, когда это необходимо.
В фотошопе подготавливаем фоновые изображения:
Элементы созданного нами списка будут составлять 105px в ширину и 150px по вертикали, поэтому checkboxbg.gif должна быть 210 пикселей в ширину (двойной ширины). Sendit.gif и select.gif будет служить в качестве фона для кнопок «Send it» и «Select», соответственно. Когда элемент будет выбираться, фоновое изображение будет сдвигаться, «показывая» свою зеленую половину. Как это сделать при использовании CSS:
Шаг 3. Используем 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 60 61 62 |
.checklist { list-style: none; margin: 0; padding: 0; } .checklist li { float: left; margin-right: 10px; background: url(i/checkboxbg.gif) no-repeat 0 0; width: 105px; height: 150px; position: relative; font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif; } .checklist li.selected { background-position: -105px 0; } .checklist li.selected .checkbox-select { display: none; } .checkbox-select { display: block; float: left; position: absolute; top: 118px; left: 10px; width: 85px; height: 23px; background: url(i/select.gif) no-repeat 0 0; text-indent: -9999px; } .checklist li input { display: none; } a.checkbox-deselect { display: none; color: white; font-weight: bold; text-decoration: none; position: absolute; top: 120px; right: 10px; } .checklist li.selected a.checkbox-deselect { display: block; } .checklist li p { text-align: center; padding: 8px; } .sendit { display: block; float: left; top: 118px; left: 10px; width: 115px; height: 34px; border: 0; cursor: pointer; background: url(i/sendit.gif) no-repeat 0 0; text-indent: -9999px; margin: 20px 0; } |
Шаг 4. Подключаем эффекты jQuery
12345678910111213141516 $(document).ready(function() {$(".checklist .checkbox-select").click(function(event) {event.preventDefault();$(this).parent().addClass("selected");$(this).parent().find(":checkbox").attr("checked","checked");});$(".checklist .checkbox-deselect").click(function(event) {event.preventDefault();$(this).parent().removeClass("selected");$(this).parent().find(":checkbox").removeAttr("checked");});});
Вот на этом пожалуй и все, надеюсь урок был вам интересен.
Читайте также:
Опубликовал Cooper 30.05.2011 в 19:07, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |