0

我有一个添加 div 的 jquery 项目...我想让这些 div 作为颜色选择器...所以我想使用 websanova-wColorPicker jquery 库..但是在将它与我的代码集成之后。我在 chrome 中收到一个错误，即找不到颜色选择器方法..

一旦我删除了添加 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

所以这是我的问题..我如何使用 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 = '0123456789ABCDEF'.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..我想成为颜色选择器

4

1 回答 1

0

得到它..jquery 导入覆盖..彼此...确保没有重复

于 2016-07-13T14:24:12.750 回答