trouble with jquery colorpicker plugin_问答_开发者

开发者 https://www.devze.com 2023-01-07 09:48 出处：网络

I\'m messing with the colorpicker plugin for jquery and found that while the sample html page works fine, I can\'t seem to get it to work in my test.html file.

相关专题：jquery

I'm messing with the colorpicker plugin for jquery and found that while the sample html page works fine, I can't seem to get it to work in my test.html file.

This works:

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

But this does not (entire test html page included for context):

<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(开发者_C百科hex);
                        $(el).ColorPickerHide();
                },
                onBeforeShow: function () {
                        $(this).ColorPickerSetColor(this.value);
                }
        })
});


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

Basically when I don't have flat:true in the parameters the function fails, and firebug reveals that in the second example the plugin is in fact placing a hidden div on the document that is presumably the color picker waiting to be unhidden. But no button is showing up to reveal it.

I tried placing the &nbsp inside the span there so I would have something to click on, which didn't reveal the color picker but it did reveal in the javascript console the message "col is undefined"

Copying and pasting code from the examples fails too. I'm hoping the solution here will be obvious to someone.

Thanks!

According to your code, it should NOT be .
Try this

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

Setting focus on the textbox will launch the picker and the chosen hex code of the color in the picker will be assigned to the textbox.