Question

我最近开始使用http://www.eyecon.ro/colorpicker

的颜色选择器

在我看来这是一个非常好的插件，但我遇到了一个大问题：我无法在我的网站上使用它。

使用此代码将其包含在“标题

中

<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<style type="text/css">

#colorSelector {
    width: 50px;
    height: 50px;
}
</style>

在体内

<p>
    <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
</p>

<script type="text/javascript">
$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
    }
});
</script>

我认为这是一个非常简单的问题需要解决，但我不明白出了什么问题。

提前感谢所有

Answer 1

我刚做了一个有效的例子。

首先，我们为颜色选择器链接所有必要的资源：

<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>

其次我只是创建一个div元素：

<div id="colorSelector"></div>

最后我们设置了插件：

<script type="text/javascript">
    $(function() {
        $('#colorSelector').ColorPicker();
    });
</script>

现在你只需要处理你需要的事件“onChange，onPreview ......”

编辑：

所有资源文件都是从您提供的颜色选择器网站下载的。

简单实现颜色选择器插件

1 个答案: