Jquery colorpicker

Хороший плагинчик jPicker. Скачать с сайта jPicker 543

Источник: http://johndyer.name/photoshop-like-javascript-color-picker/

Пример привязки к инпуту:

<link rel="Stylesheet" type="text/css" href="css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="jPicker.css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jpicker-1.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">        
  $(document).ready(
    function()
    {
      $('#Binded').jPicker();
    });
</script>
<input id="Binded" type="text" value="e2ddcf" />

Есть возможность задать настройки, самые интересные:

{
  window: // используется для задания позиции нашего выпадающего колорпикера
          // полезно только когда привязываем колорпикер например к инпуту
  {
    title: null, // title лоя нашего окошка с колорпикером
                 // "Drag Markers To Pick A Color" если null
    position:
    {
      x: 'screenCenter', // возможные значения "left", "center", "right",
                         // "screenCenter", или в пикселях
      y: 'top', // возможные значения "top", "bottom", "center", или в пикселях
                // 
    }
  },
  images
  {
    clientPath: '/jPicker/images/', // Путь к картинкам для нашего колорпикера
  },
  localization:  // локализация, т.е. можно перевести все что хочется
  {
    text:
    {
      title: 'Drag Markers To Pick A Color',
      newColor: 'new',
      currentColor: 'current',
      ok: 'OK',
      cancel: 'Cancel'
    },
    tooltips:
    {
      colors:
      {
        newColor: 'New Color - Press “OK” To Commit',
        currentColor: 'Click To Revert To Original Color'
      },
      buttons:
      {
        ok: 'Commit To This Color Selection',
        cancel: 'Cancel And Revert To Original Color'
      },
      hue:
      {
        radio: 'Set To “Hue” Color Mode',
        textbox: 'Enter A “Hue” Value (0-360°)'
      },
      saturation:
      {
        radio: 'Set To “Saturation” Color Mode',
        textbox: 'Enter A “Saturation” Value (0-100%)'
      },
      brightness:
      {
        radio: 'Set To “Brightness” Color Mode',
        textbox: 'Enter A “Brightness” Value (0-100%)'
      },
      red:
      {
        radio: 'Set To “Red” Color Mode',
        textbox: 'Enter A “Red” Value (0-255)'
      },
      green:
      {
        radio: 'Set To “Green” Color Mode',
        textbox: 'Enter A “Green” Value (0-255)'
      },
      blue:
      {
        radio: 'Set To “Blue” Color Mode',
        textbox: 'Enter A “Blue” Value (0-255)'
      },
      alpha:
      {
        radio: 'Set To “Alpha” Color Mode',
        textbox: 'Enter A “Alpha” Value (0-100)'
      },
      hex:
      {
        textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
        alpha: 'Enter A “Alpha” Value (#00-#ff)'
      }
    }
  }
}
Оставьте комментарий!

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Имя и сайт используются только при регистрации

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

(обязательно)