添加第二个颜色选择器
Adding a second colour picker
我想在我的网站上有多个颜色选择器,问题是它们都相互冲突。
谁能帮我一把,因为我快疯了哈哈!基本上现在发生的是我可以通过颜色选择器来选择颜色。我想要多次选色器。问题是,当我添加另一个时,它们似乎相互冲突。
HTML: <div class="color-wrapper">
<p>Choose color for Header</p>
<!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
<form name="test">
<input type="text" name="custom_color" ng-model="eventData.headerColor" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
</form>
<div class="color-holder call-picker"></div>
<div class="color-picker" id="color-picker" style="display: none"></div>
</div>
Javascript: var hexText="123";
var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
'660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
'99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];
var picker = $('#color-picker');
for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}
$('body').click(function () {
picker.fadeOut(1);
});
$('.call-picker').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
var codeHex = $(this).data('hex');
$('.color-holder').css('background-color', codeHex);
$('#pickcolor').val(codeHex).trigger('change');
});
});
CSS: * {
margin: 0;
padding: 0;
}
.color-wrapper {
position: relative;
width: 250px;
margin: 20px 50px;
}
.color-wrapper p {
margin-bottom: 5px;
}
input.call-picker {
border: 1px solid #AAA;
color: #666;
text-transform: uppercase;
float: left;
outline: none;
padding: 10px;
text-transform: uppercase;
width: 85px;
}
.color-picker {
width: auto;
background: #F3F3F3;
height: auto;
padding: 5px;
border: 5px solid #fff;
box-shadow: 0px 0px 3px 1px #DDD;
position: absolute;
top: 61px;
left: 2px;
}
.color-holder {
background: #fff;
cursor: pointer;
border: 1px solid #AAA;
width: 40px;
height: 36px;
float: left;
margin-left: 5px;
}
.color-picker .color-item {
cursor: pointer;
width: 20px;
height: 20px;
list-style-type: none;
float: left;
margin: 2px;
border: 1px solid #DDD;
}
.color-picker .color-item:hover {
border: 1px solid #666;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=8);
}
<input type="color" name="your_input_name" />
相关文章:
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- 通过Ember颜色选择器更新SCSS变量
- 如何动态创建许多Jquery颜色选择器(eyecon)
- JS-颜色选择器只有第一个工作
- 取消光谱颜色选择器不工作
- 如何使HTML5颜色选择器返回颜色名称而不是颜色代码
- 如何使用颜色选择器来更改背景中的文本
- HTML中的颜色选择器对话框
- 具有半径(blur?)的颜色选择器的算法
- 如何使用javascript重置颜色选择器
- 如何设置'样式:color'淘汰赛中的颜色选择器.JS
- 手动更新引导程序颜色选择器
- 引导颜色选择器,如何在下拉列表中设置颜色值框
- Div 渐变的颜色选择器
- Extjs 6.0 颜色选择器十六进制字段
- 为什么这个jQuery颜色选择器在引导模式中失败
- 如何在 jquery 颜色选择器中设置数字十六进制颜色
- dhtmlx 布局中的颜色选择器
- 带有 css 的 html 中颜色选择器的绝对位置
- jquery颜色选择器插件