2012-03-20 14 views
5

Tôi cố gắng để thực hiện ColorPicker jquery (cuối cùng) từ eyecon.ro/colorpicker nhưng bất cứ khi nào tôi bấm vào ColorPicker gì thực tế xuất hiện jquery ném thông báo lỗi nàyjquery chọn màu lỗi

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

Đây là mã của tôi

js nộp

// 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); 
} 
}); 

tập tin 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> 

Tôi có tất cả các tệp được bao gồm và css colorpicker không hoạt động. Bất kỳ đề xuất về cách tôi có thể thoát khỏi lỗi đó?

+2

Bạn có bao gồm các plug-in trước hoặc sau khi thư viện jQuery? Hãy chắc chắn rằng bạn bao gồm nó * sau *. –

+0

Bạn có thể đăng html của mình không? –

+0

@cory sau khi thư viện jquery và tôi đã cập nhật mã trên – coletrain

Trả lời

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

tốt làm việc của nó đối với tôi

+0

Có lỗi trong thiết bị đầu cuối của tôi vì vậy tôi phải khởi động lại máy chủ của mình và mọi thứ đã hoạt động từ đó. Tôi cũng có '$ .noConflict();' đối với tệp js của tôi – coletrain

+0

@coletrain: Đảm bảo bạn đang sử dụng chế độ 'noConflict()' một cách chính xác. Hàm đó trả về một biến và đó là biến mà bạn nên sử dụng thay vì '$' (ví dụ: 'var $ j = jQuery.noConflict(); $ j ('# selector'). Something();'). –

2

Bạn có thêm điều khiển hộp văn bản, tức là <input type="text"/> không? Trong html , hãy nhập ID vào hộp văn bản sẽ chọn màu.

+0

không tôi không nghĩ như vậy. Bạn có thể viết một ví dụ? – coletrain