gpt4 book ai didi

javascript - Bootstrap Colorpicker,如何在下拉列表中设置颜色值框?

转载 作者:行者123 更新时间:2023-11-29 21:31:47 26 4
gpt4 key购买 nike

我正在使用 Bootstrap Colorpicker 2.3 ,但我的要求是,我想在颜色选择器中添加文本字段值框,like this example , 是否可以 ?请有人帮助我,在此先感谢。

最佳答案

用一些额外的代码更新了你的 fiddle 。

插件有 changeColor 事件。使用它来更新输入元素值。

$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
$('.store').val($(this).colorpicker('getValue'))
});

$('.demo1').colorpicker();

$('.demo2').colorpicker({
template: '<div class="colorpicker dropdown-menu">' +
'<div class="colorpicker-saturation"><i><b></b></i></div>' +
'<div class="colorpicker-hue"><i></i></div>' +
'<div class="colorpicker-alpha"><i></i></div>' +
'<div class="colorpicker-color"><div /></div>' +
'<div class="colorpicker-selectors"></div>' +
'<div class="colorpicker-selectors"></div>' +
'<input type="text" value="" class="store" />' +
'</div>',
input: '.store'
});


$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
$('.store').val($(this).colorpicker('getValue'))
});
.demo1,
.demo2 {
width: 200px;
margin: 30px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js" type="text/javascript"></script>
<link href="/css/normalize.css" type="text/css" rel="stylesheet">
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css" type="text/css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" type="text/css" rel="stylesheet">





<div class="input-group demo1">
<input type="text" value="" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>


<div class="form-group">
<div class="field-title">With template</div>
<div class="input-group input-picker demo2">
<input type="text" value="" class="form-control" />
<div class="dss"></div>
<span class="input-group-addon"><i></i></span>
</div>
</div>

Fiddle

关于javascript - Bootstrap Colorpicker,如何在下拉列表中设置颜色值框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36124574/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com