二、使用效果

 
三、使用方法
1、引入js和css
   需要引入jquery
<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
2、html
<buttonid="picker">Show Color Picker</button>
3、导入图片
4、js弹出选择框
$('#picker').colpick();
 
四、使用过程中遇到的问题
1、弹框后颜色显示都是绿色

 原因:官方地址的demo只说明需要引入js和css,却没有说要引入图片,导致了这个问题
colpick.css中注意下面的图片地址要正确定位到具体的图片才行
2、onChange或其它时间无效
原因:如果js中同时定义了a、b两个方法就会导致b失效,解决方法为删除a方法即可
 
a) jQuery("#picker").colpick();
b) jQuery("#picker").colpick({
submit: false,
onChange: function (color, color2) {
jQuery("#pickerUnActived").css("color", '#' + color2);
}
});
 
五、相关资源下载
请从群共享中下载
 

colpick-jQuery颜色选择器使用说明的更多相关文章

  1. jQuery css()选择器使用说明

    css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...

  2. jquery颜色选择器

    本站下载 第二种:纯JAVASCRIPT: <html> <head> <meta http-equiv="Content-Type" content ...

  3. c#/asp.net实现炫酷仿调色板/颜色选择器功能

    asp.net 之颜色选择器,仿调色板功能 1. 插件非常容易使用,只需引用相应的js文件和css样式文件即可,见代码示例,插件精小,炫酷 2. 只需要初始化即可使用,并且选择的颜色会在文本框中以16 ...

  4. jquery选择器使用说明

    在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...

  5. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

  6. 改造过的JS颜色选择器

    项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...

  7. HTML5的input color系统颜色选择器

    前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...

  8. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  9. 基于vue的颜色选择器color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

随机推荐

  1. php的一些小细节

    1.今天看见 $arr3 = array_filter($arr, create_function('$v', 'return strlen($v);')); 作用就是去掉为空的元素,其实当callb ...

  2. Eclipse和MyEclipse工程描述符.classpath和.project和.mymetadata详解aaaaaa(转)

    Eclipse和MyEclipse工程描述符.classpath和.project和.mymetadata详解(转) (2012-03-28 15:06:54) 转载▼ 标签: .mymetadata ...

  3. 在C#中将String转换成Enum:

    一:  在C#中将String转换成Enum: object Enum.Parse(System.Type enumType, string value, bool ignoreCase); 所以,我 ...

  4. ToolkitScriptManager, ScriptManager AjaxControlToolkit 出错

    在使用ASP.NET AJAX应用时需添加ToolkitScriptManager或者ScriptManager.如果只是使用updatepanel,两者均可.如果有涉及到AJAX Control T ...

  5. 利用 Html 元标记控制搜索引擎蜘蛛

    摘要:快照不被百度缓存: meta name = Baiduspider content = noarchive 所有搜索引擎,抓取这个页面.爬行链接.禁止快照: meta name = robots ...

  6. 将函数传给webworker

    var zWorker = function (func,cb){ var node = document.createElement('script'),workerId='worker' + Da ...

  7. XML Data Type Methods(一)

    XML Data Type Methods(一) /*XML Data Type Methods: 1.The query('XQuery') method retrieves(vt.检索,重新得到) ...

  8. win10下 解决系统进程占用80端口

    公司电脑从win7升级到win10,无法启动nginx,日志里输出:2016/05/30 09:26:01 [emerg] 7024#5440: bind() to 0.0.0.0:80 failed ...

  9. warning: #870-D: invalid multibyte character sequence

    warning: #870-D: invalid multibyte character sequence2011-03-12 9:18warning: #870-D: invalid multiby ...

  10. WPF 3D模型 3D场景

    1.首先得说明的是这并不是真正的3D,模型被导出为一系列的单个图片,例如一个3D户型图,以某个视角旋转360°,渲染出一系列连续的单个图片文件. 2.在Image.MouseMove事件中添加相应代码 ...