参考：http://bigui4.sinaapp.com/picker/colorpicker.html

效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>取色</title>

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

        <link rel="stylesheet" href="http://bigui4.sinaapp.com/css/jquery.bigcolorpicker.css">

        <script src="http://bigui4.sinaapp.com/js/jquery.bigcolorpicker.js"></script>

        <style>

            input{

                background:none;

                outline:none;

                border:1px solid gray;

            }

        </style>

    </head>

    <body>

        <div>

            <input type="text" value="" id="demoText" />

            <input id="bn" type="button" value="选色" />

        </div>

        <script type="text/javascript">

            $("#bn").bigColorpicker(function(el, color) {

                $('#demoText').css('background', color);

                $('#demoText').val(color);

            });

        </script>

    </body>

</html>

注意：还需将big_bgcolor.jpg复制到项目中，图片放置的目录结构参考css：

.bigpicker-bgimage{

    background-image:url(../images/big_bgcolor.jpg);

}
big_bgcolor.jpg：

bigcolorpicker 颜色拾取器插件——例的更多相关文章

  1. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  2. js颜色拾取器

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

  3. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. docker上安装elasticsearch和ik分词器插件和header，实现分词功能

    docker run -di --name=tensquare_es -p 9200: -p 9300:9300 elasticsearch:5.6.8 创建elasticsearch容器(如果版本不 ...

  8. jQuery多媒体播放器插件jQuery Media Plugin使用方法

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

  9. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

随机推荐

  1. MaxCompute表设计最佳实践

    MaxCompute表设计最佳实践 产生大量小文件的操作 MaxCompute表的小文件会影响存储和计算性能,因此我们先介绍下什么样的操作会产生大量小文件,从 而在做表设计的时候考虑避开此类操作. 使 ...

  2. Quick BI功能篇之（一）：20分钟入门

    前言: 最近小编帮助隔壁团队一个小姐姐解决了个大难题:给老板汇报业绩分析,频次提高.效率提升,还得保证团队中的小伙伴们都得有点大数据时代的基本数据能力.小编觉得这么好的经验可以分享给更多志同道合的朋友 ...

  3. poi之Excel上传

    poi之Excel上传 @RequestMapping(value = "/import", method = RequestMethod.POST) public String ...

  4. 实时查询系统架构：spark流式处理+HBase+solr/ES查询

    最近要做一个实时查询系统,初步协商后系统的框架 1.流式计算:数据都给spark 计算后放回HBase 2.查询:查询采用HBase+Solr/ES

  5. 从0的1学习JavaSE,Jdk的安装

    一.常用的dos命令 dir 罗列出当前目录的下所有文件名字 cd 路径 切换路径,该路径可以是相对于路径也可以是绝对路径 相对路径,只相对于当前的目录下的文件 绝对路径,是从盘符开始的路径地址 注意 ...

  6. STM32---初学者用库函数好还是直接对寄存器操作比较好

    引用:http://blog.csdn.net/u010349006/article/details/416 首先,两个都是C语言.从51过渡过来的话,就先说寄存器操作.每个MCU都有自己的寄存器,5 ...

  7. Vue项目如何关闭Eslint检测

    找到build/webpack.base.config.js文件,修改如下 将图中第二个红色框的内容 "createLintingRule()" 清空,然后保存重新启动项目即可.

  8. sparkStreaming的transformation和action详解

    根据Spark官方文档中的描述,在Spark Streaming应用中,一个DStream对象可以调用多种操作,主要分为以下几类 Transformations Window Operations J ...

  9. SQL SERVER 2008R2 执行大脚本文件时，提示“内存不足”的解决办法

    我把一个数据库的架构及数据都已脚本的方式拷贝下来,再去新建一个数据库想把脚本执行一下,但提示如下错误: 问题描述: 当客户服务器不允许直接备份时,往往通过导出数据库脚本的方式来部署-还原数据库, 但是 ...

  10. dex2jar+jd-gui反编译apk的使用方法

    1.将要反编译的APK后缀名改为.rar或 .zip,并解压 2.得到其中的classes.dex文件(它就是java文件编译再通过dx工具打包而成的),将获取到的classes.dex放到之前解压出 ...