?
快捷搜索:  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';

});

}

免責聲明:以上內容源自網絡,版權歸原作者所有,如有侵犯您的原創版權請告知,我們將盡快刪除相關內容。

您可能還會對下面的文章感興趣:

河北十一选五开奖的 通配资 原千岁个人网站 单机麻将游戏 广东十一选五全天计 赤月井美339在线 亚金配资 g-area番号福利 南京麻将官方网 广西快乐双彩24选7走势图 即时赔率500 足球球探足球软件下载 2013快船vs灰熊录像 上证指数每日行情凤凰网 普通四人麻将规则 山西大唐麻将外挂 3d试机号开机号列