原生js编写的安全色拾色器
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#abc-colorPicker .colorPick-close,#filter-colorPicker .colorPick-close{position:absolute;right:0;}
#abc-colorPicker a,#filter-colorPicker a,#colorPicker a{border-bottom:1px solid #000;border-left:1px solid #FFF;border-right:1px solid #000;border-top:1px solid #FFF;cursor:pointer;display:block;float:left;height:15px;overflow:hidden;width:15px;}
#abc-colorPicker a:hover,#filter-colorPicker a:hover,#colorPicker a:hover{opacity:.5;}
#abc-colorPicker li,#filter-colorPicker li,#colorPicker li{display:inline;list-style:none;overflow:hidden;}
#abc-colorPicker ul,#filter-colorPicker ul,#colorPicker ul{-moz-transition:all .8s ease-in 1s;-ms-transition:all .8s ease-in 1s;-o-transition:all .8s ease-in 1s;-webkit-transition:all .8s ease-in 1s;float:left;margin:0;overflow:hidden;transition:all .8s ease-in 1s;width:102px;}
#abc-colorPicker,#filter-colorPicker,#colorPicker{background:#FFF;border:solid 1px #eee;display:none;padding:5px;width:312px;}
#demo{height:600px;margin:0 auto;width:800px;}
*{margin:0;padding:0;}
.colorPicker-container a:hover{border-bottom:1px solid #000;border-top:1px solid #000;}
.colorPicker-preview{color:#FFF;display:inline-block;height:30px;line-height:30px;width:60px;}
.colorPicker-title{height:30px;overflow:hidden;}
</style>
</head>
<body>
<div style="height:500px;"></div>
<div id="demo">
<input type="text" id="filter"/>
<input type="text" id="abc"/>
</div>
<script type="text/javascript">
/*
* Copyright 2012 enix@foxmail.com
*/
function ColorPicker(k,j){var i=this,h=arguments.callee,l,b,c;if(!(this instanceof h))return i=new h(k,j);b=h.prototype;b.constructor=h;h.cache||(h.cache=[]);c={createColorData:function(){var a=h.cache,e,d,g,f=0,b,c=0;for(e=0;6>e;e++){a.push("<ul>");for(d=0;6>d;d++){a.push("<li>");for(g=0;6>g;g++)b=("000"+f.toString(16)).slice(-3).toUpperCase(),c++,i.color.push(b),a.push('<a index="'+c+'" style="background: #'+b+'" title="#'+b+'" javascript="void (0);"></a>'),f+=3;f+=30;a.push("</li>")}a.push("</ul>");
f+=480}"function"===typeof this.ongetcolorstring&&this.ongetcolorstring.call(this.color)},getHtmlElement:function(a){this.element||(this.element={});this.element[a]||(this.element[a]=l.createElement(a));return this.element[a].cloneNode(!0)},each:function(a,e){var d,b=0,f=a.length>>>0;if("Object"==={}.toString.call(a).slice(8,-1))for(d in a){if(!1===e.call(a[d],d,a[d]))break}else for(;b<f&&!1!==e.call(a,b,a[b++]););},getViewportSize:function(){var a=[0,0];void 0!==window.innerWidth?a=[window.innerWidth,
window.innerHeight]:a=[document.documentElement.clientWidth,document.documentElement.clientHeight];return a},getClinetRect:function(a){a=a.getBoundingClientRect();return a=a={left:a.left,right:a.right,top:a.top,bottom:a.bottom,height:a.height||a.bottom-a.top,width:a.width||a.right-a.left}},getScrollPosition:function(){var a=[0,0];window.pageYOffset?a=[window.pageXOffset,window.pageYOffset]:"undefined"!=typeof document.documentElement.scrollTop&&0<document.documentElement.scrollTop?a=[document.documentElement.scrollLeft,
document.documentElement.scrollTop]:"undefined"!=typeof document.body.scrollTop&&(a=[document.body.scrollLeft,document.body.scrollTop]);return a},addEvent:function(a,e,b,c){a.attachEvent&&function(a,b,e){a.attachEvent("on"+b,e)}.apply(this,arguments);a.addEventListener&&function(a,b,e){a.addEventListener(b,e,c||!1)}.apply(this,arguments);a["on"+e]&&function(a,b,e){a["on"+b]=function(){e()}}.apply(this,arguments)}};b.Init=function(){l=document;this.color=[];this.offset=k;this.offsetSize=c.getClinetRect(this.offset);
j||(this.prefix="colorPicker");j&&Object&&(c.each(j,function(a,b){i[a]||(i[a]=b)}),this.prefix=j.prefix?j.prefix+"-colorPicker":this.prefix);this.isInputText="input"===this.offset.nodeName.toLowerCase()&&"text"===this.offset.getAttribute("type");0==h.cache.length&&c.createColorData();this.createPacker().addEvent().render()};b.createPacker=function(){var a=[["div","id#"+this.prefix+",class#colorPicker"],["div","class#colorPicker-title"],["span","class#colorPicker-preview"],["input","type#button,class#colorPick-close,value#\u5173\u95ed"],
["div","class#colorPicker-container"]],b,d;c.each(a,function(g,f){b=c.getHtmlElement(f[0]);c.each(f[1].split(","),function(a,c){d=c.split("#");d[0]&&b.setAttribute(d[0],d[1])});a.splice(g,1,b)});this.elem=a;return this};b.addEvent=function(){c.addEvent(i.elem[4],"mouseover",function(a){i.eventContrl(a)},!1);c.addEvent(this.elem[4],"click",function(a){i.eventContrl(a)},!1);c.addEvent(this.elem[3],"click",function(){i.kill()},!1);return this};b.getColor=function(a){this.current&&this.current.constructor===
String&&(a.className=this.current);this.elem[2].innerHTML=this.fixColorValue(a.title);this.elem[2].style.background=a.title};b.eventContrl=function(a){var a=a||window.event,b=this.getCurrent(a);b&&("mouseover"==a.type?this.getColor(b):this.outputValue(b))};b.getCurrent=function(a){a=a||window.event;for(a=a.target||a.srcElement;a&&(3==a.nodeType||"a"!==a.nodeName.toLowerCase());)a=a.parentNode;return this.currentElem=a};b.fixColorValue=function(a){return!a?-1:a.replace(/(\w)/g,function(){return RegExp.$1+
RegExp.$1})};b.outputValue=function(a){a=this.fixColorValue(a.title);this.kill();!0===this.isInputText&&(this.offset.value=a);"function"===typeof this.ongetvalue&&this.ongetvalue.call([a]);return this};b.render=function(){var a=this.elem;a[1].appendChild(a[2]);a[1].appendChild(a[3]);a[0].appendChild(a[1]);a[0].appendChild(a[4]);this.offset.parentNode.appendChild(a[0]);a[4].innerHTML=h.cache.join("");"function"===typeof this.onrendered&&this.onrendered.call(this);return this};b.checkPosition=function(a,b){var a=this.elem[0],d=c.getClinetRect(a),g=c.getViewportSize(),f=c.getScrollPosition();if(!(d.height>g[1]||d.width>g[0]))return 0<d.right-g[0]&&(a.style.left=b.right-d.width+"px"),0<d.bottom-g[1]&&(a.style.top=b.top-d.height+f[1]+"px"),this};b.kill=function(){this.elem[0].style.display="none";return this};b.display=function(){var a=c.getClinetRect(this.offset),b=this.elem[0];b.style.display="block";b.style.cssText="position:absolute;top:"+this.offsetSize.bottom+"px;left:"+this.offsetSize.left+"px; display:block;";this.checkPosition(b,a);return this};this.Init()};
</script>
<script type="text/javascript">
!function(window,doc,undefined){
window.ColorPicker = (ColorPicker);
a = ColorPicker(doc.getElementById('filter'), {prefix:'filter', ongetvalue:function () {
//console.log(this)
}, bdf:'xdfdf'});
doc.getElementById('filter').onfocus = function () {
a.display()
}
/*b = ColorPicker(doc.getElementById('abc'),{prefix:'abc', ongetvalue:function () {
console.log(this)
}})*/
b = ColorPicker(doc.getElementById('abc'));
doc.getElementById('abc').onfocus = function () {
b.display()
}
}(this,document)
</script>
<div style="height:600px;"></div>
</body>
</html>
web216安全色拾色器 支持浏览器边缘碰撞翻转（原生js） API ColorPicker (node,Option) 属性： node : html node //必须 Option : {'prefix':string,ongetcolorstring:fn,ongetvalue:fn,onrendered:fn} //可选 prefix: 控件id前缀，无prefix属性控件自动添加id为colorPicker ongetcolorstring : 在生成全部色值对应的16进制数字的数组后调用 ongetvalue : 在点击色块获得色之后调用，回调函数内的this指向。
效果：
原生js编写的安全色拾色器的更多相关文章
- 关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- 使用原生JS编写ajax操作XMLHttpRequst对象
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js万年历，麻雀虽小五脏俱全，由原生js编写
对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了
直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 原生js编写设为首页兼容ie、火狐和谷歌
// JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...
随机推荐
- \(\S2. \)The Ornstein-Uhlenbeck operator and its semigroup
Let \(\partial_i =\frac{\partial}{\partial x_i}\). The operator \(\partial_i\) is unbounded on \(L^2 ...
- 避开WebForm天坑，拥抱ASP.Net MVC吧
有鹏友在如鹏网的QQ群中提了一个问题: 请问,在ASP.Net中如何隐藏一个MenuItem,我想根据不同的权限,对功能菜单进行隐藏,用style不行. 如果要仅仅解答这个问题,很好解答,答案很简单: ...
- Entity FrameWork 单表对多实体
一个影片信息Clips表,四个字段:clipId,clipName,fileSize,fileName 方案一: [Table("Clips")] public class Cli ...
- C#中的线程四（System.Threading.Thread）
C#中的线程四(System.Threading.Thread) 1.最简单的多线程调用 System.Threading.Thread类构造方法接受一个ThreadStart委托,改委托不带参数,无 ...
- 【WEB】初探Spring MVC框架
Spring MVC框架算是当下比较流行的Java开源框架.但实话实说,做了几年WEB项目,完全没有SpringMVC实战经验,乃至在某些交流场合下被同行严重鄙视“奥特曼”了.“心塞”的同时,只好默默 ...
- dojo/dom源码学习
dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法: 各种前端类库都免不了与D ...
- 《你必须知道的.NET》读书笔记一：小OO有大智慧
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.对象 (1)出生:系统首先会在内存中分配一定的存储空间,然后初始化其附加成员,调用构造函数执行初 ...
- 一种另类的解决URL中文乱码问题--对中文进行加密、解密处理
情景:在资源调度中,首先用户需要选择工作目标,然后跟据选择的工作目标不同而选择不同的账号和代理ip.处理过程如下:点击选择账号,在js中获取工作目标对工作目标进行两次编码(encodeURI(enco ...
- 如何用Unity GUI制作HUD
若知其所以然,自然知其然. HUD是指平视显示器,就是套在脸上,和你的眼睛固定在一起,HUD的意思就是界面咯,一般我们说HUD特指把3D空间中的界面的某些信息(比如血条,伤害之类)的贴在界面上,对应3 ...
- lua二进制操作函数
由于 Lua 脚本语言本身不支持对数字的二进制操作(例如 与,或,非 等操作),MUSHclient 为此提供了一套专门用于二进制操作的函数,它们都定义在一个“bit”表中,使用时只要requre “ ...