Доброго времени суток 🙂
Сегодня хочу показать Вам как сделать палитру, с помощью которой можно выбирать нужный цвет. Сделать такую палитру нам поможет один JavaScript скрипт. По своей сути, создание такой палитры не очень тяжелое. Тут всего лишь несколько шагов, но Вам понадобятся определенные знания и данная статья рассчитана скорее на вебмастеров с опытом. Хотя вряд ли новичкам понадобится создание палитры при создании чего-нибудь.
Лично я применил данный скрипт, при создании своего нового плагина для заказа звонка. Данная палитра помогает пользователю выбрать цвет кнопки и формы заказа. Долгое время я подбирал нужный скрипт и как по мне данный является одним из лучших. К тому же он, как я говорил, легко вживляется. Пример того что получится у Вас в результате, можно посмотреть в примере ниже. Выбирайте цвет курсором на полях с градиентом.
Чтобы сделать такую палитру, нужно сделать 4 шага. Начнем по-порядку с разметки HTML. Добавлять ее нужно туда, где хотите увидеть саму палитру.
<div id="color-picker" class="cp-default">
<div class="picker-wrapper">
<div id="picker" class="picker"></div>
<div id="picker-indicator" class="picker-indicator"></div>
</div>
<div class="pcr-wrapper">
<div id="pcr" class="pcr"></div>
<div id="pcr-indicator" class="pcr-indicator"></div>
</div>
<ul id="color-values">
<li><label>RGB:</label><span id="rgb"></span></li>
<li><label>HSV:</label><span id="hsv"></span></li>
<li><label>HEX:</label><span id="hex"></span></li>
<li><div id="pcr_bg"></div></li>
</ul>
</div>
Главный родительский блок с айди - color-picker. В нем заключено три основных блока, которые внутри имеют дочерние элементы, что и создают структуру нашей палитры. Давайте разберем их по порядку, относительно изображению ниже.
Можете в зависимости от Ваших нужд, менять местами или вообще убирать те элементы, что не нужны. Когда полностью завершим с установкой палитры, тогда Вы сможете более подробно сами разобраться и определить, как поменять тот или иной элемент палитры.
Вторым шагом по установке палитры, будет добавление стилей CSS. Их добавляете, как обычно в файл стилей своего сайта, ну или того элемента, к которому Вы подключаете данную цветовую палитру.
#color-picker{
margin:25px auto;
width:450px;
}
#color-values{
display:block;
list-style:none;
color:#222;
float:left;
margin:0 0 0 15px;
padding: 5px;
text-align:left;
}
#pcr_bg{
height:135px;
}
.picker-wrapper,
.pcr-wrapper {
position: relative;
float: left;
}
.picker-indicator,
.pcr-indicator {
position: absolute;
left: 0;
top: 0;
}
.picker,
.pcr {
cursor: crosshair;
float: left;
}
.cp-default .picker {
width: 200px;
height: 200px;
}
.cp-default .pcr {
width: 30px;
height: 200px;
}
.cp-default .pcr-wrapper {
margin-left: 10px;
}
.cp-default .picker-indicator {
width: 5px;
height: 5px;
border: 2px solid darkblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50);
background-color: white;
}
.cp-default .pcr-indicator {
width: 100%;
height: 10px;
left: -4px;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter: alpha(opacity=60);
border: 4px solid lightblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: white;
}
По CSS расписывать не буду. Как и говорил, палитру вряд ли новичок будет ставить, а бывалый с CSS знаком. Думаю разберетесь какой параметр за что отвечает. Переходим к следующему шагу.
Третьим пунктом, того что Вы должны сделать, будет подключение файла, в котором содержится сам скрипт цветной палитры. Сам файл будет в архиве с исходниками этой статьи. Скачать его можно, по ссылке ниже.
Файл называется colorpicker.min.js. Подключите его в шапке или в подвале сайта, если выводить палитру будете на сайте. Если в каком-то модуле, плагине и тд, то там где вы подключаете остальные скрипты. Естественно укажите правильный путь к файлу.
<script type="text/javascript" src="colorpicker.min.js"></script>
Ну и последний шаг, это подключение скрипта, который будет управлять выводом значений палитры, ну и запустит ее работу как таковую. Скрипт лучше всего подключать сразу после блока палитры с HTML.
<script type="text/javascript">
cp = ColorPicker(document.getElementById('pcr'), document.getElementById('picker'),
function(hex, hsv, rgb, mousePicker, mousepcr) {
currentColor = hex;
ColorPicker.positionIndicators(
document.getElementById('pcr-indicator'),
document.getElementById('picker-indicator'),
mousepcr, mousePicker);
document.getElementById('hex').innerHTML = hex;
document.getElementById('rgb').innerHTML = 'rgb(' + rgb.r.toFixed() + ',' + rgb.g.toFixed() + ',' + rgb.b.toFixed() + ')';
document.getElementById('hsv').innerHTML = 'hsv(' + hsv.h.toFixed() + ',' + hsv.s.toFixed(2) + ',' + hsv.v.toFixed(2) + ')';
document.getElementById('pcr_bg').style.backgroundColor = hex;
});
cp.setHex('#D4EDFB');
</script>
В скрипте можно настроить несколько моментов. Давайте разберем их. То что можно менять начинается с 9-ой строки.
Вот по сути и все подключение цветовой палитры. Как и говорил в самом начале, новичку данная статья может не помочь, рассчитана она на более опытных вебмастеров. Надеюсь, она поможет Вам.
На этом все, спасибо за внимание. 🙂