3

我想在我的网站中集成一个颜色选择器。但是，我集成了：

<link href="css/colorpicker.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<!--Color Picker -->
<script src="js/bootstrap-colorpicker.js"></script>
 <script>
$(function(){
window.prettyPrint && prettyPrint()
$('#cp1').colorpicker({
format: 'hex'
});
$('#cp2').colorpicker();
$('#cp3').colorpicker();
var bodyStyle = $('body')[0].style;
$('#cp4').colorpicker().on('changeColor', function(ev){
bodyStyle.backgroundColor = ev.color.toHex();
});
});
</script>

和颜色选择器组件：

 <div class="control-group">
   <label class="control-label">Pick the color of your product</label>
      <div class="controls">
   <div id="cp3" class="input-append color" data-color-format="rgb" data-color="rgb(255, 146, 180)">
      <input class="span2" type="text" readonly="" value="">
      <span class="add-on">
      <i style="background-color: rgb(255, 146, 180)"></i>
      </span>
   </div>
   </div>
</div>

但是，当我调用我的网站时，颜色选择器看起来像这样：

在此处输入图像描述

你知道如何解决这个问题吗？

4

2 回答 2

9

alpha.png将,hue.png和saturation.png的图像路径重置colorpicker.css到您存储它们的文件夹中。

.colorpicker-hue { background-image: url(your/path/hue.png) };
于 2013-04-07T19:45:59.523 回答
4

我确实需要为 Twitter Bootstrap 使用颜色选择器，我发现了jQuery MiniColors：一个基于 jQuery 构建的微型颜色选择器。这很好，但我想让我的网络尽可能轻，所以我意识到 HTML5 为我们提供了type="color"可能性，因此您可以在基于引导程序的页面中使用如下内容：

<form class="form-horizontal style-form" method="get">
    <div class="form-group">
        <label class="col-sm-4 control-label">Color de letra</label>
        <div class="col-sm-7 input-group color-picker">
            <input id="textColor" type="color" value="" class="form-control" />
            <span class="input-group-addon"><i></i></span>
        </div>
    </div>
</form>

它将以这种方式工作：

在此处输入图像描述

于 2014-12-03T19:30:36.157 回答