快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

ybet777月博官网:一步步教你实现跨游览器的颜色选择器



虽然网上这样的代码一大年夜把的,但不是自己实现老是不明白其道理,而且许多都是基于这个框架那个框架。必要这么繁杂吗?着实许多问题只要会分化,就简单了。HTML着实原先都是很简单的器械,微软提出了DHTML后,把静态变成动态,有些人才被那炫目的效果看傻了眼睛。定必然神,我们把它还原成静态不就行了吗?!就像动画一样,原先都是一帧帧的静止画面。javascript的颜色选择器也一样,着实最开始不便是一个表格吗?!只不过每一个格子的颜色不一样,至于动态效果,我们也可以一步分化成我们可以办理的部分。

打造整体框架

添加静态多彩表格

姑且是这样叫吧,当我们的脚本检测到我们的页面存在一个ID为"colorpicker"的DIV时,它就会在其里面建立一个两行六格的表格,然后格子里面再套表格,为6X6的规格,在遍历的同时也把格子的背景致也填了。unselectable属性为IE筹备的,防止焦点损掉!

添加行径层代码(javascript)

//用于天生颜色选择器的详细内容

var colorPickerHtml = function(){

var_hex = ['FF', 'CC', '99', '66', '33', '00'];

var builder = [];

// 出现一个颜色格

var _drawCell = function(builder, red, green, blue){

builder.push('

builder.push('#' + red + green + blue);

builder.push('" unselectable="on">');

};

// 出现一行颜色

var _drawRow = function(builder, red, blue){

builder.push('

');

for (var i = 0; i ');

};

// 出现六个颜色区之一

var _drawTable = function(builder, blue){

builder.push('');

for (var i = 0; i ');

};

//开初创建

builder.push('

');

for (var i = 0; i ');

}

builder.push('

');

for (var i = 3; i ');

}

builder.push('');

builder.push('\n\

\n\

\n\

\n\

\n\

');

return builder.join('');

};

#================

#================

window.onload = function(){

var colorpicker = document.getElementById("colorpicker");

colorpicker.innerHTML = colorPickerHtml();

}

添加布局层代码(HTML)

添加体现层代码(CSS)

div#colorpicker table{border-collapse:collapse;margin:0;padding:0;}

div#colorpicker .cell td{height:12px;width:12px;}

.color_result{width:216px;}

.color_view{width:110px;height:25px;}

.color_code{text-align:center;font-weight:700;color:#666;font-size:16px;background:#eee;}

至此,我们的颜色选择器就出来了!

添加动态效果

我们要来在选择器上移动时,表格下面的两个大年夜格子会显示鼠标所在小格的颜色与其颜色值,点击表格则竣事选择……一步来吧。先添加事故监听函数。

var addEvent = (function () {

if (document.addEventListener) {

return function (el, type, fn) {

el.addEventListener(type, fn, false);

};

} else {

return function (el, type, fn) {

el.attachEvent('on' + type, function () {

return fn.call(el, window.event);

});

}

}

})();

监听鼠标移动的函数

我们要确保鼠标所在的地方为我们选择器的小格子,是以必要阐发事故源是否为td元素。

//事故源函数

var getTarget = function(event){

event = event || window.event;

var obj = event.srcElement ? event.srcElement : event.target;

return obj

}

//用它给颜色选择器绑定mouseover事故

var bindMouseover = function(obj){

addEvent(obj,'mouseover',function(e){

var td = getTarget (e);

var nn = tybet777月博官网d.nodeName.toLowerCase();

if(nn == 'td'){

//履行相关事故………………

}

});

}

然后我们得找出那两个大年夜表格就行了,它们上面各有一个类名color_view与color_code。问题是若何从DOM中掏出它们,我们应该只管即便避免遍历这种做法,新的期间带来新的事故,我们也应该开发一下视野。IE8宣布了的本日,新式游览器拥有了许多刁悍的查找规划,如 querySelector,用法酷似JQuery与Prototype的$()选择器,返回一个DOM工具,IE8,FF3.1,safari4等都支持。还有getElementsByClassName,我也实现了一个跨游览器的,能根据平台自立选择原生规划或Pure DOM规划,详细拜见这里。是以继承添加行径层代码,Go Go Go!

var getElementsByClassName = function (searchClass, node,tag) {

/奸淫奸淫奸淫奸淫奸淫略,拜见下面的部分奸淫奸淫奸淫奸淫奸淫**/

}

var bindMouseover = function(obj){

addEvent(obj,'mouseover',function(e){

var td = getTarget(e),

nn = td.nodeName.toLowerCase(),//IE会自动转换为大年夜写

colorView,

colorCode;

if(document.querySelector){

colorView = obj.querySelector('td.color_view');

colorCode = obj.querySelector('td.color_code');

}else{

colorView = getElybet777月博官网ementsByClassName('color_view',obj,'td')[0];

colorCode = getElementsByClassName('color_code',obj,'td')[0];

}

ifybet777月博官网(nn == 'td'){

colorView.style.backgroundColor = td.bgColor;

colorCode.innerHTML = td.bgColor;

}

});

}

window.onload = function(){

var colorpicker = document.getElementById("colorpicker");

colorpicker.innerHTML = colorPickerHtml();

bindMouseover(colorpicker);

}

至此,鼠标移动时的效果就完成了。必要阐明一下,为什么我们构建格子时是用bgcolor而不用style="background- color:#fff",这是由于FF会把颜色值转为RGB款式,会导致与IE的16进制款式不同等,另,RGB所占空间太多,会撑开我们的格子。

接下来便是点击事故了吧,错!由于今朝我们这样的结构或设置是违抗我们的知识,一样平常而言,颜色选择器是在我们点击一个按钮才弹出来,然后我们选择了颜色,单击后颜色值就会自动填写在响应的文本域中。弗成能是一开始就僵硬地呈现在页面上,这样根本没有动态天生的必要。是以我们得改动我们的布局层。

改动布局层的body部分。

改动行径层代码,让文本框得到焦点时弹出颜色选择器

window.onload = function(){

vaybet777月博官网r textfield = document.getElementById('color');

var picker = document.createElement('div');

picker.setAttribute("id","colorpicker");

picker.innerHTML = colorPickerHtml();

var body = document.getElementsByTagName("body")[0];

body.insertBefore(picker,null);

picker.style.display = 'none';

bindMouseover(picker);

addEvent(textfield ,'focus',function(){

textfield.style.position = 'relative';

picker.style.position = 'absolute';

picker.style.display = 'block'ybet777月博官网;

picker.style.left = textfield.offsetLeft + 'px';

picker.style.top = (textfield.clientHeight + textfield.offsetTop)+ 'px';

});

}

绑定单击事故

var bindClick = function(obj,id){

addEvent(obj,'click',function(e){

var td = getTarget(e),

nn = td.nodeName.toLowerCase(),//IE会自动转换为大年夜写

textfield = document.getElementById(id);

if(nn == 'td'){

textfield.value = td.bgColor;

obj.style.display = 'none';

}

});

}

改动onload事故

window.onload = function(){

var textfield = document.getElementById('color');

var picker = document.createElement('div');

picker.setAttribute("id","colorpicker");

picker.innerHTML = colorPickerHtml();

var body = document.getElementsByTagName("body")[0];

body.insertBefore(picker,null);

picker.style.display = 'none';

bindMouseover(picker);

bindClick(picker,"color");

addEvent(textfield ,'focus',function(){

textfield.style.position = 'relative';

picker.style.position = 'absolute';

picker.style.display = 'block';

picker.style.left = textfield.offsetLeft + 'px';

picker.style.top = (textfield.clientHeight + textfield.offsetTop)+ 'px';

});

}

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: