Ошибка выбора цвета jquery - PullRequest
Новая
       10

Ошибка выбора цвета jquery

5 голосов
/ 20 марта 2012

Я пытаюсь реализовать jQuery ColorPicker (последний) из eyecon.ro / colorpicker , но всякий раз, когда я нажимаю на фактический ColorPicker, ничего не появляется, jquery выдает это сообщение об ошибке 

$("#colorSelector").ColorPicker is not a function
 onChange: function (hsb, hex, rgb) {

Вот мой код

js файл 

// Colorpicker
$('#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);
}
});

HTML-файл 

<html>
<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <title>ColorPicker - jQuery plugin</title>

    <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/layout.js?ver=1.0.2"></script>
</head>
<body>
    <div class="wrapper">
      <p>
         <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
      </p>  
    </div>
</body>
</html>

У меня есть все файлы, а css colorpicker просто не работает. Любые предложения о том, как я могу избавиться от этой ошибки?

Ответы [ 2 ]

4 голосов
/ 20 марта 2012 
<script type="text/javascript" src="jQuery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                            var borderColor;

            $('#tbcontentBorder').ColorPicker({
                onSubmit : function(hsb, hex, rgb, el) {
                    $(el).val('#' + hex);
                    $(el).ColorPickerHide();
                    borderColor = $('#tbcontentBorder').val();
                    $('#news').css('border-color', borderColor);
                },
                onBeforeShow : function() {
                    $(this).ColorPickerSetColor(this.value);
                }
            }).bind('keyup', function() {

                $(this).ColorPickerSetColor(this.value);

            });
        });

    </script>

html 

<div class="textBoxHolder">
        <label >Select Color</label>
        <input type="color" id="tbcontentBorder"  />
    </div>

это нормально работает для меня

2 голосов
/ 20 марта 2012

Вы добавили элемент управления текстовым полем, т.е. <input type="text"/>? В вашем HTML присвойте текстовое поле идентификатору, который выберет цвет.

...