当前位置: 首页 > news >正文

颜色选择器插件

项目中需要用到颜色插件改变颜色,找了一下,发现了这个插件。1,可以实时地改变颜色,2,颜色选择的范围大

要在head标签里面引进改插件

<script src="js/colpick.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
页面:
 1 # <input type="text" id="picker"></input>
 2 JS
 3 
 4 $('#picker').colpick({
 5 
 6     layout:'hex',
 7 
 8     submit:0,
 9 
10     colorScheme:'dark',
11 
12     onChange:function(hsb,hex,rgb,el,bySetColor) {
13 
14         $(el).css('border-color','#'+hex);
15 
16         // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
17 
18         if(!bySetColor) $(el).val(hex);
19 
20     }
21 
22 }).keyup(function(){
23 
24     $(this).colpickSetColor(this.value);
25 
26 });
27 CSS
28 
29 #picker {
30 
31     margin:0;
32 
33     padding:0;
34 
35     border:0;
36 
37     width:70px;
38 
39     height:20px;
40 
41     border-right:20px solid green;
42 
43     line-height:20px;
44 
45 }

 

效果图:

 插件下载地址:https://git.oschina.net/wxwphp/col.git

 

转载于:https://www.cnblogs.com/wxw1314/p/6030087.html

相关文章:

  • JDBC中驱动加载的过程分析(下)
  • 条件控制语句
  • hibernate重要接口说明
  • 微信开发个人总结
  • Hibernate中对象的三种状态及相互转化
  • hibernate脏数据检查
  • 版本控制-Git服务器搭建和常用命令使用
  • hibernate中get与load的区别
  • 双11_2016
  • hibernate中的Session.flush()
  • hibernate的lazy机制
  • hibernate的lazy策略使用总结
  • springmvc-spring-mybatis实现最简单的登录验证
  • hibernate 的lazy策略存在的问题
  • hibernate中的悲观锁和乐观锁
  • SegmentFault for Android 3.0 发布
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • HashMap剖析之内部结构
  • Java小白进阶笔记(3)-初级面向对象
  • jdbc就是这么简单
  • leetcode讲解--894. All Possible Full Binary Trees
  • LintCode 31. partitionArray 数组划分
  • Next.js之基础概念(二)
  • Phpstorm怎样批量删除空行?
  • Python_网络编程
  • Ruby 2.x 源代码分析:扩展 概述
  • windows-nginx-https-本地配置
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 排序(1):冒泡排序
  • 算法-图和图算法
  • 小而合理的前端理论:rscss和rsjs
  • 一些css基础学习笔记
  • 正则表达式
  • ​​​​​​​ubuntu16.04 fastreid训练过程
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​VRRP 虚拟路由冗余协议(华为)
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • $(function(){})与(function($){....})(jQuery)的区别
  • $.proxy和$.extend
  • (175)FPGA门控时钟技术
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (论文阅读11/100)Fast R-CNN
  • (转)Linq学习笔记
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转)PlayerPrefs在Windows下存到哪里去了?
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
  • .NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2
  • .NET连接MongoDB数据库实例教程
  • [ Linux ] git工具的基本使用(仓库的构建,提交)