update
This commit is contained in:
贤心
537
src/lay/modules/colorpicker.js
Normal file
537
src/lay/modules/colorpicker.js
Normal file
@@ -0,0 +1,537 @@
|
||||
/**
|
||||
|
||||
@Title: layui.colorpicker 颜色选择器
|
||||
@Author: star1029
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
layui.define('jquery',function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
|
||||
//外部接口
|
||||
,colorpicker = {
|
||||
config: {}
|
||||
,index: layui.colorpicker ? (layui.colorpicker.index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
,set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件监听
|
||||
,on: function(events, callback){
|
||||
return layui.onevent.call(this, 'colorpicker', events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'colorpicker', ELEM_VIEW = 'layui-colorpicker', ELEM_MAIN = 'layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
|
||||
,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'colorpicker-side', PICKER_SIDE_SLIDER = 'colorpicker-side-slider'
|
||||
,PICKER_BASIS = 'colorpicker-basis', PICKER_ALPHA_BG = 'colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'colorpicker-alpha-slider', PICKER_BASIS_CUR = 'colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++colorpicker.index;
|
||||
that.config = $.extend({}, that.config, colorpicker.config, options);
|
||||
that.render();
|
||||
}
|
||||
|
||||
//RGB转HSB
|
||||
,RGBToHSB = function(rgb){
|
||||
var hsb = {h:0, s:0, b:0};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
hsb.s = max != 0 ? 255*delta/max : 0;
|
||||
if(hsb.s != 0){
|
||||
if(rgb.r == max){
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
}else if(rgb.g == max){
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
}else{
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
}else{
|
||||
hsb.h = -1;
|
||||
};
|
||||
if(max == min){
|
||||
hsb.h = 0;
|
||||
};
|
||||
hsb.h *= 60;
|
||||
if(hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
};
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
}
|
||||
|
||||
//HEX转HSB
|
||||
,HEXToHSB = function(hex){
|
||||
var hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex;
|
||||
if(hex.length == 3){
|
||||
var num = hex.split("");
|
||||
hex = num[0]+num[0]+num[1]+num[1]+num[2]+num[2]
|
||||
};
|
||||
hex = parseInt(hex, 16);
|
||||
var rgb = {r:hex >> 16, g:(hex & 0x00FF00) >> 8, b:(hex & 0x0000FF)};
|
||||
return RGBToHSB(rgb);
|
||||
}
|
||||
|
||||
//HSB转RGB
|
||||
,HSBToRGB = function(hsb){
|
||||
var rgb = {};
|
||||
var h = hsb.h;
|
||||
var s = hsb.s*255/100;
|
||||
var b = hsb.b*255/100;
|
||||
if(s == 0){
|
||||
rgb.r = rgb.g = rgb.b = b;
|
||||
}else{
|
||||
var t1 = b;
|
||||
var t2 = (255 - s) * b /255;
|
||||
var t3 = (t1 - t2) * (h % 60) /60;
|
||||
if(h == 360) h = 0;
|
||||
if(h < 60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h < 120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h < 180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h < 240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h < 300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h < 360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
}
|
||||
|
||||
//HSB转HEX
|
||||
,HSBToHEX = function(hsb){
|
||||
var rgb = HSBToRGB(hsb);
|
||||
var hex = [
|
||||
rgb.r.toString(16)
|
||||
,rgb.g.toString(16)
|
||||
,rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function(nr, val){
|
||||
if(val.length == 1){
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
}
|
||||
|
||||
//转化成所需rgb格式
|
||||
,RGBSTo = function(rgbs){
|
||||
var regexp = /[0-9]{1,3}/g;
|
||||
var re = rgbs.match(regexp);
|
||||
return {r:re[0], g:re[1], b:re[2]};
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
bgcolor: '' //默认颜色，默认没有
|
||||
,size: '' //选择器大小
|
||||
,alpha: false //是否开启透明度
|
||||
,format: 'hex' //颜色显示/输入格式，可选 rgb,hex
|
||||
,predefine: false //预定义颜色是否开启
|
||||
,prededata: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','rgb(250, 212, 0)','rgba(144, 240, 144, 0.5)','rgb(0, 186, 189)','rgba(31, 147, 255, 0.73)']
|
||||
};
|
||||
|
||||
//下拉框渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,temp = '<div class="layui-colorpicker layui-colorpicker-'+ options.size +'">'
|
||||
,span = '<span class="'+ ((options.format == 'rgb' && options.alpha) ? 'layui-colorpicker-trigger-bgcolor' : '') +'">' +
|
||||
'<span class="layui-colorpicker-trigger-span '+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'"' +
|
||||
'style="background:'+ (options.bgcolor ? (options.bgcolor.match(/[0-9]{1,3}/g).length > 3 ?
|
||||
( options.alpha && options.format == 'rgb' ? options.bgcolor : ('#' + HSBToHEX(RGBToHSB(RGBSTo(options.bgcolor)))) ) : options.bgcolor ) :'') +'">';
|
||||
span += '<i class="layui-icon layui-colorpicker-trigger-i '+ (options.bgcolor ? ICON_PICKER_DOWN : ICON_PICKER_CLOSE) +'"></i></span></span>';
|
||||
temp += span + '</div>';
|
||||
|
||||
//开始插入替代元素
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
|
||||
othis.css("display","inline-block");
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
|
||||
that.elemTemp = $(temp);
|
||||
othis.html(that.elemTemp);
|
||||
|
||||
that.trigger();
|
||||
};
|
||||
|
||||
//颜色选择器插入
|
||||
Class.prototype.show = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,span = $(options.elem)[0];
|
||||
var pre = '';
|
||||
$.each(options.prededata, function(index, value){
|
||||
pre += '<div class="colorpicker-pre '+ (value.match(/[0-9]{1,3}/g).length > 3 ? 'isalpha' : '') +'"><div style="background:'+ value +'"></div></div>'
|
||||
});
|
||||
var elem = that.elem = '<div id="layui-colorpicker'+ that.index +'" class="layui-colorpicker-main"><div class="layui-colorpicker-main-wrapper"><div class="colorpicker-basis"><div class="colorpicker-basis-white"></div><div class="colorpicker-basis-black"></div>' +
|
||||
'<div class="colorpicker-basis-cursor"></div></div><div class="colorpicker-side"><div class="colorpicker-side-slider"></div></div></div><div class="layui-colorpicker-main-alpha" style="display: '+ (options.alpha ? 'block' : 'none') +'"><div class="colorpicker-alpha-bgcolor">' +
|
||||
'<div class="colorpicker-alpha-slider"></div></div></div><div class="layui-colorpicker-main-pre">'+ (options.predefine ? pre :'') +'</div><div class="layui-colorpicker-main-input"><div class="layui-inline"><input type="text" class="layui-input">' +
|
||||
'</input></div><button class="empty layui-btn layui-btn-primary layui-btn-sm">清空</button><button class="confirm layui-btn layui-btn-sm">确定</button></div></div>';
|
||||
|
||||
if($('.layui-colorpicker-main').length && Class.thisElemInd == that.index){
|
||||
that.remove(Class.thisElemInd);
|
||||
}else{
|
||||
if($('.layui-colorpicker-main').length && Class.thisElemInd != that.index && Class.thisElemInd){
|
||||
$('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background = Class.bgcolor ;
|
||||
if(!Class.bgcolor){ $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE) }
|
||||
};
|
||||
that.remove(Class.thisElemInd);
|
||||
//插入到body
|
||||
$('body').append(elem);
|
||||
};
|
||||
Class.thisElemInd = that.index;
|
||||
Class.bgcolor = $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background;
|
||||
|
||||
//根据下拉框的top来判断颜色选择框出现的位置
|
||||
var _top = span.getBoundingClientRect().top
|
||||
,_left = span.getBoundingClientRect().left
|
||||
,_height = span.offsetHeight
|
||||
,_width = span.offsetWidth
|
||||
,bodyheight = window.innerHeight
|
||||
,bodywidth = window.innerWidth
|
||||
,height = $('.layui-colorpicker-main').outerHeight()
|
||||
,width = $('.layui-colorpicker-main').outerWidth()
|
||||
,top,left;
|
||||
//得到选择器的left偏移量
|
||||
left = bodywidth - _left - _width;
|
||||
if(left < _left && left < (width - _width)/2){
|
||||
left = bodywidth - width;
|
||||
}else if(_left < left && _left < (width - _width)/2){
|
||||
left = 0;
|
||||
}else{
|
||||
left = _left - (width - _width)/2;
|
||||
};
|
||||
//得到选择器的top偏移量
|
||||
top = bodyheight - _top - _height;
|
||||
if(top - height < 20){
|
||||
top = _top - height - 2;
|
||||
$('.layui-colorpicker-main').css({"top":top - 11, "left":left});
|
||||
$('.layui-colorpicker-main').animate({top: top + 1});
|
||||
}else{
|
||||
top = _top + _height;
|
||||
$('.layui-colorpicker-main').css({"top":top + 16, "left":left});
|
||||
$('.layui-colorpicker-main').animate({top: top + 1});
|
||||
};
|
||||
};
|
||||
|
||||
//颜色选择器移除
|
||||
Class.prototype.remove = function(index){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,elem = $('#layui-colorpicker'+ (index || that.index));
|
||||
elem.remove();
|
||||
return that;
|
||||
};
|
||||
|
||||
//颜色选择器显示隐藏
|
||||
Class.prototype.trigger = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
//绑定呼出控件事件
|
||||
,showEvent = function(elem){
|
||||
elem.on('click' , function(){
|
||||
//event.stopPropagation();
|
||||
that.show();
|
||||
if($('.layui-colorpicker-main').length){
|
||||
that.val($(this).find('.' + PICKER_TRIG_SPAN)[0]);
|
||||
that.side(that.index - 1);
|
||||
that.events(that.index - 1, $(this).find('.' + PICKER_TRIG_SPAN)[0].style.background);
|
||||
};
|
||||
});
|
||||
};
|
||||
showEvent($(options.elem));
|
||||
};
|
||||
|
||||
//颜色选择器赋值
|
||||
Class.prototype.val = function(e){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,bgcolor = e.style.backgroundColor;
|
||||
//判断是否有背景颜色
|
||||
if(bgcolor){
|
||||
//转化成hsb格式
|
||||
var hsb = RGBToHSB(RGBSTo(bgcolor));
|
||||
//同步滑块的位置及颜色选择器的选择
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
//如果格式要求为rgb
|
||||
if($(e).hasClass('torgb')){
|
||||
$('.' + PICKER_INPUT).find('input').val(bgcolor);
|
||||
};
|
||||
//如果格式要求为rgba
|
||||
if($(e).hasClass('rgba')){
|
||||
var rgb = RGBSTo(bgcolor);
|
||||
//如果开启透明度而没有设置，则给默认值
|
||||
if(bgcolor.match(/[0-9]{1,3}/g).length == 3){
|
||||
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
|
||||
}else{
|
||||
$('.' + PICKER_INPUT).find('input').val(bgcolor);
|
||||
var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
|
||||
};
|
||||
//设置span背景色
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
|
||||
};
|
||||
|
||||
}else{
|
||||
//如果没有背景颜色则默认到最初始的状态
|
||||
that.select(0,100,100);
|
||||
$('.' + PICKER_INPUT).find('input').val("");
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
|
||||
}
|
||||
};
|
||||
|
||||
//颜色选择器滑动/点击
|
||||
Class.prototype.side = function(ind){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,side = $('.' + PICKER_SIDE)
|
||||
,slider = $('.' + PICKER_SIDE_SLIDER)
|
||||
,basis = $('.' + PICKER_BASIS)
|
||||
,choose = $('.' + PICKER_BASIS_CUR)
|
||||
,alphacolor = $('.' + PICKER_ALPHA_BG)
|
||||
,alphaslider = $('.' + PICKER_ALPHA_SLIDER)
|
||||
,_h = slider[0].offsetTop/180*360
|
||||
,_b = 100 - (choose[0].offsetTop + 3)/180*100
|
||||
,_s = (choose[0].offsetLeft + 3)/260*100
|
||||
,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
|
||||
,span = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)
|
||||
,i = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I)
|
||||
,pre = $('.layui-colorpicker-main-pre').children('.colorpicker-pre').children('div')
|
||||
,torgb,rgba
|
||||
,change = function(x,y,z,a){
|
||||
that.select(x, y, z);
|
||||
var rgb = HSBToRGB({h:x, s:y, b:z});
|
||||
i.addClass(ICON_PICKER_DOWN).removeClass(ICON_PICKER_CLOSE);
|
||||
span[0].style.background = 'rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')';
|
||||
if(torgb){
|
||||
$('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
|
||||
};
|
||||
if(rgba){
|
||||
var left = 0;
|
||||
left = a * 280;
|
||||
alphaslider.css("left", left);
|
||||
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')');
|
||||
span[0].style.background = 'rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')';
|
||||
alphacolor[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))'
|
||||
};
|
||||
//回调更改的颜色
|
||||
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
|
||||
}
|
||||
,up = function(){
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
if(span.hasClass('torgb')) torgb = true;
|
||||
if(span.hasClass('rgba')) rgba = true;
|
||||
//右侧主色选择
|
||||
slider.on('mousedown', function(e){
|
||||
var oldtop = this.offsetTop
|
||||
,oldy = e.clientY;
|
||||
var move = function(e){
|
||||
var top = oldtop + (e.clientY - oldy)
|
||||
,maxh = side[0].offsetHeight;
|
||||
if(top < 0)top = 0;
|
||||
if(top > maxh)top = maxh;
|
||||
var h = top/180*360;
|
||||
_h = h;
|
||||
change(h, _s, _b, _a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
side.on('click', function(e){
|
||||
var top = e.clientY - $(this).offset().top;
|
||||
if(top < 0)top = 0;
|
||||
if(top > this.offsetHeight)top = this.offsetHeight;
|
||||
var h = top/180*360;
|
||||
_h = h;
|
||||
change(h, _s, _b, _a);
|
||||
e.preventDefault();
|
||||
})
|
||||
//中间颜色选择
|
||||
choose.on('mousedown', function(e){
|
||||
var oldtop = this.offsetTop
|
||||
,oldleft = this.offsetLeft
|
||||
,oldy = e.clientY
|
||||
,oldx = e.clientX;
|
||||
var move = function(e){
|
||||
var top = oldtop + (e.clientY - oldy)
|
||||
,left = oldleft + (e.clientX - oldx)
|
||||
,maxh = basis[0].offsetHeight - 3
|
||||
,maxw = basis[0].offsetWidth - 3;
|
||||
if(top < -3)top = -3;
|
||||
if(top > maxh)top = maxh;
|
||||
if(left < -3)left = -3;
|
||||
if(left > maxw)left = maxw;
|
||||
var s = (left + 3)/260*100
|
||||
,b = 100 - (top + 3)/180*100;
|
||||
_b = b;
|
||||
_s = s;
|
||||
change(_h, s, b, _a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
basis.on('click', function(e){
|
||||
var top = e.clientY - $(this).offset().top - 3
|
||||
,left = e.clientX - $(this).offset().left - 3
|
||||
if(top < -3)top = -3;
|
||||
if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
|
||||
if(left < -3)left = -3;
|
||||
if(left > this.offsetWidth - 3)left = this.offsetWidth - 3;
|
||||
var s = (left + 3)/260*100
|
||||
,b = 100 - (top + 3)/180*100;
|
||||
_b = b;
|
||||
_s = s;
|
||||
change(_h, s, b, _a);
|
||||
e.preventDefault();
|
||||
});
|
||||
//底部透明度选择
|
||||
alphaslider.on('mousedown', function(e){
|
||||
var oldleft = this.offsetLeft
|
||||
,oldx = e.clientX;
|
||||
var move = function(e){
|
||||
var left = oldleft + (e.clientX - oldx)
|
||||
,maxw = alphacolor[0].offsetWidth;
|
||||
if(left < 0)left = 0;
|
||||
if(left > maxw)left = maxw;
|
||||
var a = Math.round(left /280*100) /100;
|
||||
_a = a;
|
||||
change(_h, _s, _b, a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
alphacolor.on('click', function(e){
|
||||
var left = e.clientX - $(this).offset().left
|
||||
if(left < 0)left = 0;
|
||||
if(left > this.offsetWidth)left = this.offsetWidth;
|
||||
var a = Math.round(left /280*100) /100;
|
||||
_a = a;
|
||||
change(_h, _s, _b, a);
|
||||
e.preventDefault();
|
||||
});
|
||||
//预定义颜色选择
|
||||
pre.each(function(){
|
||||
$(this).on('click', function(){
|
||||
$(this).parent('.colorpicker-pre').addClass('selected').siblings().removeClass('selected');
|
||||
var color = this.style.backgroundColor
|
||||
,hsb = RGBToHSB(RGBSTo(color))
|
||||
,a = color.slice(color.lastIndexOf(",") + 1, color.length - 1),left;
|
||||
_h = hsb.h;
|
||||
_s = hsb.s;
|
||||
_b = hsb.b;
|
||||
if(color.match(/[0-9]{1,3}/g).length == 3) a = 1;
|
||||
_a = a;
|
||||
left = a * 280;
|
||||
change(hsb.h, hsb.s, hsb.b, a);
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
//颜色选择器hsb转换
|
||||
Class.prototype.select = function(h,s,b){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,hex = HSBToHEX({h:h, s:100, b:100})
|
||||
,color = HSBToHEX({h:h, s:s, b:b})
|
||||
,sidetop = h/360*180
|
||||
,top = 180 - b/100*180 - 3
|
||||
,left = s/100*260 - 3;
|
||||
//滑块的top
|
||||
$('.' + PICKER_SIDE_SLIDER).css("top", sidetop);
|
||||
//颜色选择器的背景
|
||||
$('.' + PICKER_BASIS)[0].style.background = '#' + hex;
|
||||
//选择器的top left
|
||||
$('.' + PICKER_BASIS).find('.' + PICKER_BASIS_CUR).css({"top": top, "left": left});
|
||||
//选中的颜色
|
||||
$('.' + PICKER_INPUT).find('input').val('#' + color);
|
||||
};
|
||||
|
||||
//颜色选择器输入
|
||||
Class.prototype.events = function(ind, color){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,hide = function(){
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '';
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
|
||||
};
|
||||
//点击确认按钮
|
||||
$('.' + PICKER_INPUT).find('.confirm').on('click', function(){
|
||||
var value = $('.' + PICKER_INPUT).find('input').val()
|
||||
,hsb = {};
|
||||
if(value.indexOf(',') > -1){
|
||||
hsb = RGBToHSB(RGBSTo(value));
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + PICKER_INPUT).find('input').val(value);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
|
||||
if(value.match(/[0-9]{1,3}/g).length > 3 && $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN).hasClass('rgba')){
|
||||
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = value;
|
||||
};
|
||||
}else{
|
||||
hsb = HEXToHSB(value);
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
|
||||
};
|
||||
color = value;
|
||||
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
|
||||
that.remove(ind + 1);
|
||||
});
|
||||
//点击清空按钮
|
||||
$('.' + PICKER_INPUT).find('.empty').on('click', function(){
|
||||
hide();
|
||||
color = '';
|
||||
that.remove(ind + 1);
|
||||
});
|
||||
//点击页面其他地方
|
||||
$(document).off().on('click', function(event){
|
||||
var main = $('.' + ELEM_MAIN)
|
||||
,item = $('.' + ELEM_VIEW)
|
||||
,value = $('.' + PICKER_INPUT).find('input').val();
|
||||
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length && !item.is(event.target) && item.has(event.target).length === 0 && item.length){
|
||||
if(!color){ hide(); }
|
||||
else{
|
||||
var hsb = RGBToHSB(RGBSTo(color));
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = color;
|
||||
if(value.indexOf(',') > -1){
|
||||
$('.' + PICKER_INPUT).find('input').val(color);
|
||||
};
|
||||
};
|
||||
that.remove(ind + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//核心入口
|
||||
colorpicker.render = function(options){
|
||||
var inst = new Class(options);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, colorpicker);
|
||||
})
|
||||
@@ -148,12 +148,17 @@ layui.define('layer', function(exports){
|
||||
|
||||
//初始选中样式
|
||||
dds.eq(index).addClass(THIS).siblings().removeClass(THIS);
|
||||
|
||||
|
||||
//上下定位识别
|
||||
if(top + dlHeight > $win.height() && top >= dlHeight){
|
||||
reElem.addClass(CLASS + 'up');
|
||||
}
|
||||
}, hideDown = function(choose){
|
||||
|
||||
followScroll();
|
||||
}
|
||||
|
||||
//隐藏下拉
|
||||
,hideDown = function(choose){
|
||||
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
|
||||
input.blur();
|
||||
nearElem = null;
|
||||
@@ -166,6 +171,27 @@ layui.define('layer', function(exports){
|
||||
input && input.val(initValue);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//定位下拉滚动条
|
||||
,followScroll = function(){
|
||||
var thisDd = dl.children('dd.'+ THIS);
|
||||
|
||||
if(!thisDd[0]) return;
|
||||
|
||||
var posTop = thisDd.position().top
|
||||
,dlHeight = dl.height()
|
||||
,ddHeight = thisDd.height();
|
||||
|
||||
//若选中元素在滚动条不可见底部
|
||||
if(posTop > dlHeight){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
||||
}
|
||||
|
||||
//若选择玄素在滚动条不可见顶部
|
||||
if(posTop < 0){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - 5);
|
||||
}
|
||||
};
|
||||
|
||||
//点击标题区域
|
||||
@@ -194,63 +220,60 @@ layui.define('layer', function(exports){
|
||||
}
|
||||
}).on('keydown', function(e){ //键盘按下
|
||||
var keyCode = e.keyCode;
|
||||
|
||||
|
||||
//Tab键隐藏
|
||||
if(keyCode === 9){
|
||||
hideDown();
|
||||
}
|
||||
|
||||
//标注 dd 的选中状态
|
||||
var setThisDd = function(prevNext, thisElem){
|
||||
var nearDd, cacheNearElem;
|
||||
var setThisDd = function(prevNext, thisElem1){
|
||||
var nearDd, cacheNearElem
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
//得到当前队列元素
|
||||
thisElem = function(){
|
||||
if(thisElem && thisElem[0]){
|
||||
return thisElem;
|
||||
var thisElem = function(){
|
||||
var thisDd = dl.children('dd.'+ THIS);
|
||||
|
||||
//如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
|
||||
//则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
|
||||
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){
|
||||
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
|
||||
,firstIndex = showDd.eq(0).index();
|
||||
if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){
|
||||
return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last');
|
||||
}
|
||||
}
|
||||
|
||||
if(thisElem1 && thisElem1[0]){
|
||||
return thisElem1;
|
||||
}
|
||||
if(nearElem && nearElem[0]){
|
||||
return nearElem;
|
||||
}
|
||||
return dds.eq(index);
|
||||
|
||||
return thisDd;
|
||||
//return dds.eq(index);
|
||||
}();
|
||||
|
||||
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素
|
||||
nearDd = thisElem[prevNext]('dd'); //当前元素的 dd 元素
|
||||
|
||||
//如果附近的元素不存在，则停止执行
|
||||
if(!cacheNearElem[0]) return;
|
||||
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素
|
||||
|
||||
//如果附近的元素不存在，则停止执行，并清空 nearElem
|
||||
if(!cacheNearElem[0]) return nearElem = null;
|
||||
|
||||
//记录附近的元素，让其成为下一个当前元素
|
||||
nearElem = thisElem[prevNext]();
|
||||
|
||||
//如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
|
||||
if(!nearDd[0] || nearDd.hasClass(DISABLED)){
|
||||
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
|
||||
return setThisDd(prevNext, nearElem);
|
||||
}
|
||||
|
||||
//标注样式
|
||||
nearDd.addClass(THIS).siblings().removeClass(THIS);
|
||||
|
||||
//定位滚动条
|
||||
var ddThis = dl.children('dd.layui-this')
|
||||
,posTop = ddThis.position().top
|
||||
,dlHeight = dl.height()
|
||||
,ddHeight = ddThis.height();
|
||||
|
||||
//若选中元素在滚动条不可见底部
|
||||
if(posTop > dlHeight){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
||||
}
|
||||
|
||||
//若选择玄素在滚动条不可见顶部
|
||||
if(posTop < 0){
|
||||
dl.scrollTop(posTop + dl.scrollTop());
|
||||
}
|
||||
nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式
|
||||
followScroll(); //定位滚动条
|
||||
};
|
||||
|
||||
|
||||
if(keyCode === 38) setThisDd('prev'); //Up 键
|
||||
if(keyCode === 40) setThisDd('next'); //Down 键
|
||||
|
||||
@@ -297,6 +320,8 @@ layui.define('layer', function(exports){
|
||||
if(value === ''){
|
||||
dl.find('.'+NONE).remove();
|
||||
}
|
||||
|
||||
followScroll(); //定位滚动条
|
||||
};
|
||||
|
||||
if(isSearch){
|
||||
|
||||
@@ -287,7 +287,7 @@ Class.pt.creat = function(){
|
||||
layer.closeAll('dialog');
|
||||
break;
|
||||
case 2:
|
||||
var content = config.content = conType ? config.content : [config.content||'http://layer.layui.com', 'auto'];
|
||||
var content = config.content = conType ? config.content : [config.content||'', 'auto'];
|
||||
config.content = '<iframe scrolling="'+ (config.content[1]||'auto') +'" allowtransparency="true" id="'+ doms[4] +''+ times +'" name="'+ doms[4] +''+ times +'" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + config.content[0] + '"></iframe>';
|
||||
break;
|
||||
case 3:
|
||||
|
||||
322
src/lay/modules/slider.js
Normal file
322
src/lay/modules/slider.js
Normal file
@@ -0,0 +1,322 @@
|
||||
/**
|
||||
|
||||
@Title: layui.slider 滑块
|
||||
@Author: star1029
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
layui.define(['jquery', 'form'], function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
,form = layui.form
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
config: {}
|
||||
,index: layui.slider ? (layui.slider.index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
,set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件监听
|
||||
,on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'slider', ELEM_VIEW = 'layui-slider', SLIDER_BAR = 'layui-slider-bar', SLIDER_WRAP = 'layui-slider-wrap', SLIDER_WRAP_BTN = 'layui-slider-wrap-btn'
|
||||
,SLIDER_TIPS = 'layui-slider-tips', SLIDER_INPUT = 'layui-slider-input', SLIDER_INPUT_TXT = 'layui-slider-input-txt', SLIDER_INPUT_BTN = 'layui-slider-input-btn'
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++slider.index;
|
||||
that.config = $.extend({}, that.config, slider.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
min: 0 //最小值
|
||||
,max: 100 //最大值，默认100
|
||||
,value: 0 //初始值，默认为0
|
||||
,step: 1 //间隔值
|
||||
,showstep: false //间隔点开启
|
||||
,tips: true //文字提示，开启
|
||||
,input: false //输入框，关闭
|
||||
,range: false //范围选择，与输入框不能同时开启，默认关闭
|
||||
,vertical: false //垂直滑块，默认横向
|
||||
,height: 200 //配合 vertical 参数使用，默认200px
|
||||
,disabled: false //滑块禁用，默认关闭
|
||||
,color: '#009688' //主题颜色
|
||||
};
|
||||
|
||||
//滑块渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
//最小值为零
|
||||
options.min = options.min < 0 ? 0 : options.min;
|
||||
|
||||
//判断是否开启双滑块
|
||||
if(options.range){
|
||||
options.value = typeof(options.value) == 'object' ? options.value : [options.min, options.value];
|
||||
var minValue = Math.min(options.value[0], options.value[1])
|
||||
,maxValue = Math.max(options.value[0], options.value[1]);
|
||||
options.value[0] = minValue > options.min ? minValue : options.min;
|
||||
options.value[1] = maxValue > options.min ? maxValue : options.min;
|
||||
options.value[0] = options.value[0] > options.max ? options.max : options.value[0];
|
||||
options.value[1] = options.value[1] > options.max ? options.max : options.value[1];
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100)
|
||||
,scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100)
|
||||
,scale = scaleSec - scaleFir + '%';
|
||||
scaleFir = scaleFir + '%';
|
||||
scaleSec = scaleSec + '%';
|
||||
}else{
|
||||
options.value = typeof(options.value) == 'object' ? Math.min(options.value[0], options.value[1]) : options.value;
|
||||
options.value = options.value > options.min ? options.value : options.min;
|
||||
var scale = Math.floor((options.value - options.min) / (options.max - options.min) * 100) + '%';
|
||||
};
|
||||
|
||||
//如果禁用，颜色为统一的灰色
|
||||
var color = options.disabled ? '#c2c2c2' : options.color;
|
||||
|
||||
//滑块
|
||||
var temp = '<div class="layui-slider '+ (options.vertical ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div><span></span>' : '') +
|
||||
'<div class="layui-slider-bar" style="background:'+ color +'; '+ (options.vertical ? 'height' : 'width') +':'+ scale +';'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
|
||||
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>' : '') +'</div>';
|
||||
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
that.elemTemp = $(temp);
|
||||
|
||||
//把数据缓存到滑块上
|
||||
if(options.range){
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).eq(0).data('value', options.value[0]);
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).eq(1).data('value', options.value[1]);
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).data('value', options.value);
|
||||
};
|
||||
|
||||
//插入替代元素
|
||||
othis.html(that.elemTemp);
|
||||
|
||||
//垂直滑块
|
||||
if(options.vertical){
|
||||
that.elemTemp.height(options.height + 'px');
|
||||
};
|
||||
|
||||
//显示间断点
|
||||
if(options.showstep){
|
||||
var number = (options.max - options.min) / options.step, item = '';
|
||||
for(var i = 1; i < number + 1; i++) {
|
||||
var step = i * 100 / number;
|
||||
if(step < 100){
|
||||
item += '<div class="layui-slider-step" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ step +'%"></div>'
|
||||
}
|
||||
};
|
||||
that.elemTemp.append(item);
|
||||
};
|
||||
|
||||
//插入输入框
|
||||
if(options.input && !options.range){
|
||||
othis.css("position","relative");
|
||||
othis.append('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
|
||||
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value);
|
||||
if(!options.vertical) that.elemTemp.css("width", "80%");
|
||||
if(options.vertical) that.elemTemp.next('.' + SLIDER_INPUT).css({"left":0, "top":"auto", "bottom":"-45px"});
|
||||
};
|
||||
|
||||
//给未禁止的滑块滑动事件
|
||||
if(!options.disabled){
|
||||
that.slide();
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).css("cursor", "not-allowed");
|
||||
};
|
||||
|
||||
//划过滑块显示数值
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
|
||||
var sliderWidth = options.vertical ? options.height : that.elemTemp[0].offsetWidth
|
||||
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
|
||||
,tipsLeft = options.vertical ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
|
||||
,left = tipsLeft / sliderWidth * 100
|
||||
,value = $(this).parent().data('value')
|
||||
,tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
|
||||
if(options.vertical){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"30px", "display":"inline-block"});
|
||||
that.elemTemp.children('span').css({"bottom":left + '%', "margin-bottom":"18px", "display":"inline-block"});
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
|
||||
that.elemTemp.children('span').css({"left":left + '%', "display":"inline-block"});
|
||||
};
|
||||
}).on('mouseout', function(){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
that.elemTemp.children('span').css("display", "none");
|
||||
});
|
||||
};
|
||||
|
||||
//滑块滑动
|
||||
Class.prototype.slide = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,sliderAct = that.elemTemp
|
||||
,sliderWidth = options.vertical ? options.height : sliderAct[0].offsetWidth
|
||||
,sliderWrap = sliderAct.find('.' + SLIDER_WRAP)
|
||||
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
|
||||
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
|
||||
,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
|
||||
,change = function(offsetValue, index){
|
||||
if(Math.ceil(offsetValue) * step > 100){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
offsetValue = Math.round(offsetValue) * step
|
||||
};
|
||||
offsetValue = offsetValue > 100 ? 100: offsetValue;
|
||||
sliderWrap.eq(index).css((options.vertical ?'bottom':'left'), offsetValue + '%');
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft)
|
||||
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
if(options.vertical){
|
||||
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"30px"});
|
||||
sliderAct.children('span').css({"bottom":offsetValue + '%', "margin-bottom":"18px"});
|
||||
firLeft = valueTo(sliderWidth - sliderWrap[0].offsetTop - sliderWrap.height());
|
||||
secLeft = options.range ? valueTo(sliderWidth - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
|
||||
}else{
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("left",offsetValue + '%');
|
||||
sliderAct.children('span').css("left",offsetValue + '%');
|
||||
};
|
||||
firLeft = firLeft > 100 ? 100: firLeft;
|
||||
secLeft = secLeft > 100 ? 100: secLeft;
|
||||
var minLeft = Math.min(firLeft, secLeft)
|
||||
,wrapWidth = Math.abs(firLeft - secLeft);
|
||||
if(options.vertical){
|
||||
sliderAct.find('.' + SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
|
||||
}else{
|
||||
sliderAct.find('.' + SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
|
||||
};
|
||||
var selfValue = options.min + Math.round((options.max - options.min) * offsetValue / 100);
|
||||
options.sliderValue && options.sliderValue(selfValue);
|
||||
inputValue = selfValue;
|
||||
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue);
|
||||
sliderWrap.eq(index).data('value', selfValue);
|
||||
selfValue = options.setTips ? options.setTips(selfValue) : selfValue;
|
||||
sliderAct.find('.' + SLIDER_TIPS).html(selfValue);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth * 100 / step
|
||||
,left = Math.round(oldLeft) * step;
|
||||
if(value == sliderWidth){
|
||||
left = Math.ceil(oldLeft) * step;
|
||||
};
|
||||
return left;
|
||||
};
|
||||
|
||||
//滑块滑动
|
||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||
$(this).on('mousedown', function(e){
|
||||
e = e || window.event;
|
||||
var oldleft = $(this).parent()[0].offsetLeft
|
||||
,oldx = e.clientX;
|
||||
if(options.vertical){
|
||||
oldleft = sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()
|
||||
oldx = e.clientY;
|
||||
};
|
||||
$(document).on('mousemove', function(e){
|
||||
e = e || window.event;
|
||||
var left = oldleft + (options.vertical ? (oldx - e.clientY) : (e.clientX - oldx));
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth)left = sliderWidth;
|
||||
var reaLeft = left / sliderWidth * 100 / step;
|
||||
change(reaLeft, index);
|
||||
$(this).addClass('hover');
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("display", "inline-block");
|
||||
sliderAct.children('span').css("display", "inline-block");
|
||||
e.preventDefault();
|
||||
}).on('mouseup', function(e){
|
||||
$(document).off('mousemove');
|
||||
$(document).off('mouseup');
|
||||
$(this).removeClass('hover');
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
sliderAct.children('span').css("display", "none");
|
||||
});
|
||||
});
|
||||
});
|
||||
sliderAct.on('click', function(e){
|
||||
var main = $('.' + SLIDER_WRAP_BTN);
|
||||
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
|
||||
var left = options.vertical ? (sliderWidth - e.clientY + $(this).offset().top):(e.clientX - $(this).offset().left), index;
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth)left = sliderWidth;
|
||||
var reaLeft = left / sliderWidth * 100 / step;
|
||||
if(options.range){
|
||||
if(options.vertical){
|
||||
index = Math.abs(left - parseInt($(sliderWrap[0]).css('bottom'))) > Math.abs(left - parseInt($(sliderWrap[1]).css('bottom'))) ? 1 : 0;
|
||||
}else{
|
||||
index = Math.abs(left - sliderWrap[0].offsetLeft) > Math.abs(left - sliderWrap[1].offsetLeft) ? 1 : 0;
|
||||
}
|
||||
}else{
|
||||
index = 0;
|
||||
};
|
||||
change(reaLeft, index);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
//输入框
|
||||
sliderTxt.hover(
|
||||
function(){
|
||||
$(this).addClass("hover");
|
||||
$(this).children('.' + SLIDER_INPUT_BTN).fadeIn('fast');
|
||||
},
|
||||
function(){
|
||||
$(this).removeClass("hover");
|
||||
$(this).children('.' + SLIDER_INPUT_BTN).fadeOut('fast');
|
||||
}
|
||||
);
|
||||
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
|
||||
$(this).on('click', function(){
|
||||
if(index == 1){
|
||||
inputValue = inputValue - step < options.min ? options.min : inputValue - step;
|
||||
}else{
|
||||
inputValue = Number(inputValue) + step > options.max ? options.max : Number(inputValue) + step;
|
||||
};
|
||||
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step;
|
||||
change(inputScale, 0);
|
||||
});
|
||||
});
|
||||
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
|
||||
if(e.keyCode === 13){
|
||||
e.preventDefault();
|
||||
var realValue = this.value;
|
||||
realValue = isNaN(realValue) ? 0 : realValue;
|
||||
realValue = realValue < options.min ? options.min : realValue;
|
||||
realValue = realValue > options.max ? options.max : realValue;
|
||||
this.value = realValue;
|
||||
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step
|
||||
change(inputScale, 0);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
slider.render = function(options){
|
||||
var inst = new Class(options);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, slider);
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -63,7 +63,7 @@ layui.define('layer' , function(exports){
|
||||
,bindAction: '' //手动上传触发的元素
|
||||
,url: '' //上传地址
|
||||
,field: 'file' //文件字段名
|
||||
,method: 'post' //请求上传的http类型
|
||||
,method: 'post' //请求上传的 http 类型
|
||||
,data: {} //请求上传的额外参数
|
||||
,drag: true //是否允许拖拽上传
|
||||
,size: 0 //文件限制大小，默认不限制
|
||||
@@ -119,8 +119,7 @@ layui.define('layer' , function(exports){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>')
|
||||
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="'+ options.method
|
||||
,'" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
|
||||
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
|
||||
,'</form>'].join(''));
|
||||
|
||||
//插入iframe
|
||||
@@ -204,7 +203,7 @@ layui.define('layer' , function(exports){
|
||||
//提交文件
|
||||
$.ajax({
|
||||
url: options.url
|
||||
,type: options.method
|
||||
,type: 'post'
|
||||
,data: formData
|
||||
,contentType: false
|
||||
,processData: false
|
||||
|
||||
@@ -173,5 +173,9 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
};
|
||||
|
||||
//监听 DOM 尺寸变化，该创意来自：http://benalman.com/projects/jquery-resize-plugin/
|
||||
!function(a,b,c){"$:nomunge";function l(){f=b[g](function(){d.each(function(){var b=a(this),c=b.width(),d=b.height(),e=a.data(this,i);(c!==e.w||d!==e.h)&&b.trigger(h,[e.w=c,e.h=d])}),l()},e[j])}var f,d=a([]),e=a.resize=a.extend(a.resize,{}),g="setTimeout",h="resize",i=h+"-special-event",j="delay",k="throttleWindow";e[j]=250,e[k]=!0,a.event.special[h]={setup:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.add(b),a.data(this,i,{w:b.width(),h:b.height()}),1===d.length&&l()},teardown:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.not(b),b.removeData(i),d.length||clearTimeout(f)},add:function(b){function f(b,e,f){var g=a(this),h=a.data(this,i)||{};h.w=e!==c?e:g.width(),h.h=f!==c?f:g.height(),d.apply(this,arguments)}if(!e[k]&&this[g])return!1;var d;return a.isFunction(b)?(d=b,f):(d=b.handler,b.handler=f,void 0)}}}($,window);
|
||||
|
||||
//暴露接口
|
||||
exports('util', util);
|
||||
});
|
||||
Reference in New Issue
Block a user