jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。效果如下：

代码如下：

<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>ColorPicker颜色选择器演示程序</title><style>body,blockquote {margin:0;padding:0;font-size:12px;font-family:"微软雅黑",Verdana,Arial}#container {width:900px;margin:0 auto;}#image {margin-bottom:10px;}blockquote {margin:10px 0;padding:0;}.act1 {width:50px;}pre {margin:0;padding:0;border:1px solid #ccc;margin-top:10px;padding-left:5px;}</style></head><body><div id="container"><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.colorpicker.js"></script> <h2>ColorPicker颜色选择器演示 </h2><blockquote><font color="blue">默认：</font><br />请输入颜色值：<input type="text" id="cp1" /><pre>$("#cp1").colorpicker({fillcolor:true});</pre></blockquote><blockquote><font color="blue">文字着色：</font><br />请输入颜色值：<input type="text" id="cp2" /><pre>$("#cp2").colorpicker({fillcolor:true,success:function(o,color){$(o).css("color",color);}});</pre></blockquote><blockquote><font color="blue">外部点击触发：</font><br />请输入颜色值：<input type="text" id="cp3text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp3" style="cursor:pointer"/><pre>$("#cp3").colorpicker({fillcolor:true,success:function(o,color){$("#cp3text").css("color",color);}});</pre></blockquote><blockquote><font color="blue">外部鼠标Mouseover触发：</font><br />请输入颜色值：<input type="text" id="cp4text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp4" style="cursor:pointer"/><pre>$("#cp4").colorpicker({fillcolor:true,event:'mouseover',success:function(o,color){$("#cp4text").css("color",color);}});</pre></blockquote><blockquote><font color="blue">填充其它对象：</font><br />请输入颜色值：<input type="text" id="cp5text" value=""/><img src="colorpicker.png" id="cp5" style="cursor:pointer"/><pre>$("#cp5").colorpicker({fillcolor:true,event:'mouseover',target:$("#cp5text")});</pre></blockquote></div><script type="text/javascript">$(function(){$("#cp1").colorpicker({fillcolor:true});$("#cp2").colorpicker({fillcolor:true,success:function(o,color){$(o).css("color",color);}});$("#cp3").colorpicker({fillcolor:true,success:function(o,color){$("#cp3text").css("color",color);}});$("#cp4").colorpicker({fillcolor:true,event:'mouseover',success:function(o,color){$("#cp4text").css("color",color);}});$("#cp5").colorpicker({fillcolor:true,event:'mouseover',target:$("#cp5text")});});</script></div></body></html>

下载代码

jQuery颜色选择器ColorPicker相关推荐

php和android选择器,Android_android 字体颜色选择器(ColorPicker)介绍，primary_text_yellow.xml 复制代码代 - phpStudy...
android 字体颜色选择器(ColorPicker)介绍 primary_text_yellow.xml themes.xml @color/primary_text_yellow相关阅读: 在L ...
UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout)
原文:UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout) ColorPicker 故事背景项目里面需要一个像Winfrom里面那样的颜色选择器,如 ...
java 选择颜色的控件_JavaFX颜色选择器(ColorPicker)
颜色选择器控件允许用户从可用的颜色范围中选择颜色,或通过指定RGB或HSB组合设置其他颜色.JavaFX ColorPicker控件具有颜色选择器,调色板和自定义颜色对话框窗口. 创建ColorPic ...
练习-原生js写的颜色选择器colorpicker
colorpicker 文章目录 colorpicker 需求分析: 第一种方案的颜色选择器: 点击色块选择颜色进行了改进, 把整个颜色选择器封装到js文件里, 通过appendChild的形式添加 ...
jquery颜色选择器
本站下载第二种:纯JAVASCRIPT: <html> <head> <meta http-equiv="Content-Type" content ...
颜色选择器html组件,ColorPicker 颜色选择器
ColorPicker 颜色选择器 ColorPicker 颜色选择器用于颜色选择,支持多种格式. 基础用法有默认值无默认值使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定 ...
10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本实现及其传说中的jQuery插件实现 ...
【PC工具】大神开源项目-配色调色工具Colorpicker颜色选择器
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 今天看到一个不错的开源的大神的作品,Colorpicker颜色选择器,和大家分享一下. ...
【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

jQuery颜色选择器ColorPicker

jQuery颜色选择器ColorPicker相关推荐

最新文章

热门文章