专栏首页编程微刊拾色器插件colorpicker.js的应用

拾色器插件colorpicker.js的应用

需求:点击颜色的input框的时候,会出现拾色器的插件,将自己选择的颜色的色号赋值给input里面,在插件库里面找到了一个UI样式还比较好看的插件,作了一些修改,符合项目需要,分享出来。

找了一个拾色器插件,将colorpicker.js下载并且引用。

<script src="./colorpicker.js"></script>

下载地址:http://www.jq22.com/jquery-info22179

参考demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>colorpicker</title>
    <script src="./colorpicker.js"></script>
    <style>
    </style>
</head>
<body>
    <div class="abc">
        <h3>点击下方选择颜色</h3>
        <input  id="color-picker"></input>
    </div>
    <button  type="submit">提交</button>
</body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
    new Colorpicker({
        el: "color-picker",
        color: "#000fff",
        change: function(elem, hex) {
            console.log(elem, hex)
            document.getElementById("color-picker").value=hex;
        }
    })
</script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用户名验证:限16个字符,支持中英文、数字、下划线

    继续写一个用户名验证,验证规则,限16个字符,支持中英文、数字、下划线,当符合验证规则的时候,弹框提示正确,当出现特殊字符,不符合验证规则的时候,弹框提示错误,...

    祈澈菇凉
  • Highcharts柱形范围图使用示例

    引入文件文件源码:下载https://img.hcharts.cn/highcharts/highcharts-more.js

    祈澈菇凉
  • 表格插件-bootstrap table的使用示例

    基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

    祈澈菇凉
  • scrapy分布式爬虫scrapy_redis一篇

    可以看到,scrapy单机模式,通过一个scrapy引擎通过一个调度器,将Requests队列中的request请求发给下载器,进行页面的爬取。

    周小董
  • js三种引用方式

    2.行内使用方式,在标签内声明一下,比如a标记herf内嵌套JavaScript:

    十月梦想
  • 5、webpack从0到1-处理css文件

    Ewall
  • kvm 虚拟机 转换成vmware虚拟机

    # qemu-img convert Monitor.img –O vmdk ./Monitor.vmdk

    三杯水Plus
  • byte util 笔记

    solate
  • 【Webpack】538- 打包速度提升指南

    webpack 打包优化并没有什么固定的模式,一般我们常见的优化就是拆包、分块、压缩等,并不是对每一个项目都适用,针对于特定项目,需要不断调试不断优化。

    pingan8787
  • 【第9期】webpack入门学习手记(三)

    距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难?

    siberiawolf

扫码关注云+社区

领取腾讯云代金券