漂亮簡單Javascript 調色盤代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More