0

我最近开始使用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>

我认为这是一个非常简单的问题，但我不明白有什么问题。

在此先感谢大家

4

1 回答 1

0

我只是做了一个工作示例。

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

<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...”

编辑：

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

于 2013-07-10T18:52:20.410 回答