> 웹 프론트엔드 > JS 튜토리얼 > jquery 색상 선택 플러그인 예제 code_jquery

jquery 색상 선택 플러그인 예제 code_jquery

WBOY
풀어 주다: 2016-05-16 19:00:06
원래의
1141명이 탐색했습니다.
复제대码 代码如下:

(function($){
$.fn.extend( {
selectColor:function(){
var _d = new Date();
var _tem = _d.getTime()
return this.each(function(){
var showColor = function(_obj){
var _left =parseInt($(_obj).offset().left)
var _top =parseInt($(_obj).offset().top); _width = parseInt($(_obj).width());
var _height =parseInt($(_obj).height());
var _maxindex = function(){
var ___index = 0;
$.each($("*"),function(i,n){
var __tem = $(n).css("z-index");
if(__tem>0)
{
if(__tem > ___index)
{
___index = __tem 1;
}
})
return ___index; ();
var colorH = new Array('00','33','66','99','CC','FF')
var ScolorH = new Array('FF0000', '00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var _str = new Array()
for(var n = 0 ; n < 6 ; n )
{
_str.push('')
_str.push('');
for(var i = 0 ; i < 3; i )
{
for(var j = 0 ; j < 6 ; j )
{
_str.push(' ');
}
}
_str.push('');
}
for(var n = 0 ; n {
_str.push('');
_str.push('')
for(var i = 3 ; i < 6; i )
{
for(var j = 0 ; j < 6 ; j )
{
_str.push('');
}
}
_str.push('');
}
var colorStr = '
' _str.join('') '
'
$("body").append(colorStr);
var _currColor;
var _currColor2;
$("#colorShowTable_" _tem " td").mouseover(function(){
var _color = $(this).css("Background-color");
if(_color.indexOf( "rgb")>=0)
{
var _tmeColor = _color;
_tmeColor = _color.replace("rgb","")
_tmeColor = _tmeColor.replace("(" ,"");
_tmeColor = _tmeColor.replace(")","");
_tmeColor = _tmeColor.replace(new RegExp(" ","gm"),""); _arr = _tmeColor.split(",");
var _tmeColorStr = "#"
for(var ii = 0 ; ii < _arr.length ; ii )
{
var _temstr = parseInt(_arr[ii]).toString(16);
_temstr = _temstr.length < "0" _temstr;
_tmeColorStr = _temstr; $("#color_txt_" _tem).val(_tmeColorStr);
$("#colorShow_" _tem).css("Background-color",_color)
_currColor = _color2 = _tmeColorStr; ;
$(this).css("배경색","#FFFFFF")
});
$("#colorShowTable_" _tem " td").mouseout(function(){
$(this).css("Background-color",_currColor);
});
$("#colorShowTable_" _tem " td").click(function(){
$(_obj).val(_currColor2);
});
}
$(this).click(function(){
showColor(this);
});
var _sobj = 이;
$(document).click(function(e){
e = e ? e : window.event;
var tag = e.srcElement || e.target;
if(_sobj. id==tag.id)return;
var _temObj = tag;
while(_temObj)
{
if(_temObj.id=="colorShowDiv_" _tem)return; _temObj.parentNode;
}
$("#colorShowDiv_" _tem).remove()
});
});
}
});
})(jQuery);



使사용 방법:





复主代码

代码如下:
$(document).ready(function(){ $("#要绑정적ID").selectColor(); }); 注의미: 要绑定的对image一定要是文本输入框
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿