[Thùng rác] HTLM color picker

  Bài viết hay nhất1

Demo


[Only admins are allowed to see this link]

Code Htlm


HTLM:

Code:
<!DOCTYPE html>
<html>
<head>
    <link href="demo.css" rel="stylesheet" type="text/css"/>
 
    <link rel="stylesheet" href="css/font-awesome.min.css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body >
    <div class="color-wrapper">
    <input type="text" name="custom_color" placeholder="#ffffff" id="pickcolor" class="call-picker">
    <div class="color-holder call-picker"></div>
    <div class="color-picker" id="color-picker" style="display:none" ></div>
</div>
<div class="footer-bar">
    <span class="article-wrapper">
        </span>
   
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
'660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF'];
    var picker = $('#color-picker');
   
    for(var i=0; i< colorList.length; i++)
    {
        picker.append('<li class="color-item" data-hex="'+
        '#' + colorList[i] + '" style="background-color:' +
        '#' + colorList[i] + ';"></li>');
    }
    // khi click vao bang mau, no se tu mat
    $('body').click(function(){
        picker.fadeOut();
    });
   
    // click de xuat hien bang mau
    $('.call-picker').click(function(event){
        event.stopPropagation();
        picker.fadeIn();
        picker.children('li').hover(function(){
            var codeHex = $(this).data('hex');
            $('.color-holder').css('background-color',codeHex);
            $('#pickcolor').val(codeHex);
        });
    });

   
</script>

</body>
</html>
<style>
.color-wrapper{
    position:relative;
    width:250px;
    margin:20px auto;
}
 
.color-wrapper p{ margin-bottom:5px; }
 
input.call-picker{
    border:1px solid #aaa;
    color:#666;
    text-transform:uppercase;
    float:left;
    outline:none;
    padding:10px;
    width:85px;
}
 
.color-picker{
    width:130px;
    background:#f3f3f3;
    height:81px;
    padding:5px;
    border:5px solid #fff;
    box-shadow:0px 0px 3px 1px #ddd;
    position:absolute;
    top:61px;
    left:2px;
}
 
.color-holder{
    background:#fff;
    cursor:pointer;
    border:1px solid #aaa;
    width:40px;
    height:36px;
    float:left;
    margin-left:5px;
}
 
.color-picker .color-item{
    cursor:pointer;
    width:10px;
    height:10px;
    list-style-type:none;
    float:left;
    margin:2px;
    border:1px solid #ddd;
}
 
.color-picker .color-item:hover{
    border:1px solid #666;
    opacity:0.8;
    -moz-opacity:0.8;
    filter:alpha(opacity=<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;
}
</style>

Tiện thể nếu được em xin mod chatbox cho em hết banned nhé , em xin đó.
  Bài viết hay nhất2
Úp thêm ảnh : [Only admins are allowed to see this image]
  Bài viết hay nhất3
Ctrl + U mà cũng thiếu nữa demo.css link như thế thì CSS hiện bằng niềm tin, còn cái font Awesome cũng thế.
Mọi bài viết vi phạm bản quyền hoặc chưa có sự đồng ý của tác giả sẽ bị xoá. Người vi phạm sẽ bị ban ít nhất 7 ngày.
Nguồn đâu nhỉ?
You cannot reply to topics in this forum