Главная » Файлы » Прочие скрипты » jQuery

Выбор цвета фона через плагин color picker на jQuery
23.06.14, 09:11:14

Скачать файл




Очень интересное решение выбора цвета фона через плагин color picker. У ваших пользователей будет возможность выбрать свой цвет фона из всего спектра цветов

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/ui.colorpicker.css"/>
  <style type="text/css">
  #bg fieldset { border-width: 1px; width: 460px; }  
  #bg .fields { padding: 25px; margin-bottom: 20px; }  
  #bg div { clear: both; }  
  #bg label { float: left; width: 85px; }  
  #bg input { float: left; width: 190px; }  
  .ui-colorpicker input { float: none; width: auto; height: auto; }  
  #bg .submit { margin-top: 40px; text-align: center; }  
  </style>

  <script language="JavaScript" src="/js/jq.js"></script>
  <script language="JavaScript" src="/js/jq.color.js"></script>
  <script language="JavaScript">

  $(document).ready(function() {  

var hideit = function(e, ui) { $(this).val('#'+ui.hex); $('.ui-colorpicker').css('display', 'none'); };  
$('#bg #colorpicker').colorpicker({ hide: hideit, submit: hideit });  

$('#dochange').click(function() {  

$('body').css('background-color', $('#colorpicker').val());  

return false;  
});  

  });  

  </script>


Следующий код вставляйте в то место, где будет сама форма выбора цвета фона:
Код
<form id="bg" action="">

<fieldset>
<legend>Цвет фона</legend>

<div class="fields">

<div><label for="colorpicker">Цвет:</label> <input type="text" id="colorpicker" name="colorpicker"/></div>

<div class="submit">
<button id="dochange">
Сменить фон  
</button>
</div>
</div>

</fieldset>
  <br/><br/><br/><br/><br/><br/><br/>
</form>


Теперь залейте два скрипта из прикреплённого архива в папку js, один стиль в папку css и все картинки в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: выбор, Через, цвета, на, плагин, JQuery, color, picker, фона
Просмотров: 570 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: