Question

我尝试在我的应用程序中添加一个jquery插件但不工作：| 所以在头上我有：

<link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" />
<script type="text/javascript" src="./scripts/jqueryColorPicker/colorpicker.js"></script>

和身体的某个地方：

<script>
        $("./images/colorwheel.png").ColorPicker({
            color: '#0000ff',
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $('#footer').css('backgroundColor', '#' + hex);
                $('#header').css('backgroundColor', '#' + hex);
            }
        });
    </script>

但那个轮子没有出现在我的页面上：|我在jquery中新... :(

Answer 1

你的颜色选择器选择器$（“./ images / colorwheel.png”）是错误的。

你需要有一个颜色选择器可以使用的html元素。

您可以拥有类似

的内容

    <div class="someClass"><div>

然后你应该像这样

初始化颜色选择器

    $(".someClass").ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('#footer').css('backgroundColor', '#' + hex);
            $('#header').css('backgroundColor', '#' + hex);
        }
    });

Answer 2

添加一个可以容纳ColorPicker的元素：

<input type="text" id="colorPicker">

在该元素上初始化ColorPicker：

$("#colorPicker").ColorPicker({
...

您还应该使用ready来确保在执行js时加载了您的元素：

$(document).ready(function() {
    //Your code
});

如果您的网页上有多个颜色选择器，则必须使用类而不是ID。

Answer 3

1.您未在jquery中添加<head>库。

2.选择器错误，例如，如果要将颜色选择器附加到文本框#colorpicker，则代码应为：

<input type="text" id="colorpicker">    

$("#colorPicker").ColorPicker({ ... });

3.将代码放在$（document）.ready ..

中

$(document).ready(function() {
    $("#colorPicker").ColorPicker({ ... });
});

index.html上的jquery颜色选择

3 个答案: