Spectrum — colorpicker выбор цвета
Скрипт выбора цветов — colorpicker.
Поддержка браузерами:
IE 6+, Chrome 4+, Firefox 3.6+, Safari 4+, Opera 11.1+, iOS
Для использования colorpicker подключаем скрипты:
1 2 | <script src='spectrum.js'></script> <link rel='stylesheet' href='spectrum.css' /> |
Никакие дополнительные внешние файлы с изображениями не используются. Всё что нужно содержится в стилях spectrum.css
HTML
Пример простого использования:
1 | <input id='colorpicker' /> |
JS
Плагин поддерживает работу с jQuery, так и без.
Если подключена библиотека jQuery, то инициализация будет такой:
1 2 3 4 5 | <script> $("#colorpicker").spectrum({ color: "#f00" }); </script> |
Опции
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 | $("#picker").spectrum({ color: tinycolor, flat: bool, showInput: bool, showInitial: bool, allowEmpty: bool, showAlpha: bool, disabled: bool, localStorageKey: string, showPalette: bool, showPaletteOnly: bool, togglePaletteOnly: bool, showSelectionPalette: bool, clickoutFiresChange: bool, cancelText: string, chooseText: string, togglePaletteMoreText: string, togglePaletteLessText: string, containerClassName: string, replacerClassName: string, preferredFormat: string, maxSelectionSize: int, palette: [[string]], selectionPalette: [string] }); |
Colorpicker имеет множество параметров.
Можно использовать в скрипте, или в разметке html, через data- атрибут, например так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // События могут быть использованы при инициализации, как опции: $("#picker").spectrum({ move: function(tinycolor) { }, show: function(tinycolor) { }, hide: function(tinycolor) { }, beforeShow: function(tinycolor) { }, }); // или, они могут быть добавлены в качестве слушателей событий: $("#picker").on('move.spectrum', function(e, tinycolor) { }); $("#picker").on('show.spectrum', function(e, tinycolor) { }); $("#picker").on('hide.spectrum', function(e, tinycolor) { }); $("#picker").on('beforeShow.spectrum', function(e, tinycolor) { }); |
Подробнее – http://bgrins.github.io/spectrum/#events
Методы
1 2 3 4 5 6 7 8 9 10 11 12 | $("#picker").spectrum("show"); $("#picker").spectrum("hide"); $("#picker").spectrum("toggle"); $("#picker").spectrum("get"); $("#picker").spectrum("set", colorString); $("#picker").spectrum("container"); $("#picker").spectrum("reflow"); $("#picker").spectrum("destroy"); $("#picker").spectrum("enable"); $("#picker").spectrum("disable"); $("#picker").spectrum("option", optionName); $("#picker").spectrum("option", optionName, newOptionValue); |
Подробнее – http://bgrins.github.io/spectrum/#methods
Более подробно можно ознакомиться – http://bgrins.github.io/spectrum/
Внешний вид плагина можно просто кастомизировать. В файле spectrum.css, в верхней части, находятся базовые стили, а ниже свойства тем. Можно изменять стили, так как вам будет нужно.
Исходники: bgrins-spectrum-1.8.0