0
divを追加するjqueryプロジェクトがあります。これらのdivをカラーピッカーとして作成したいので、websanova-wColorPicker jqueryライブラリを使用したいと思います。私のコード。私は色のピッカーメソッドが見つかりませんでしたクロムでエラーが発生します..jqueryでカラーピッカーのメソッドが見つかりません
私はdivを追加する私のjqueryコードを削除します。色のピッカーは動作します..私は結論私は同じエラーでだけでなく、他のカラーピッカーライブラリを試してみましたと...私もjQueryのUIを使用
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はカラーピッカーです.help。
コード：
<!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>
</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
あなたのコードを教えてください。 –
コードを実際にクリーンアップする必要があります。私が最初にやることは、あなたのスタイルをすべてjavascriptで動的に追加するのではなく、スタイルシートに移動することです。次に、あなたはJavaScriptの一貫性を保つために作業する必要があります。私。 jquery関数でのみ '$'または 'jQuery'のみを使用し、純粋なjavascriptのみを使用するか、またはdom操作のためにjQueryのみを使用し、適切なインデントを追加してください。 – jrummell
これを検討してください。他の2色のピッカーライブラリーも同様ですが、まだエラーが発生します – Suraj