jQuery index.html上的颜色选择
[英]jquery color pick on index.html
问题描述
i try to add a jquery plugin in my app but not working :| 
我尝试在我的应用程序中添加一个jQuery插件，但不起作用：| so in head i have: 所以我的头上有：
<link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" />
<script type="text/javascript" src="./scripts/jqueryColorPicker/colorpicker.js"></script>
and somewhere in body: 在身体某处：
<script>
$("./images/colorwheel.png").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#footer').css('backgroundColor', '#' + hex);
$('#header').css('backgroundColor', '#' + hex);
}
});
</script>
but that wheel didnt appear on my page:| 但是那个轮子没有出现在我的页面上：| im new in jquery... :( 我在jQuery中是新的... :(
3 个解决方案
解决方案1
1 2013-08-18 12:05:23
Your selector for the color picker $("./images/colorwheel.png") is wrong. 您的颜色选择器$（“ ./ images / colorwheel.png”）选择器错误。
You need to have a html element on which the color picker should work. 您需要有一个颜色选择器应在其上工作的html元素。
You can have something like 你可以有类似的东西
<div class="someClass"><div>
And then you should initialize the colorpicker over it like this 然后您应该像这样初始化它的颜色选择器
$(".someClass").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#footer').css('backgroundColor', '#' + hex);
$('#header').css('backgroundColor', '#' + hex);
}
});
解决方案2
0 2013-08-18 12:00:23
Add an element which will hold your ColorPicker: 添加一个将保存您的ColorPicker的元素：
<input type="text" id="colorPicker">
Initialize the ColorPicker on that element: 在该元素上初始化ColorPicker：
$("#colorPicker").ColorPicker({
...
You should also use ready to make sure that your element is loaded when executing the js: 您还应该使用ready来确保在执行js时加载了元素：
$(document).ready(function() {
//Your code
});
And if you have multiple color pickers on your page, you'll have to use classes instead of the id. 如果页面上有多个颜色选择器，则必须使用类而不是id。
解决方案3
0 已采纳
1.You didn't include jquery library in the <head> . 1.您没有在<head>包含jquery库。
2.The selector is wrong, for example if you want to attach the color picker to textbox #colorpicker , the code should be: 2.选择器错误，例如，如果要将颜色选择器附加到文本框#colorpicker，则代码应为：
<input type="text" id="colorpicker">
$("#colorPicker").ColorPicker({ ... });
3.Put the code inside $(document).ready .. 3.将代码放入$（document）.ready ..
$(document).ready(function() {
$("#colorPicker").ColorPicker({ ... });
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.