2012-03-20 36 views
5

मैं eyecon.ro/colorpicker से jQuery colorpicker (पिछले एक) को लागू करने की कोशिश कर रहा हूँ, लेकिन जब भी मैं वास्तविक colorpicker कुछ भी नहीं पर क्लिक करने पर प्रकट jQuery यह त्रुटि संदेश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> 

मेरे पास सभी फाइलें शामिल हैं और सीएसएस रंगपिकर अभी काम नहीं कर रहा है। इस त्रुटि से छुटकारा पाने के तरीके पर कोई सुझाव?

+2

तुम से पहले या jQuery पुस्तकालय के बाद प्लग में शामिल किया था? सुनिश्चित करें कि आप इसे * के बाद * शामिल करें। –

+0

क्या आप अपना एचटीएमएल पोस्ट कर सकते हैं? Jquery लाइब्रेरी के बाद –

+0

@cory और मैंने – coletrain

उत्तर

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> 

एचटीएमएल

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

अपने काम के ठीक के लिए मुझे

+0

मेरे टर्मिनल में एक बग था इसलिए मुझे अपने सर्वर को पुनरारंभ करना पड़ा और सबकुछ वहां से काम कर रहा था। मेरे पास '$ .noConflict();' मेरी जेएस फ़ाइल – coletrain

+0

@coletrain भी था: सुनिश्चित करें कि आप 'NoConflict() 'मोड का सही उपयोग कर रहे हैं। वह फ़ंक्शन एक वैरिएबल देता है, और यह वैरिएबल आपको '$' के बजाय उपयोग करना चाहिए (उदा। 'Var $ j = jQuery.noConflict(); $ j (' # selector ')। कुछ(); ')। –

2

क्या आपने टेक्स्टबॉक्स नियंत्रण जोड़ा था, यानी <input type="text"/>? अपने एचटीएमएल में टेक्स्ट बॉक्स में एक आईडी दें जो रंग का चयन करेगी।

+0

से ऊपर कोड अपडेट किया है, मुझे ऐसा नहीं लगता है। क्या आप एक उदाहरण लिख सकते हैं? – coletrain

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^