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://2img.net/i/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 đó.