• UID30
  • 登录2016-10-11
  • 粉丝27
  • 关注104
  • 发帖50
  • 主页
  • 金币1032枚
原创写手
社区居民
忠实会员
追星一族
Kimi.Huang 发布于2015-08-30 16:47
1/2375

[前端开发]取色板/拾色板(Spectrum)

楼层直达
1、Spectrum 简介
Spectrum是一个jQuery拾色器插件,可能包含了你正在寻找的所有功能。只用到CSS+JS实现,不需要图片。 支持调色板存储/显示你选择的颜色,可以设置默认选中的颜色,也可以配置为只显示预先定义好的一些颜色的调色板。
2、Spectrum 使用
2.1、引入 JS
<script src="http://cdn.bootcss.com/spectrum/1.7.0/spectrum.min.js"></script>
<script src="http://cdn.bootcss.com/spectrum/1.7.0/i18n/jquery.spectrum-zh-cn.min.js"></script>
2.2、HTML
<input id="btn_color" value="#ffffff">
2.3、CSS
<link href="http://cdn.bootcss.com/spectrum/1.7.0/spectrum.min.css" rel="stylesheet">
2.4、JAVASCRIPT
$("#btn_color").spectrum({
    allowEmpty:true,
    color: "red",
    showInput: true,
    containerClassName: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    showAlpha: true,
    maxPaletteSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    move: function (color) {
    },
    show: function () {
    },
    beforeShow: function () {
    },
    hide: function (color) {
        alert(color.toHexString())
    },
    palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(153, 153, 153)","rgb(183, 183, 183)",
        "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(239, 239, 239)", "rgb(243, 243, 243)", "rgb(255, 255, 255)"],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
        "rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
        "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",
        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
    ]
});
3、Spectrum 效果图

描述:Spectrum 效果图

图片:CC4B7490-9B6E-48B3-BE5F-048B2207ADEE.png

Spectrum 效果图

4、回调函数
4.1、beforeShow
  • 点击按钮, 展示 取色板 前回调
4.2、show
  • 点击按钮, 展示 取色板 时回调
4.3、move
  • 展示 取色板 后,鼠标在取色板上移动时回调
4.4、hide
  • 隐藏 取色板 时回调
  • 不管是 取消 还是 确认,都会进行相应回调
5、颜色格式
var t = $("#btn_color").spectrum("get");
t.toHex()            // "ff0000"
t.toHexString()   // "#ff0000"
t.toRgb()            // {"r":255,"g":0,"b":0}
t.toRgbString()   // "rgb(255, 0, 0)"
t.toHsv()            // {"h":0,"s":1,"v":1}
t.toHsvString()   // "hsv(0, 100%, 100%)"
t.toHsl()            // {"h":0,"s":1,"l":0.5}
t.toHslString()   // "hsl(0, 100%, 50%)"
t.toName()        // "red"
6、HTML5(移动端)拾色器
6.1、HTML
<input id="btn_color2" type="color" value="#ffffff">
6.2、效果图

描述:type="color"

图片:F38A0DA1-E312-474B-91C8-DE9AC47E6F1F.png

type="color"
6.3、JAVASCRIPT
$("#btn_color2").change(function() {
    alert($(this).val())
})
7、源码示例
Spectrum.zip
7.1、项目说明
7.1.1、Spectrum 以及 input type color 两者在源码中都有体现
7.1.2、推荐使用 Spectrum,相对于 input type color 可定制性更高
本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com转载请保留此申明】

0人打赏
  • UID15
  • 登录2016-08-05
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1838枚
社区居民
喜欢达人
原创写手
janking 发布于2015-09-01 10:24
沙发F
终于来答啦!等好久的说!
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 60118/343   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 33292/188   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 31888/141   省时省力的Android组件群来了,非常棒的原型参考

  • 29032/226   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 26218/2   超全!整理常用的iOS第三方资源

  • 25780/0   Python爬虫:常用浏览器的useragent

  • 24732/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22948/138   2016抢红包软件及源码

  • 19964/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19805/25   Android工程师面试题大全

  • 19227/27   2016程序员跳槽全攻略

  • 19013/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18522/20   码魂:程序员的牛B漫画

  • 16871/3   吐槽那些程序员的搞笑牛逼注释

  • 16850/149   Android版类似UC浏览器:非常赞,产品级的源码

  • 15704/1   iOS 动画总结

  • 15296/10   2016年最全的Android面试考题+答案 精编版

  • 15252/41   一个绚丽的loading动效分析与实现!

  • 14814/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14761/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14662/10   女程序员的梦,众网友的神回复

  • 14539/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 14467/11   年会上现场review代码是怎么样的体验!

  • 14204/23   个人收集的Android 各类功能源代码

  • 14108/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13287/19   珍藏多年的素材,灵感搜寻网站

  • 13235/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12905/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12777/15   基于Android支付宝支付设计和开发方案

  • 12754/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12513/20   Android福利第三波【Android电子书】

  • 12333/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12170/18   65条最常用正则表达式,你要的都在这里了

  • 12166/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 12045/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11744/7   用程序员的姿势抢过年的火车票

  • 11678/7   一张图搞定iOS学习路线,非常全面

  • 11643/0   iOS中文版资源库,非常全

  • 11631/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 11157/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10902/18   一张图搞定Android学习路线,非常全面

  • 10835/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10485/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 10456/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10371/29   【持续更新中】Android福利贴(一):资料源码

  • 10348/0   GitHub iOS 库和框架Top100 

  • 9923/4   46 个非常有用的 PHP 代码片段

  • 9703/3   即时通信第三方库

  • 9605/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9505/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9464/8   流媒体视频直播方案

  • 9314/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 9210/18   八个最优秀的Android Studio插件

  • 9161/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9070/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8635/6   开箱即用!Android四款系统架构工具

  • 8526/3   一张图看清Linux 内核运行原理

  • 8421/10   十大技巧快速提升Android应用开发性能

  • 8399/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8090/1   Android性能优化视频,文档以及工具

  • 返回顶部