2012-05-10 74 views
0

沒有發現我有一個jquery項目,增加了申報單......我想TA使這些div如拾色器...所以我想用websanova-wColorPicker的jQuery library..but與整合之後我的代碼。我得到一個鉻的錯誤,顏色選擇器的方法沒有找到..顏色選擇器方法的jQuery

一旦我刪除我的jquery代碼,添加div..the顏色選擇器works..thus我得出結論,它由於衝突我曾嘗試另一種顏色選擇器庫,以及與同樣的錯誤......我用jQuery用戶界面以及

Uncaught TypeError: Object [object Object] has no method 'wColorPicker' i.html:83 
jQuery.click.show i.html:83 
f.event.dispatch jquery.1.7.1.min.js:3 
f.event.add.h.handle.i jquery.1.7.1.min.js:3 

所以這裏是我的problem..how如何建立與Websanova拾色器應用,即動態的div 。每個div是一個顏色選擇器..幫助。

代碼:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Websanova Color Picker</title> 
    <link href="css/index.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script> 
    <link rel="Stylesheet" type="text/css" href="./wColorPicker.css" /> 
    <script type="text/javascript" src="./wColorPicker.js"></script> 

</head> 
<body> 
     <div id="wColorPicker7" class="hoverBox"></div> 
     <script type="text/javascript"> 

     $("#wColorPicker7").wColorPicker({onSelect:function(color){/*do something*/}, mode: 'click', effect: 'fade', color: 'yellow'}); 





    $(window).load(function(){ 

    jQuery("#coldwn").click(function(event){ 
    var showOptions = function() 
    { 
     $(this).css("background-image", "url(images/us.png)"); 
    }; 
    var showOptionso = function() 
    { 
     $(this).css("background-image", "url(images/ua.png)"); 
    }; 
    var cc = function() 
    { 
     var letters = 'ABCDEF'.split(''); 
    var c = '#'; 
    for (var i = 0; i < 6; i++) { 
     c += letters[Math.round(Math.random() * 15)]; 
    } 


     $(this).css("background-color", c); 
    }; 
w=document.getElementById('coldwn').offsetWidth; 


var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 



    xa = document.getElementById('coldwn').offsetTop; 
    var x = event.pageX, 
     y = event.pageY; 
    var $mystub=jQuery("<div>").addClass("node").attr('id', x+'o').css({position: "absolute",left:x,top:xa,width:"16px",height:"20px"}).hover(showOptions,showOptionso); 
    var $mystuba=jQuery("<div>").addClass("color").attr('id', x+'i').css({position: "absolute",top:"7px",width:"16px",height : "14px",value:p,autocomplete:"off"}).click(cc); 
    $mystub.append($mystuba); 
    $('#coldwn').append($mystub); 

$("#"+x+"i").wColorPicker({onSelect:function(color){/*do something*/}, mode: 'click', effect: 'fade', color: 'yellow'}); 
    $("#"+x+"o").draggable({ containment: "#coldwn", scroll: false,axis: "x", 
    start: function() {  }, 
     drag: function(event, ui) { 
     var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 
     $('textarea').val(per); 



    // -webkit-linear-gradient(bottom, rgb(40,51,157) 32%, rgb(68,77,189) 66%, rgb(105,138,14) 77%); 
     }, 
     stop: function() { 
     var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 
     alert(per); 

     } }); 


    }); 




    }); 
function d() 
{ 


var i=20; 
var str=""; 

alert($('#coldwn').children("div").size()); 

$('.node').children("div").each(function() 
{ 
var kid = $(this); 
var cr = $(this).css("background-color"); 
str+=cr+" "+i+"%,"; 
console.log(str); 
i+=20; 
console.log(kid.attr('id'),cr); 
}).sort(); 


str+="rgb(105,138,14) 100%)"; 
alert(str); 
$('#mainarea').css("background-image","-webkit-linear-gradient(bottom, "+str); 

console.log("background-image","-webkit-linear-gradient(bottom, "+str); 
// $('#mainarea').css("background-image","-webkit-linear-gradient(bottom, rgb(40,51,157) 32%, rgb(68,77,189) 66%, rgb(105,138,14) 77%)"); 

} 
     </script> 
    <p> 
     <span id="u70">CSS GRADIENTS</span> 
    </p> 
    <p> 
     &nbsp; 
    </p> 
    <div id="wrap"> 
     <div id="topop" class="topop"></div> 
     <div id="mainarea" class="maingrad"></div> 
     <div id="coldwn" class="col"></div> 
    </div><br> 
    <div id="wColorPicker7" class="hoverBox"></div> 


</body> 
</html> 

注:jQuery中的代碼創建divs..i希望再成爲colorpickers

+0

向我們顯示您的代碼。 –

+0

你應該真的清理你的代碼。我要做的第一件事就是將所有樣式移動到樣式表中,而不是使用javascript動態添加它們。然後你應該努力使你的JavaScript一致。即只使用'$'或'只用jQuery' jQuery函數,只使用純JavaScript或只針對jQuery的DOM操作,加適量縮進等 – jrummell

+0

考慮done..any線索,以義取this..i與試了一下2個其他顏色選擇器庫,很好,但仍然得到錯誤 – Suraj

回答

0

了it..jquery進口override..each等......爲確信無副本

+0

請添加更多的細節,你的解決方案 – abarisone