cxColor 是一款颜色选择器。这样的插件使用场景不多。可喜的这是国人写的。

官方网站: https://github.com/ciaoca/cxColor

使用方法:

1、引入jquery库

2、引入cxColor的css和js

1
2
<link rel="stylesheet" href="css/jquery.cxcolor.css">
<script src="js/jquery.cxcolor.min.js"></script>

3、创建cxColor颜色选择器

官方网站demo是使用input组件,官方网站没说明,在些特别提醒下。

添加input组件

1
<input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly>

再使用cxColor()构造函数创建cxColor实例

1
$('#color_a').cxColor();

还有更高级的用法,如在创建实例时设置默认颜色。参考官方源码  https://github.com/ciaoca/cxColor

<!DOCTYPE html5>
<html>
<head>
<title>颜色选择器</title>
<meta charset="UTF-8" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.cxcolor.css">
<script src="js/jquery.cxcolor.min.js"></script>
<style type="text/css"> </style>
</head>
<body>
<input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly>
<script>
$('#color_a').cxColor();
</script>
</body>
</html>

  

插件使用一颜色选择器---cxColor的更多相关文章

  1. -_-#【jQuery插件】Colorpicker 颜色选择器

    Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...

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

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

  3. 11个JavaScript颜色选择器插件

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

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

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

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

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

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

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

  7. UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)

    ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...

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

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

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

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

随机推荐

  1. python第二天,list和tuple

    概念:list是集合,且是可变集合,tuple是元组集合,不可变集合. 1.Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 主要知识点:初始化 ...

  2. string.Empty, "" 和 null 三者的区别

    转载:http://www.cnblogs.com/mxxblog/archive/2013/08/22/3275387.html 这是一个及其常见的问题,网上已经有关于这个问题的很多讨论.但是我觉得 ...

  3. HAProxy详解(二):HAProxy基础配置与应用实例

    一.HAProxy基础配置与应用实例: 1.快速安装HAProxy集群软件: HAProxy的官网: https://www.haproxy.org/#down下载HAProxy的源码包. 安装: [ ...

  4. axios请求接口的踩坑之路

    1.跨域问题除了前端安装插件还需要后端php设置,设置如下 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, ...

  5. bootstrap例子

    <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> &l ...

  6. vc++基础班[23]---文件夹的基本操作

      ①.文件夹的创建:CreateDirectory ※※※ 注意:此函数只能创建一层目录,比如想在 C 盘下的 Temp 目录下创建新目录为:123 那么前提是 Temp 这个目录存在才可以!   ...

  7. 范围for语句

    C++11 新标准引入了一种更简单的for语句,这种语句可以遍历容器或其他序列的所有元素.范围for语句(range for statement)的语法形式是: for (declaration : ...

  8. Mudo C++网络库第六章学习笔记

    muduo网络库简介 高级语言(Java, Python等)的Sockects库并没有对Sockects API提供更高层的封装, 直接用它编写程序很容易掉到陷阱中: 网络库的价值还在于能方便地处理并 ...

  9. 【进阶3-3期】深度广度解析 call 和 apply 原理、使用场景及实现(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/22 call() 和 apply() call() 方法调用一个 ...

  10. 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/RZ8Lpkyk8lz6z5H8Q8SiEQ 垃圾回收算法 常用垃圾回收算法叫做**标记清除 ...