jQuery Uniform - плагин для Select, Checkbox, Textarea
Как изменить select, checkbox, radio, textarea, внешний вид стандартных элементов (формы, кнопки, чекбоксы и др.)? Все очень просто. Как всегда, к нам на помощь спешит вездесущий jQuery.
Если вы хотите изменить вид некоторых стандартных веб-элементов, то можно очень долго и безрезультатно писать CSS стили, но не добиться желаемого эффекта. Однако, при помощи jQuery, все стандартные элементы (input, textarea, select, button) можно изменить практически до неузнаваемости. Специально для этих целей и был разработан модуль jQuery Uniform!
1. Скачать Uniform плагин можно перейдя по ссылке. Для скачивания доступны несколько стилевых вариантов.
2. Разархивируйте папку и ознакомьтесь с ее внутренностями. В папке Demo можно запустить демо версию и посмотреть, как будут выглядеть элементы.
3. Затем, мы должны перенести скрипт jquery.uniform.min.js в наш собственный проект и подключить его в HTML странице стандартным способом:
<head>
<script src="scripts/jquery.uniform.min.js"></script>
</head>
4. Также, необходимо скопировать CSS стиль uniform.default.css в вашу папку со стилями и подключить его:
<head>
<link rel="stylesheet" href="styles/uniform.default.css">
</head>
5. Далее, необходимо скопировать изображения, используемые в оформлении элементов, в вашу папку с изображениями, которая по умолчанию называется images.
6. Теперь можно вызвать метод uniform() для стилизации интересующих нас элементов. Для этого откройте ваш файл, в котором вы пишите скрипты, если его нет, то создайте файл scripts.js и вставьте в него следующий jQuery код:
$(document).ready(function(){
$(‘input, textarea, select, button’).uniform();
});
Другими словами, мы стилизуем следующие стандартные элементы: input, textarea, select, button, добавив к ним uniform() метод.
Осталось только обновить страницу и посмотреть результат проделанной работы. «Упрямые» элементы стали выглядеть гораздо красивее и необычнее.
Ну и напоследок стоит отметить, что хотя стандартных тем для плагина всего две, вы и сами можете изменить тему по своему вкусу. Для этого нажмите на ссылке Themes, скачайте theme kit. Там будет два PSD файла, изменять нужно наименьший из них - sprite.psd, второй - обзорный файл. Далее, если вы изменяли размеры элементов в PSD файле, то для получения правильного CSS кода переходим по ссылке custom theme generator, если размеры не изменяли, то этот шаг пропускаем. В открывшейся странице необходимо указать размеры элементов. Отредактированный PSD файл необходимо сохранить в png формате и залить в вашу папку, где храняться картинки для веб-сайта (предположительно images).
Для всех украинских веб-мастеров и не только могу предложить Продвижение сайтов в Киеве.
