Question

我正在弄乱colorpicker plugin for jquery并发现虽然示例html页面工作正常但我似乎无法在我的test.html文件中使用它。

这有效：

$('#colorPick').ColorPicker({flat: true});

但这不是（包含上下文的整个测试html页面）：

<head>
        <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <title>Holy Crap what a Test!</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/colorpicker.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

</head>
<body>
<span id="colorPick" style="background-color: #0000ff"> &nbsp; </span> Test color picker
<script type="text/javascript">

$(document).ready(function() {
        $('#colorPick').ColorPicker({
                color: '#0000ff',
                onSubmit: function(hsb, hex, rgb, el) {
                        $(el).val(hex);
                        $(el).ColorPickerHide();
                },
                onBeforeShow: function () {
                        $(this).ColorPickerSetColor(this.value);
                }
        })
});


</script>
</body>
</html>

基本上当我没有flat时：true参数函数失败，而firebug显示在第二个例子中插件实际上是在文档上放置一个隐藏的div，可能是等待取消隐藏的颜色选择器。但是没有任何按钮显示出来。

我尝试将＆amp; nbsp放在那里，所以我会点击一下，但没有透露颜色选择器，但它确实在javascript控制台中显示消息“col is undefined”

从示例中复制和粘贴代码也会失败。我希望这里的解决方案对某人来说是显而易见的。

谢谢！

Answer 1

根据您的代码，它不应该是。
试试这个

<html>
<head>
        <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <title>Holy Crap what a Test!</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/colorpicker.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

</head>
<body>
<input type="text" id="colorPick"  value="00ff00" />Test color picker
<script type="text/javascript">

$(document).ready(function() {
        $('#colorPick').ColorPicker({
                color: '#0000ff',
                onSubmit: function(hsb, hex, rgb, el) {
                        $(el).val(hex);
                        $(el).ColorPickerHide();
                },
                onBeforeShow: function () {
                        $(this).ColorPickerSetColor(this.value);
                }
        })
});


</script>
</body>
</html>

在文本框上设置焦点将启动选择器，选择器中所选颜色的十六进制代码将分配给文本框。

使用jquery colorpicker插件时出现问题

1 个答案: