Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » jQuery Uniform - плагин для Select, Checkbox, Textarea RSS
дек 10 2012 photo

jQuery Uniform - плагин для Select, Checkbox, Textarea

admin 16 899
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5

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).

Для всех украинских веб-мастеров и не только могу предложить Продвижение сайтов в Киеве.

Демо Скачать

Теги: jQuery Uniform

HashFlare
Другие новости по теме:
  • Принципы резиновой верстки сайта
  • Всплывающее окно jquery на сайте
  • 10 новых jQuery плагинов 2014 года
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню

Комментарии к: jQuery Uniform - плагин для Select, Checkbox, Textarea (4)

    1. №1  Sen 07-12-2013 Цитировать
      "Стилезируем нестилезируемое" - Правильнее будет писать "Стилизируем нестилизируемое"
    1. №2  admin 10-12-2013 Цитировать
      Совершенно верно, спасибо, поправил!
    1. №3  мимопробежал 04-09-2015 Цитировать
      стилизуем нестилизуемое
      грамотеи smile
    1. №4  Alessa Shtern 04-09-2015 Цитировать
      Исправили :)
    1. №5  Илья 05-06-2017 Цитировать

      Как применить multiple для type=file

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Принципы резиновой верстки сайта
  • Всплывающее окно jquery на сайте
  • 10 новых jQuery плагинов 2014 года
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Принципы резиновой верстки сайта
  • Как выявить дополнительные резервы для продвижения в поиске
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
  • Плавная прокрутка страницы сайта
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015