<link rel="Stylesheet" type="text/css" href="/a/plugins/wColorPicker/wColorPicker.css" />
<script type="text/javascript" src="/a/plugins/wColorPicker/wColorPicker.js"></script>
<div id="wColorPicker1_holder">
<input id="wColorPicker1_input" type="text" value="" style="margin-top: 5px;"/><br/><br/>
</div>
<script type="text/javascript">
$("#wColorPicker1_holder").wColorPicker({
initColor: "#FF00FF",
onSelect: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
},
onMouseover: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
},
onMouseout: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
}
});
</script>
wColorPicker Demo
• Documentation & Download on GitHub
• Websanova Plugins Page
• jQuery Plugin Development Boilerplate
• The Ultimate Guide to jQuery Plugin Development
• Websanova Plugins Page
• jQuery Plugin Development Boilerplate
• The Ultimate Guide to jQuery Plugin Development
<link rel="Stylesheet" type="text/css" href="/a/plugins/wColorPicker/wColorPicker.css" />
<script type="text/javascript" src="/a/plugins/wColorPicker/wColorPicker.js"></script>
<div id="wColorPicker2_1" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker2_2" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker2_3" style="float:left;margin-right:10px;"></div>
<div style="clear:both"></div>
<script type="text/javascript">
$("#wColorPicker2_1").wColorPicker({
theme: "red",
mode: "hover",
showSpeed: 200,
hideSpeed: 200
});
$("#wColorPicker2_2").wColorPicker({
theme: "green",
mode: "hover",
showSpeed: 400,
hideSpeed: 400
});
$("#wColorPicker2_3").wColorPicker({
theme: "blue",
mode: "hover",
showSpeed: 600,
hideSpeed: 600
});
</script>
| |
<link rel="Stylesheet" type="text/css" href="/a/plugins/wColorPicker/wColorPicker.css" />
<script type="text/javascript" src="/a/plugins/wColorPicker/wColorPicker.js"></script>
<div id="wColorPicker3_1" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker3_2" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker3_3" style="float:left;margin-right:10px;"></div>
<div style="clear:both"></div>
<script type="text/javascript">
$("#wColorPicker3_1").wColorPicker({
theme: "orange",
initColor: "#003366",
mode: "click",
effect: "fade",
showSpeed: 200,
hideSpeed: 200
});
$("#wColorPicker3_2").wColorPicker({
theme: "cream",
initColor: "#663366",
mode: "click",
effect: "fade",
showSpeed: 400,
hideSpeed: 400
});
$("#wColorPicker3_3").wColorPicker({
theme: "plum",
initColor: "#996633",
mode: "click",
effect: "fade",
showSpeed: 600,
hideSpeed: 600
});
</script>
|