bigcolorpicker 颜色拾取器插件——例
参考：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 颜色拾取器插件——例的更多相关文章
- 推荐一款jQuery ColorPicked 颜色拾取器插件
先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...
- js颜色拾取器
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- HTML5、canvas颜色拾取器
效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)
Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...
- CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL
CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...
- docker上安装elasticsearch和ik分词器插件和header，实现分词功能
docker run -di --name=tensquare_es -p 9200: -p 9300:9300 elasticsearch:5.6.8 创建elasticsearch容器(如果版本不 ...
- jQuery多媒体播放器插件jQuery Media Plugin使用方法
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...
- Wavesurfer.js音频播放器插件的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...
随机推荐
- thinkphp 数据缓存
在ThinkPHP中进行缓存操作,一般情况下并不需要直接操作缓存类,因为系统内置对缓存操作进行了封装,直接采用S方法即可,例如: 缓存初始化 // 缓存初始化 S(array('type'=>' ...
- linux Netcat命令--网络工具瑞士军刀
https://www.cnblogs.com/ikaka/p/5197316.html
- linux centos 安装配置rsync
先安装rsync yum install rsync 创建文件,并配置权限 touch /etc/rsyncd.conf touch /etc/rsyncd.secrets /etc/rsyncd.s ...
- Linux环境上的图形化界面SVN客户端软件“RabbitVCS”
RabbitVCS基本支持所有的Linux发行版本包括ubuntu.Debian.Fedora.Arch Linux.Gentoo.Mandriva.OpenSUSE.RHEL.CentOS 5等.其 ...
- docker 环境搭建步骤
配置CA: zhaoweipeng@bogon:~$ ls106 baseos.tar fabric-sdk fabric-sdk (1).tar fixture_106zhaoweipeng@bog ...
- C++之静态（static）
一.静态数据成员与静态成员函数 二.从内存角度看静态数据成员 三.从this指针谈静态成员函数 四.注意事项 五.补充说明 1.<静态>课程评论: 静态成员是类的成员,不是对象的成员: 静 ...
- jquery操作html元素之（ 尺寸）
jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery ...
- 如何读懂Web服务的系统架构图
Web服务的一个重要特点就是流量大.数据多,仅靠一台服务器肯定难以支撑大规模的服务. 所以我们经常会看到诸如以下的一些术语,教人好生不懂: *:系统架构.物理架构.Web服务基础设施 *:应用服务器 ...
- iOS开发系列-NSDate
NSDate API 获取当前时间 获取时间戳 创建间隔指定时间戳的Date // 获取昨天 NSTimeInterval time = 24 * 60 * 60; NSDate *date = [N ...
- SpringMVC常用注解知识总结
1.@Controller 注解到类名上,表示该类是控制器. 2.@RequestMapping("/xxxx") 可以放在类名/方法名之上,表示访问请求该方法时的url.如果该方 ...