漂亮簡單Javascript 調色盤代碼

來源:互聯網
上載者:User

我的實現方式很簡單,不帶任何顏色演算法,步驟如下:

1.在網上找一個"網頁顏色代碼"的網站,然後把大部分的顏色值抽取出來封裝到一個檔案中。

2.然後通過ajax非同步擷取後再建立的調色盤的面板ui。

3.最後寫相關的顏色選取操作就搞定了

我寫的這個demo依賴的jquery架構寫的(主要是節省我的時間(*^__^*) 嘻嘻)

執行個體圖:

封裝了一個叫做palettetools的調色盤工具類

相容ie6+,fx,gg,op,safari等瀏覽器 

  
/*
* 調色盤
* author:mr.co
* date:2010-12-23
* qq:co.mr.co@gmail.com
*/
function palettetools(eid/*需要觸發調色盤元素id*/){
var eobj = $('#'+eid);
var paletteid = 'divpalette_' + eid;
if(eobj[0] == null || eobj[0] == undefined) return;
if(eobj[0].nodename.tolowercase() != 'input') {
alert('error message:only support input elements...(jq.palette.js)');
return;
}
if(!('value' in eobj[0])) return;
this.eobj = eobj;
this.paletteid = paletteid;
var colorbox = new array();
/*非同步擷取顏色值*/
$.ajax({url:'palette/color.htm',type:'get',cache:false,async:false,
error:function(){ alert('error message:file not found color.htm...(jq.palette.js)'); },
success:function(data){
var colors = data.split(' ');
colorbox.push('<div id="'+ paletteid +'" style="position:absolute;display:none;background:#fff; width:240px; _width:242px; height:180px; border:1px solid #ccc; "><ul style=" padding:0px; margin:0px; float:left; list-style: none; ">');
for(var i = 0; i < colors.length; i++){
if(colors[i].replace(/[^a-za-z0-9u4e00-u9fa5@.]/g,'') != '')
colorbox.push('<li style="display:block; width:10px; height:10px; background-color:'+ colors[i] +';float:left; margin:1px; cursor:pointer;" colorval="'+ colors[i] +'"></li>');
}
colorbox.push('</ul></div>');
}
});
/*將顏色面板追加到當前文本域後面*/
eobj.after(colorbox.join(''));
}
palettetools.prototype.show = function(args/*可設定調色盤上左位置傳值方式為{top:'1px',left:'1px'}*/){
var top,left;
if(args != undefined){
top = args.top || 0;
left = args.left || 0;
$('#'+this.paletteid).css教程({top:top,left:left});
}
var obj = this.eobj,pid = this.paletteid;
if(obj == undefined || obj == null) return;
/*設定選中的顏色值*/
var setobjcolor = function(selectedcolor){
obj.css({background:selectedcolor});
obj.val(selectedcolor);
}
/*顯示文本域的焦點、顯示/隱藏*/
obj.focus(function(){
$('#'+pid).css({display:'block'});
}).blur(function(){
$('#'+pid).css({display:'none'});
});
/*顏色面板滑鼠滑動效果*/
$('#'+ pid +' li').mouseo教程ver(function(){
setobjcolor($(this).attr('colorval'));
})
/*最終選取顏色點擊*/
.click(function(){
setobjcolor($(this).attr('colorval'));
$('#'+pid).css({display:'none'});
});
}

 

 

 

  
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_head1">
<title>調色盤demo </title>
<script type="text/網頁特效" language="javascript" src='palette/jquery-1.3.2.min.js'></script>
<script type="text/javascript" language="javascript" src='palette/jq.palette.js'></script>
<script type="text/javascript" language="javascript">
$(function(){
new palettetools('txttest').show();
new palettetools('txttest2').show({top:'155px',left:'7px'});
});
</script>
</head>
<body>
<input type="text" id='txttest' />
<br /><br /><br /><br /><br /><br />
<input type="text" id='txttest2' />
</body>
</html>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.