连续复制
一键复制
一键打包
carousel.js
/**
@Name：layui.carousel 轮播模块
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint()
,device = layui.device()
// 外部接口
,carousel = {
config: {} // 全局配置项
// 设置全局项
,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 = 'carousel', ELEM = '.layui-carousel', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,ELEM_ITEM = '>*[carousel-item]>*', ELEM_LEFT = 'layui-carousel-left', ELEM_RIGHT = 'layui-carousel-right', ELEM_PREV = 'layui-carousel-prev', ELEM_NEXT = 'layui-carousel-next', ELEM_ARROW = 'layui-carousel-arrow', ELEM_IND = 'layui-carousel-ind'
// 构造器
,Class = function(options){
var that = this;
that.config = $.extend({}, that.config, carousel.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
width: '600px'
,height: '280px'
,full: false // 是否全屏
,arrow: 'hover' // 切换箭头默认显示状态：hover/always/none
,indicator: 'inside' // 指示器位置：inside/outside/none
,autoplay: true // 是否自动切换
,interval: 3000 // 自动切换的时间间隔，不能低于800ms
,anim: '' // 动画类型：default/updown/fade
,trigger: 'click' // 指示器的触发方式：click/hover
,index: 0 // 初始开始的索引
};
// 轮播渲染
Class.prototype.render = function(){
var that = this
,options = that.config;
options.elem = $(options.elem);
if(!options.elem[0]) return;
that.elemItem = options.elem.find(ELEM_ITEM);
if(options.index < 0) options.index = 0;
if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1;
if(options.interval < 800) options.interval = 800;
// 是否全屏模式
if(options.full){
options.elem.css({
position: 'fixed'
,width: '100%'
,height: '100%'
,zIndex: 9999
});
} else {
options.elem.css({
width: options.width
,height: options.height
});
}
options.elem.attr('lay-anim', options.anim);
// 初始焦点状态
that.elemItem.eq(options.index).addClass(THIS);
// 指示器等动作
if(that.elemItem.length <= 1) return;
that.indicator();
that.arrow();
that.autoplay();
that.events();
};
// 重置轮播
Class.prototype.reload = function(options){
var that = this;
clearInterval(that.timer);
that.config = $.extend({}, that.config, options);
that.render();
};
// 获取上一个等待条目的索引
Class.prototype.prevIndex = function(){
var that = this
,options = that.config;
var prevIndex = options.index - 1;
if(prevIndex < 0){
prevIndex = that.elemItem.length - 1;
}
return prevIndex;
};
// 获取下一个等待条目的索引
Class.prototype.nextIndex = function(){
var that = this
,options = that.config;
var nextIndex = options.index + 1;
if(nextIndex >= that.elemItem.length){
nextIndex = 0;
}
return nextIndex;
};
// 索引递增
Class.prototype.addIndex = function(num){
var that = this
,options = that.config;
num = num || 1;
options.index = options.index + num;
// index不能超过轮播总数量
if(options.index >= that.elemItem.length){
options.index = 0;
}
};
// 索引递减
Class.prototype.subIndex = function(num){
var that = this
,options = that.config;
num = num || 1;
options.index = options.index - num;
// index不能超过轮播总数量
if(options.index < 0){
options.index = that.elemItem.length - 1;
}
};
// 自动轮播
Class.prototype.autoplay = function(){
var that = this
,options = that.config;
if(!options.autoplay) return;
that.timer = setInterval(function(){
that.slide();
}, options.interval);
};
// 箭头
Class.prototype.arrow = function(){
var that = this
,options = that.config;
// 模板
var tplArrow = $([
'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="sub">'+ (options.anim === 'updown' ? '' : '') +'</button>'
,'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="add">'+ (options.anim === 'updown' ? '' : '') +'</button>'
].join(''));
// 预设基础属性
options.elem.attr('lay-arrow', options.arrow);
// 避免重复插入
if(options.elem.find('.'+ELEM_ARROW)[0]){
options.elem.find('.'+ELEM_ARROW).remove();
};
options.elem.append(tplArrow);
// 事件
tplArrow.on('click', function(){
var othis = $(this)
,type = othis.attr('lay-type')
that.slide(type);
});
};
// 指示器
Class.prototype.indicator = function(){
var that = this
,options = that.config;
// 模板
var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>'
,function(){
var li = [];
layui.each(that.elemItem, function(index){
li.push('<li'+ (options.index === index ? ' class="layui-this"' : '') +'></li>');
});
return li.join('');
}()
,'</ul></div>'].join(''));
// 预设基础属性
options.elem.attr('lay-indicator', options.indicator);
// 避免重复插入
if(options.elem.find('.'+ELEM_IND)[0]){
options.elem.find('.'+ELEM_IND).remove();
};
options.elem.append(tplInd);
if(options.anim === 'updown'){
tplInd.css('margin-top', -(tplInd.height()/2));
}
// 事件
tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){
var othis = $(this)
,index = othis.index();
if(index > options.index){
that.slide('add', index - options.index);
} else if(index < options.index){
that.slide('sub', options.index - index);
}
});
};
// 滑动切换
Class.prototype.slide = function(type, num){
var that = this
,elemItem = that.elemItem
,options = that.config
,thisIndex = options.index
,filter = options.elem.attr('lay-filter');
if(that.haveSlide) return;
// 滑动方向
if(type === 'sub'){
that.subIndex(num);
elemItem.eq(options.index).addClass(ELEM_PREV);
setTimeout(function(){
elemItem.eq(thisIndex).addClass(ELEM_RIGHT);
elemItem.eq(options.index).addClass(ELEM_RIGHT);
}, 50);
} else { // 默认递增滑
that.addIndex(num);
elemItem.eq(options.index).addClass(ELEM_NEXT);
setTimeout(function(){
elemItem.eq(thisIndex).addClass(ELEM_LEFT);
elemItem.eq(options.index).addClass(ELEM_LEFT);
}, 50);
};
// 移除过度类
setTimeout(function(){
elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT);
elemItem.eq(options.index).addClass(THIS);
that.haveSlide = false; // 解锁
}, 300);
// 指示器焦点
that.elemInd.find('li').eq(options.index).addClass(THIS)
.siblings().removeClass(THIS);
that.haveSlide = true;
layui.event.call(this, MOD_NAME, 'change('+ filter +')', {
index: options.index
,prevIndex: thisIndex
,item: elemItem.eq(options.index)
});
};
// 事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
if(options.elem.data('haveEvents')) return;
// 移入移出容器
options.elem.on('mouseenter', function(){
clearInterval(that.timer);
}).on('mouseleave', function(){
that.autoplay();
});
options.elem.data('haveEvents', true);
};
// 核心入口
carousel.render = function(options){
var inst = new Class(options);
return inst;
};
exports(MOD_NAME, carousel);
});
code.js
/**
@Name：layui.code 代码修饰器
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$;
var about = 'http:// www.layui.com/doc/modules/code.html'; // 关于信息
exports('code', function(options){
var elems = [];
options = options || {};
options.elem = $(options.elem||'.layui-code');
options.about = 'about' in options ? options.about : true;
options.elem.each(function(){
elems.push(this);
});
layui.each(elems.reverse(), function(index, item){
var othis = $(item), html = othis.html();
// 转义HTML标签
if(othis.attr('lay-encode') || options.encode){
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"')
}
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
if(!othis.find('>.layui-code-h3')[0]){
othis.prepend('<h3 class="layui-code-h3">'+ (othis.attr('lay-title')||options.title||'code') + (options.about ? '<a href="'+ about +'" target="_blank">layui.code</a>' : '') + '</h3>');
}
var ol = othis.find('>.layui-code-ol');
othis.addClass('layui-box layui-code-view');
// 识别皮肤
if(othis.attr('lay-skin') || options.skin){
othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin));
}
// 按行数适配左边距
if((ol.find('li').length/100|0) > 0){
ol.css('margin-left', (ol.find('li').length/100|0) + 'px');
}
// 设置最大高度
if(othis.attr('lay-height') || options.height){
ol.css('max-height', othis.attr('lay-height') || options.height);
}
});
});
}).addcss('modules/code.css', 'skincodecss');colorpicker.js
/**
@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);
}
}
// 操作当前实例
,thisColorPicker = function(){
var that = this
,options = that.config;
return {
config: options
}
}
// 字符常量
,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = '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 = 'layui-colorpicker-side', PICKER_SIDE_SLIDER = 'layui-colorpicker-side-slider'
,PICKER_BASIS = 'layui-colorpicker-basis', PICKER_ALPHA_BG = 'layui-colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'layui-colorpicker-alpha-slider', PICKER_BASIS_CUR = 'layui-colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
// 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]};
}
,$win = $(window)
,$doc = $(document)
// 构造器
,Class = function(options){
var that = this;
that.index = ++colorpicker.index;
that.config = $.extend({}, that.config, colorpicker.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
color: '' // 默认颜色，默认没有
,size: null // 选择器大小
,alpha: false // 是否开启透明度
,format: 'hex' // 颜色显示/输入格式，可选 rgb,hex
,predefine: false // 预定义颜色是否开启
,colors: [ // 默认预定义颜色列表
'#009688', '#5FB878', '#1E9FFF', '#FF5722', '#FFB800', '#01AAED', '#999', '#c00', '#ff8c00','#ffd700'
,'#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgb(0, 186, 189)', 'rgb(255, 120, 0)', 'rgb(250, 212, 0)', '#393D49', 'rgba(0,0,0,.5)', 'rgba(255, 69, 0, 0.68)', 'rgba(144, 240, 144, 0.5)', 'rgba(31, 147, 255, 0.73)'
]
};
// 初始颜色选择框
Class.prototype.render = function(){
var that = this
,options = that.config
// 颜色选择框对象
,elemColorBox = $(['<div class="layui-unselect layui-colorpicker">'
,'<span '+ (options.format == 'rgb' && options.alpha
? 'class="layui-colorpicker-trigger-bgcolor"'
: '') +'>'
,'<span class="layui-colorpicker-trigger-span" '
,'lay-type="'+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'" '
,'style="'+ function(){
var bgstr = '';
if(options.color){
bgstr = options.color;
if((options.color.match(/[0-9]{1,3}/g) || []).length > 3){ // 需要优化
if(!(options.alpha && options.format == 'rgb')){
bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color)))
}
}
return 'background: '+ bgstr;
}
return bgstr;
}() +'">'
,'<i class="layui-icon layui-colorpicker-trigger-i '+ (options.color
? ICON_PICKER_DOWN
: ICON_PICKER_CLOSE) +'"></i>'
,'</span>'
,'</span>'
,'</div>'].join(''))
// 初始化颜色选择框
var othis = $(options.elem);
options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); // 初始化颜色选择框尺寸
// 插入颜色选择框
othis.addClass('layui-inline').html(
that.elemColorBox = elemColorBox
);
// 获取背景色值
that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
// 相关事件
that.events();
};
// 渲染颜色选择器
Class.prototype.renderPicker = function(){
var that = this
,options = that.config
,elemColorBox = that.elemColorBox[0]
// 颜色选择器对象
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-upbit layui-colorpicker-main">'
// 颜色面板
,'<div class="layui-colorpicker-main-wrapper">'
,'<div class="layui-colorpicker-basis">'
,'<div class="layui-colorpicker-basis-white"></div>'
,'<div class="layui-colorpicker-basis-black"></div>'
,'<div class="layui-colorpicker-basis-cursor"></div>'
,'</div>'
,'<div class="layui-colorpicker-side">'
,'<div class="layui-colorpicker-side-slider"></div>'
,'</div>'
,'</div>'
// 透明度条块
,'<div class="layui-colorpicker-main-alpha '+ (options.alpha ? SHOW : '') +'">'
,'<div class="layui-colorpicker-alpha-bgcolor">'
,'<div class="layui-colorpicker-alpha-slider"></div>'
,'</div>'
,'</div>'
// 预设颜色列表
,function(){
if(options.predefine){
var list = ['<div class="layui-colorpicker-main-pre">'];
layui.each(options.colors, function(i, v){
list.push(['<div class="layui-colorpicker-pre'+ ((v.match(/[0-9]{1,3}/g) || []).length > 3
? ' layui-colorpicker-pre-isalpha'
: '') +'">'
,'<div style="background:'+ v +'"></div>'
,'</div>'].join(''));
});
list.push('</div>');
return list.join('');
} else {
return '';
}
}()
// 底部表单元素区域
,'<div class="layui-colorpicker-main-input">'
,'<div class="layui-inline">'
,'<input type="text" class="layui-input">'
,'</div>'
,'<div class="layui-btn-container">'
,'<button class="layui-btn layui-btn-primary layui-btn-sm" colorpicker-events="clear">清空</button>'
,'<button class="layui-btn layui-btn-sm" colorpicker-events="confirm">确定</button>'
,'</div'
,'</div>'
,'</div>'].join(''))
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)[0];
// 如果当前点击的颜色盒子已经存在选择器，则关闭
if($(ELEM_MAIN)[0] && $(ELEM_MAIN).data('index') == that.index){
that.removePicker(Class.thisElemInd);
} else { // 插入颜色选择器
that.removePicker(Class.thisElemInd);
$('body').append(elemPicker);
}
Class.thisElemInd = that.index; // 记录最新打开的选择器索引
Class.thisColor = elemColorBox.style.background // 记录最新打开的选择器颜色选中值
that.position();
that.pickerEvents();
};
// 颜色选择器移除
Class.prototype.removePicker = function(index){
var that = this
,options = that.config;
$('#layui-colorpicker'+ (index || that.index)).remove();
return that;
};
// 定位算法
Class.prototype.position = function(){
var that = this
,options = that.config
,elem = that.bindElem || that.elemColorBox[0]
,elemPicker = that.elemPicker[0]
,rect = elem.getBoundingClientRect() // 绑定元素的坐标
,elemWidth = elemPicker.offsetWidth // 控件的宽度
,elemHeight = elemPicker.offsetHeight // 控件的高度
// 滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
left = left - (elemWidth - elem.offsetWidth)/2;
top = top + margin
// 如果右侧超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin;
} else if(left < margin){ // 如果左侧超出边界
left = margin;
}
// 如果底部超出边界
if(top + elemHeight + margin > winArea()){
top = rect.top > elemHeight // 顶部是否有足够区域显示完全
? rect.top - elemHeight
: winArea() - elemHeight;
top = top - margin*2;
}
if(options.position){
elemPicker.style.position = options.position;
}
elemPicker.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemPicker.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
};
// 颜色选择器赋值
Class.prototype.val = function(){
var that = this
,options = that.config
,elemColorBox = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT)
,e = elemColorBox[0]
,bgcolor = e.style.backgroundColor;
// 判断是否有背景颜色
if(bgcolor){
// 转化成hsb格式
var hsb = RGBToHSB(RGBSTo(bgcolor))
,type = elemColorBox.attr('lay-type');
// 同步滑块的位置及颜色选择器的选择
that.select(hsb.h, hsb.s, hsb.b);
// 如果格式要求为rgb
if(type === 'torgb'){
elemPickerInput.find('input').val(bgcolor);
};
// 如果格式要求为rgba
if(type === 'rgba'){
var rgb = RGBSTo(bgcolor);
// 如果开启透明度而没有设置，则给默认值
if((bgcolor.match(/[0-9]{1,3}/g) || []).length == 3){
elemPickerInput.find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
} else {
elemPickerInput.find('input').val(bgcolor);
var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left);
};
// 设置span背景色
that.elemPicker.find('.'+ 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);
elemPickerInput.find('input').val("");
that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = '';
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
}
};
// 颜色选择器滑动 / 点击
Class.prototype.side = function(){
var that = this
,options = that.config
,span = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,type = span.attr('lay-type')
,side = that.elemPicker.find('.' + PICKER_SIDE)
,slider = that.elemPicker.find('.' + PICKER_SIDE_SLIDER)
,basis = that.elemPicker.find('.' + PICKER_BASIS)
,choose = that.elemPicker.find('.' + PICKER_BASIS_CUR)
,alphacolor = that.elemPicker.find('.' + PICKER_ALPHA_BG)
,alphaslider = that.elemPicker.find('.' + 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
,i = that.elemColorBox.find('.' + PICKER_TRIG_I)
,pre = that.elemPicker.find('.layui-colorpicker-pre').children('div')
,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(type === 'torgb'){
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
};
if(type === 'rgba'){
var left = 0;
left = a * 280;
alphaslider.css("left", left);
that.elemPicker.find('.' + 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(that.elemPicker.find('.' + PICKER_INPUT).find('input').val());
}
// 拖拽元素
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div'].join(''))
,createMoveElem = function(call){
$('#LAY-colorpicker-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', call);
elemMove.on('mouseup', function(){
elemMove.remove();
}).on('mouseleave', function(){
elemMove.remove();
});
};
// 右侧主色选择
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();
};
createMoveElem(move);
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();
};
layui.stope(e);
createMoveElem(move);
e.preventDefault();
});
basis.on('mousedown', function(e){
var top = e.clientY - $(this).offset().top - 3 + $win.scrollTop()
,left = e.clientX - $(this).offset().left - 3 + $win.scrollLeft()
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();
choose.trigger(e, 'mousedown');
});
// 底部透明度选择
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();
};
createMoveElem(move);
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('.layui-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, type){
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;
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); // 滑块的top
that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex; // 颜色选择器的背景
// 选择器的top left
that.elemPicker.find('.' + PICKER_BASIS_CUR).css({
"top": top
,"left": left
});
if(type === 'change') return;
// 选中的颜色
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#' + color);
};
Class.prototype.pickerEvents = function(){
var that = this
,options = that.config
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) // 颜色盒子
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' input') // 颜色选择器表单
,pickerEvents = {
// 清空
clear: function(othis){
elemColorBoxSpan[0].style.background ='';
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
that.color = '';
options.done && options.done('');
that.removePicker();
}
// 确认
,confirm: function(othis, change){
var value = elemPickerInput.val()
,colorValue = value
,hsb = {};
if(value.indexOf(',') > -1){
hsb = RGBToHSB(RGBSTo(value));
that.select(hsb.h, hsb.s, hsb.b);
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
if((value.match(/[0-9]{1,3}/g) || []).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
that.elemPicker.find('.' + PICKER_ALPHA_SLIDER).css("left", left);
elemColorBoxSpan[0].style.background = value;
colorValue = value;
};
} else {
hsb = HEXToHSB(value);
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
};
if(change === 'change'){
that.select(hsb.h, hsb.s, hsb.b, change);
options.change && options.change(colorValue);
return;
}
that.color = value;
options.done && options.done(value);
that.removePicker();
}
};
// 选择器面板点击事件
that.elemPicker.on('click', '*[colorpicker-events]', function(){
var othis = $(this)
,attrEvent = othis.attr('colorpicker-events');
pickerEvents[attrEvent] && pickerEvents[attrEvent].call(this, othis);
});
// 输入框事件
elemPickerInput.on('keyup', function(e){
var othis = $(this)
pickerEvents.confirm.call(this, othis, e.keyCode === 13 ? null : 'change');
});
}
// 颜色选择器输入
Class.prototype.events = function(){
var that = this
,options = that.config
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
// 弹出颜色选择器
that.elemColorBox.on('click' , function(){
that.renderPicker();
if($(ELEM_MAIN)[0]){
that.val();
that.side();
};
});
if(!options.elem[0] || that.elemColorBox[0].eventHandler) return;
// 绑定关闭控件事件
$doc.on('click', function(e){
// 如果点击的元素是颜色框
if($(e.target).hasClass(ELEM)
|| $(e.target).parents('.'+ELEM)[0]
) return;
// 如果点击的元素是选择器
if($(e.target).hasClass(ELEM_MAIN.replace(/\./g, ''))
|| $(e.target).parents(ELEM_MAIN)[0]
) return;
if(!that.elemPicker) return;
if(that.color){
var hsb = RGBToHSB(RGBSTo(that.color));
that.select(hsb.h, hsb.s, hsb.b);
} else {
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
}
elemColorBoxSpan[0].style.background = that.color || '';
that.removePicker();
});
// 自适应定位
$win.on('resize', function(){
if(!that.elemPicker || !$(ELEM_MAIN)[0]){
return false;
}
that.position();
});
that.elemColorBox[0].eventHandler = true;
};
// 核心入口
colorpicker.render = function(options){
var inst = new Class(options);
return thisColorPicker.call(inst);
};
exports(MOD_NAME, colorpicker);
});
element.js
/**
@Name：layui.element 常用元素操作
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show'
,Element = function(){
this.config = {};
};
// 全局设置
Element.prototype.set = function(options){
var that = this;
$.extend(true, that.config, options);
return that;
};
// 表单事件监听
Element.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
};
// 外部Tab新增
Element.prototype.tabAdd = function(filter, options){
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,barElem = titElem.children('.layui-tab-bar')
,contElem = tabElem.children('.layui-tab-content')
,li = '<li lay-id="'+ (options.id||'') +'"'
+(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +'>'+ (options.title||'unnaming') +'</li>';
barElem[0] ? barElem.before(li) : titElem.append(li);
contElem.append('<div class="layui-tab-item">'+ (options.content||'') +'</div>');
call.hideTabMore(true);
call.tabAuto();
return this;
};
// 外部Tab删除
Element.prototype.tabDelete = function(filter, layid){
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabDelete(null, liElem);
return this;
};
// 外部Tab切换
Element.prototype.tabChange = function(filter, layid){
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabClick.call(liElem[0], null, null, liElem);
return this;
};
// 自定义Tab选项卡
Element.prototype.tab = function(options){
options = options || {};
dom.on('click', options.headerElem, function(e){
var index = $(this).index();
call.tabClick.call(this, e, index, null, options);
});
};
// 动态改变进度条
Element.prototype.progress = function(filter, percent){
var ELEM = 'layui-progress'
,elem = $('.'+ ELEM +'[lay-filter='+ filter +']')
,elemBar = elem.find('.'+ ELEM +'-bar')
,text = elemBar.find('.'+ ELEM +'-text');
elemBar.css('width', percent);
text.text(percent);
return this;
};
var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar'
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_MORE = 'layui-nav-more'
,NAV_ANIM = 'layui-anim layui-anim-upbit'
// 基础事件体
,call = {
// Tab点击
tabClick: function(e, index, liElem, options){
options = options || {};
var othis = liElem || $(this)
,index = index || othis.parent().children('li').index(othis)
,parents = options.headerElem ? othis.parent() : othis.parents('.layui-tab').eq(0)
,item = options.bodyElem ? $(options.bodyElem) : parents.children('.layui-tab-content').children('.layui-tab-item')
,elemA = othis.find('a')
,filter = parents.attr('lay-filter');
if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank')){
othis.addClass(THIS).siblings().removeClass(THIS);
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
}
layui.event.call(this, MOD_NAME, 'tab('+ filter +')', {
elem: parents
,index: index
});
}
// Tab删除
,tabDelete: function(e, othis){
var li = othis || $(this).parent(), index = li.index()
,parents = li.parents('.layui-tab').eq(0)
,item = parents.children('.layui-tab-content').children('.layui-tab-item')
,filter = parents.attr('lay-filter');
if(li.hasClass(THIS)){
if(li.next()[0]){
call.tabClick.call(li.next()[0], null, index + 1);
} else if(li.prev()[0]){
call.tabClick.call(li.prev()[0], null, index - 1);
}
}
li.remove();
item.eq(index).remove();
setTimeout(function(){
call.tabAuto();
}, 50);
layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', {
elem: parents
,index: index
});
}
// Tab自适应
,tabAuto: function(){
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
,CLOSE = 'layui-tab-close', that = this;
$('.layui-tab').each(function(){
var othis = $(this)
,title = othis.children('.layui-tab-title')
,item = othis.children('.layui-tab-content').children('.layui-tab-item')
,STOPE = 'lay-stope="tabmore"'
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
if(that === window && device.ie != 8){
call.hideTabMore(true)
}
// 允许关闭
if(othis.attr('lay-allowClose')){
title.find('li').each(function(){
var li = $(this);
if(!li.find('.'+CLOSE)[0]){
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">ဆ</i>');
close.on('click', call.tabDelete);
li.append(close);
}
});
}
if(typeof othis.attr('lay-unauto') === 'string') return;
// 响应式
if(title.prop('scrollWidth') > title.outerWidth()+1){
if(title.find('.'+BAR)[0]) return;
title.append(span);
othis.attr('overflow', '');
span.on('click', function(e){
title[this.title ? 'removeClass' : 'addClass'](MORE);
this.title = this.title ? '' : '收缩';
});
} else {
title.find('.'+BAR).remove();
othis.removeAttr('overflow');
}
});
}
// 隐藏更多Tab
,hideTabMore: function(e){
var tsbTitle = $('.layui-tab-title');
if(e === true || $(e.target).attr('lay-stope') !== 'tabmore'){
tsbTitle.removeClass('layui-tab-more');
tsbTitle.find('.layui-tab-bar').attr('title','');
}
}
// 点击一级菜单
/*
,clickThis: function(){
var othis = $(this), parents = othis.parents(NAV_ELEM)
,filter = parents.attr('lay-filter')
,elemA = othis.find('a')
,unselect = typeof othis.attr('lay-unselect') === 'string';
if(othis.find('.'+NAV_CHILD)[0]) return;
if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){
parents.find('.'+THIS).removeClass(THIS);
othis.addClass(THIS);
}
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
}
)
*/
// 点击菜单 - a标签触发
,clickThis: function(){
var othis = $(this)
,parents = othis.parents(NAV_ELEM)
,filter = parents.attr('lay-filter')
,parent = othis.parent()
,child = othis.siblings('.'+NAV_CHILD)
,unselect = typeof parent.attr('lay-unselect') === 'string';
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
if(!child[0]){
parents.find('.'+THIS).removeClass(THIS);
parent.addClass(THIS);
}
}
// 如果是垂直菜单
if(parents.hasClass(NAV_TREE)){
child.removeClass(NAV_ANIM);
// 如果有子菜单，则展开
if(child[0]){
parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed');
if(parents.attr('lay-shrink') === 'all'){
parent.siblings().removeClass(NAV_ITEM + 'ed');
}
}
}
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
}
// 点击子菜单选中
/*
,clickChild: function(){
var othis = $(this), parents = othis.parents(NAV_ELEM)
,filter = parents.attr('lay-filter');
parents.find('.'+THIS).removeClass(THIS);
othis.addClass(THIS);
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
}
*/
// 折叠面板
,collapse: function(){
var othis = $(this), icon = othis.find('.layui-colla-icon')
,elemCont = othis.siblings('.layui-colla-content')
,parents = othis.parents('.layui-collapse').eq(0)
,filter = parents.attr('lay-filter')
,isNone = elemCont.css('display') === 'none';
// 是否手风琴
if(typeof parents.attr('lay-accordion') === 'string'){
var show = parents.children('.layui-colla-item').children('.'+SHOW);
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('');
show.removeClass(SHOW);
}
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
icon.html(isNone ? '' : '');
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
title: othis
,content: elemCont
,show: isNone
});
}
};
// 初始化元素操作
Element.prototype.init = function(type, filter){
var that = this, elemFilter = function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}(), items = {
// Tab选项卡
tab: function(){
call.tabAuto.call({});
}
// 导航菜单
,nav: function(){
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, follow = function(bar, nav, index){
var othis = $(this), child = othis.find('.'+NAV_CHILD);
if(nav.hasClass(NAV_TREE)){
bar.css({
top: othis.position().top
,height: othis.children('a').outerHeight()
,opacity: 1
});
} else {
child.addClass(NAV_ANIM);
bar.css({
left: othis.position().left + parseFloat(othis.css('marginLeft'))
,top: othis.position().top + othis.height() - bar.height()
});
timer[index] = setTimeout(function(){
bar.css({
width: othis.width()
,opacity: 1
});
}, device.ie && device.ie < 10 ? 0 : TIME);
clearTimeout(timeEnd[index]);
if(child.css('display') === 'block'){
clearTimeout(timerMore[index]);
}
timerMore[index] = setTimeout(function(){
child.addClass(SHOW)
othis.find('.'+NAV_MORE).addClass(NAV_MORE+'d');
}, 300);
}
}
$(NAV_ELEM + elemFilter).each(function(index){
var othis = $(this)
,bar = $('<span class="'+ NAV_BAR +'"></span>')
,itemElem = othis.find('.'+NAV_ITEM);
// Hover滑动效果
if(!othis.find('.'+NAV_BAR)[0]){
othis.append(bar);
itemElem.on('mouseenter', function(){
follow.call(this, bar, othis, index);
}).on('mouseleave', function(){
if(!othis.hasClass(NAV_TREE)){
clearTimeout(timerMore[index]);
timerMore[index] = setTimeout(function(){
othis.find('.'+NAV_CHILD).removeClass(SHOW);
othis.find('.'+NAV_MORE).removeClass(NAV_MORE+'d');
}, 300);
}
});
othis.on('mouseleave', function(){
clearTimeout(timer[index])
timeEnd[index] = setTimeout(function(){
if(othis.hasClass(NAV_TREE)){
bar.css({
height: 0
,top: bar.position().top + bar.height()/2
,opacity: 0
});
} else {
bar.css({
width: 0
,left: bar.position().left + bar.width()/2
,opacity: 0
});
}
}, TIME);
});
}
// 展开子菜单
itemElem.find('a').each(function(){
var thisA = $(this)
,parent = thisA.parent()
,child = thisA.siblings('.'+NAV_CHILD);
// 输出小箭头
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){
thisA.append('<span class="'+ NAV_MORE +'"></span>');
}
thisA.off('click', call.clickThis).on('click', call.clickThis); // 点击菜单
});
});
}
// 面包屑
,breadcrumb: function(){
var ELEM = '.layui-breadcrumb';
$(ELEM + elemFilter).each(function(){
var othis = $(this)
,ATTE_SPR = 'lay-separator'
,separator = othis.attr(ATTE_SPR) || '/'
,aNode = othis.find('a');
if(aNode.next('span['+ ATTE_SPR +']')[0]) return;
aNode.each(function(index){
if(index === aNode.length - 1) return;
$(this).after('<span '+ ATTE_SPR +'>'+ separator +'</span>');
});
othis.css('visibility', 'visible');
});
}
// 进度条
,progress: function(){
var ELEM = 'layui-progress';
$('.' + ELEM + elemFilter).each(function(){
var othis = $(this)
,elemBar = othis.find('.layui-progress-bar')
,percent = elemBar.attr('lay-percent');
elemBar.css('width', function(){
return /^.+\/.+$/.test(percent)
? (new Function('return '+ percent)() * 100) + '%'
: percent;
}());
if(othis.attr('lay-showPercent')){
setTimeout(function(){
elemBar.html('<span class="'+ ELEM +'-text">'+ percent +'</span>');
},350);
}
});
}
// 折叠面板
,collapse: function(){
var ELEM = 'layui-collapse';
$('.' + ELEM + elemFilter).each(function(){
var elemItem = $(this).find('.layui-colla-item')
elemItem.each(function(){
var othis = $(this)
,elemTitle = othis.find('.layui-colla-title')
,elemCont = othis.find('.layui-colla-content')
,isNone = elemCont.css('display') === 'none';
// 初始状态
elemTitle.find('.layui-colla-icon').remove();
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '' : '') +'</i>');
// 点击标题
elemTitle.off('click', call.collapse).on('click', call.collapse);
});
});
}
};
return items[type] ? items[type]() : layui.each(items, function(index, item){
item();
});
};
Element.prototype.render = Element.prototype.init;
var element = new Element(), dom = $(document);
element.render();
var TITLE = '.layui-tab-title li';
dom.on('click', TITLE, call.tabClick); // Tab切换
dom.on('click', call.hideTabMore); // 隐藏展开的Tab
$(window).on('resize', call.tabAuto); // 自适应
exports(MOD_NAME, element);
});
flow.js
/**
@Name：layui.flow 流加载
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$, Flow = function(options){}
,ELEM_MORE = 'layui-flow-more'
,ELEM_LOAD = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon "></i>';
// 主方法
Flow.prototype.load = function(options){
var that = this, page = 0, lock, isOver, lazyimg, timer;
options = options || {};
var elem = $(options.elem); if(!elem[0]) return;
var scrollElem = $(options.scrollElem || document); // 滚动条所在元素
var mb = options.mb || 50; // 与底部的临界距离
var isAuto = 'isAuto' in options ? options.isAuto : true; // 是否自动滚动加载
var end = options.end || '没有更多了'; // “末页”显示文案
// 滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
// 加载更多
var ELEM_TEXT = '<cite>加载更多</cite>'
,more = $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');
if(!elem.find('.layui-flow-more')[0]){
elem.append(more);
}
// 加载下一个元素
var next = function(html, over){
html = $(html);
more.before(html);
over = over == 0 ? true : null;
over ? more.html(end) : more.find('a').html(ELEM_TEXT);
isOver = over;
lock = null;
lazyimg && lazyimg();
};
// 触发请求
var done = function(){
lock = true;
more.find('a').html(ELEM_LOAD);
typeof options.done === 'function' && options.done(++page, next);
};
done();
// 不自动滚动加载
more.find('a').on('click', function(){
var othis = $(this);
if(isOver) return;
lock || done();
});
// 如果允许图片懒加载
if(options.isLazyimg){
var lazyimg = that.lazyimg({
elem: options.elem + ' img'
,scrollElem: options.scrollElem
});
}
if(!isAuto) return that;
scrollElem.on('scroll', function(){
var othis = $(this), top = othis.scrollTop();
if(timer) clearTimeout(timer);
if(isOver) return;
timer = setTimeout(function(){
// 计算滚动所在容器的可视高度
var height = notDocment ? othis.height() : $(window).height();
// 计算滚动所在容器的实际高度
var scrollHeight = notDocment
? othis.prop('scrollHeight')
: document.documentElement.scrollHeight;
// 临界点
if(scrollHeight - top - height <= mb){
lock || done();
}
}, 100);
});
return that;
};
// 图片懒加载
Flow.prototype.lazyimg = function(options){
var that = this, index = 0, haveScroll;
options = options || {};
var scrollElem = $(options.scrollElem || document); // 滚动条所在元素
var elem = options.elem || 'img';
// 滚动条所在元素是否为document
var notDocment = options.scrollElem && options.scrollElem !== document;
// 显示图片
var show = function(item, height){
var start = scrollElem.scrollTop(), end = start + height;
var elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
/* 始终只加载在当前屏范围内的图片 */
if(elemTop >= start && elemTop <= end){
if(!item.attr('src')){
var src = item.attr('lay-src');
layui.img(src, function(){
var next = that.lazyimg.elem.eq(index);
item.attr('src', src).removeAttr('lay-src');
/* 当前图片加载就绪后，检测下一个图片是否在当前屏 */
next[0] && render(next);
index++;
});
}
}
}, render = function(othis, scroll){
// 计算滚动所在容器的可视高度
var height = notDocment ? (scroll||scrollElem).height() : $(window).height();
var start = scrollElem.scrollTop(), end = start + height;
that.lazyimg.elem = $(elem);
if(othis){
show(othis, height);
} else {
// 计算未加载过的图片
for(var i = 0; i < that.lazyimg.elem.length; i++){
var item = that.lazyimg.elem.eq(i), elemTop = notDocment ? function(){
return item.offset().top - scrollElem.offset().top + start;
}() : item.offset().top;
show(item, height);
index = i;
// 如果图片的top坐标，超出了当前屏，则终止后续图片的遍历
if(elemTop > end) break;
}
}
};
render();
if(!haveScroll){
var timer;
scrollElem.on('scroll', function(){
var othis = $(this);
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
render(null, othis);
}, 50);
});
haveScroll = true;
}
return render;
};
// 暴露接口
exports('flow', new Flow());
});
form.js
/**
@Name：layui.form 表单组件
@Author：贤心
@License：MIT
*/
layui.define('layer', function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this'
,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,Form = function(){
this.config = {
verify: {
required: [
/[\S]+/
,'必填项不能为空'
]
,phone: [
/^1\d{10}$/
,'请输入正确的手机号'
]
,email: [
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
,'邮箱格式不正确'
]
,url: [
/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
,'链接格式不正确'
]
,number: function(value){
if(!value || isNaN(value)) return '只能填写数字'
}
,date: [
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
,'日期格式不正确'
]
,identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
,'请输入正确的身份证号'
]
}
};
};
// 全局设置
Form.prototype.set = function(options){
var that = this;
$.extend(true, that.config, options);
return that;
};
// 验证规则设定
Form.prototype.verify = function(settings){
var that = this;
$.extend(true, that.config.verify, settings);
return that;
};
// 表单事件监听
Form.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
};
// 初始赋值
Form.prototype.val = function(filter, object){
var that = this
,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
formElem.each(function(index, item){
var itemFrom = $(this);
layui.each(object, function(key, value){
var itemElem = itemFrom.find('[name="'+ key +'"]')
,type;
// 如果对应的表单不存在，则不执行
if(!itemElem[0]) return;
type = itemElem[0].type;
// 如果为复选框
if(type === 'checkbox'){
itemElem[0].checked = value;
} else if(type === 'radio') { // 如果为单选框
itemElem.each(function(){
if(this.value === value ){
this.checked = true
}
});
} else { // 其它类型的表单
itemElem.val(value);
}
});
});
form.render(null, filter);
};
// 表单控件渲染
Form.prototype.render = function(type, filter){
var that = this
,elemForm = $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}())
,items = {
// 下拉选择框
select: function(){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput
,selects = elemForm.find('select')
// 隐藏 select
,hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
thatInput && initValue && thatInput.val(initValue);
}
thatInput = null;
}
// 各种事件
,events = function(reElem, disabled, isSearch){
var select = $(this)
,title = reElem.find('.' + TITLE)
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
,index = this.selectedIndex // 当前选中的索引
,nearElem; // select 组件当前选中的附近元素，用于辅助快捷键功能
if(disabled) return;
// 展开下拉
var showDown = function(){
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
,dlHeight = dl.outerHeight();
index = select[0].selectedIndex; // 获取最新的 selectedIndex
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);
nearElem = null;
// 初始选中样式
dds.eq(index).addClass(THIS).siblings().removeClass(THIS);
// 上下定位识别
if(top + dlHeight > $win.height() && top >= dlHeight){
reElem.addClass(CLASS + 'up');
}
followScroll();
}
// 隐藏下拉
,hideDown = function(choose){
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
input.blur();
nearElem = null;
if(choose) return;
notOption(input.val(), function(none){
var selectedIndex = select[0].selectedIndex;
// 未查询到相关值
if(none){
initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值
// 如果是第一项，且文本值等于 placeholder，则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = '';
};
// 如果有选中值，则将输入框纠正为该值。否则清空输入框
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);
}
};
// 点击标题区域
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
showDown()
);
dl.find('.'+NONE).remove();
});
// 点击箭头获取焦点
title.find('.layui-edge').on('click', function(){
input.focus();
});
// select 中 input 键盘事件
input.on('keyup', function(e){ // 键盘松开
var keyCode = e.keyCode;
// Tab键展开
if(keyCode === 9){
showDown();
}
}).on('keydown', function(e){ // 键盘按下
var keyCode = e.keyCode;
// Tab键隐藏
if(keyCode === 9){
hideDown();
}
// 标注 dd 的选中状态
var setThisDd = function(prevNext, thisElem1){
var nearDd, cacheNearElem
e.preventDefault();
// 得到当前队列元素
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 thisDd;
// return dds.eq(index);
}();
cacheNearElem = thisElem[prevNext](); // 当前元素的附近元素
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)) && nearElem[0]){
return setThisDd(prevNext, nearElem);
}
nearDd.addClass(THIS).siblings().removeClass(THIS); // 标注样式
followScroll(); // 定位滚动条
};
if(keyCode === 38) setThisDd('prev'); // Up 键
if(keyCode === 40) setThisDd('next'); // Down 键
// Enter 键
if(keyCode === 13){
e.preventDefault();
dl.children('dd.'+THIS).trigger('click');
}
});
// 检测值是否不属于 select 项
var notOption = function(value, callback, origin){
var num = 0;
layui.each(dds, function(){
var othis = $(this)
,text = othis.text()
,not = text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
});
var none = num === dds.length;
return callback(none), none;
};
// 搜索匹配
var search = function(e){
var value = this.value, keyCode = e.keyCode;
if(keyCode === 9 || keyCode === 13
|| keyCode === 37 || keyCode === 38
|| keyCode === 39 || keyCode === 40
){
return false;
}
notOption(value, function(none){
if(none){
dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">无匹配项</p>');
} else {
dl.find('.'+NONE).remove();
}
}, 'keyup');
if(value === ''){
dl.find('.'+NONE).remove();
}
followScroll(); // 定位滚动条
};
if(isSearch){
input.on('keyup', search).on('blur', function(e){
var selectedIndex = select[0].selectedIndex;
thatInput = input; // 当前的 select 中的 input 元素
initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值
// 如果是第一项，且文本值等于 placeholder，则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = '';
};
setTimeout(function(){
notOption(input.val(), function(none){
initValue || input.val(''); // none && !initValue
}, 'blur');
}, 200);
});
}
// 选择
dds.on('click', function(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); // 获取过滤器
if(othis.hasClass(DISABLED)) return false;
if(othis.hasClass('layui-select-tips')){
input.val('');
} else {
input.val(othis.text());
othis.addClass(THIS);
}
othis.siblings().removeClass(THIS);
select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
,othis: reElem
});
hideDown(true);
return false;
});
reElem.find('dl>dt').on('click', function(e){
return false;
});
$(document).off('click', hide).on('click', hide); // 点击其它元素关闭 select
}
selects.each(function(index, select){
var othis = $(this)
,hasRender = othis.next('.'+CLASS)
,disabled = this.disabled
,value = select.value
,selected = $(select.options[select.selectedIndex]) // 获取当前选中项
,optionsFirst = select.options[0];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
var isSearch = typeof othis.attr('lay-search') === 'string'
,placeholder = optionsFirst ? (
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
) : TIPS;
// 替代元素
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'">'
,('<input type="text" placeholder="'+ placeholder +'" '
+('value="'+ (value ? selected.html() : '') +'"') // 默认值
+(isSearch ? '' : ' readonly') // 是否开启搜索
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') // 禁用状态
,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,function(options){
var arr = [];
layui.each(options, function(index, item){
if(index === 0 && !item.value){
arr.push('<dd lay-value="" class="layui-select-tips">'+ (item.innerHTML || TIPS) +'</dd>');
} else if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>');
} else {
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ item.innerHTML +'</dd>');
}
});
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
return arr.join('');
}(othis.find('*')) +'</dl>'
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem);
events.call(this, reElem, disabled, isSearch);
});
}
// 复选框/开关
,checkbox: function(){
var CLASS = {
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch']
}
,checks = elemForm.find('input[type=checkbox]')
,events = function(reElem, RE_CLASS){
var check = $(this);
// 勾选
reElem.on('click', function(){
var filter = check.attr('lay-filter') // 获取过滤器
,text = (check.attr('lay-text')||'').split('|');
if(check[0].disabled) return;
check[0].checked ? (
check[0].checked = false
,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1])
) : (
check[0].checked = true
,reElem.addClass(RE_CLASS[1]).find('em').text(text[0])
);
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0]
,value: check[0].value
,othis: reElem
});
});
}
checks.each(function(index, check){
var othis = $(this), skin = othis.attr('lay-skin')
,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled;
if(skin === 'switch') skin = '_'+skin;
var RE_CLASS = CLASS[skin] || CLASS.checkbox;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 替代元素
var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') // 选中状态
,(disabled ? ' layui-checkbox-disbaled '+ DISABLED : '') // 禁用状态
,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') // 风格
,'>'
,function(){ // 不同风格的内容
var title = check.title.replace(/\s/g, '')
,type = {
// 复选框
checkbox: [
(title ? ('<span>'+ check.title +'</span>') : '')
,'<i class="layui-icon layui-icon-ok"></i>'
].join('')
// 开关
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
};
return type[skin] || type['checkbox'];
}()
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem);
events.call(this, reElem, RE_CLASS);
});
}
// 单选框
,radio: function(){
var CLASS = 'layui-form-radio', ICON = ['', '']
,radios = elemForm.find('input[type=radio]')
,events = function(reElem){
var radio = $(this), ANIM = 'layui-anim-scaleSpring';
reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM);
var filter = radio.attr('lay-filter'); // 获取过滤器
var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); // 找到相同name的兄弟
if(radio[0].disabled) return;
layui.each(sameRadio, function(){
var next = $(this).next('.'+CLASS);
this.checked = false;
next.removeClass(CLASS+'ed');
next.find('.layui-icon').removeClass(ANIM).html(ICON[1]);
});
radio[0].checked = true;
reElem.addClass(CLASS+'ed');
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0]
,value: radio[0].value
,othis: reElem
});
});
};
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
// 替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS
,(radio.checked ? (' '+CLASS+'ed') : '') // 选中状态
,(disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">' // 禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
,'<div>'+ function(){
var title = radio.title || '';
if(typeof othis.next().attr('lay-radio') === 'string'){
title = othis.next().html();
othis.next().remove();
}
return title
}() +'</div>'
,'</div>'].join(''));
othis.after(reElem);
events.call(this, reElem);
});
}
};
type ? (
items[type] ? items[type]() : hint.error('不支持的'+ type + '表单渲染')
) : layui.each(items, function(index, item){
item();
});
return that;
};
// 表单提交校验
var submit = function(){
var button = $(this), verify = form.config.verify, stop = null
,DANGER = 'layui-form-danger', field = {} ,elem = button.parents(ELEM)
,verifyElem = elem.find('*[lay-verify]') // 获取需要校验的元素
,formElem = button.parents('form')[0] // 获取当前所在的form元素，如果存在的话
,fieldElem = elem.find('input,select,textarea') // 获取所有表单域
,filter = button.attr('lay-filter'); // 获取过滤器
// 开始校验
layui.each(verifyElem, function(_, item){
var othis = $(this)
,vers = othis.attr('lay-verify').split('|')
,verType = othis.attr('lay-verType') // 提示方式
,value = othis.val();
othis.removeClass(DANGER);
layui.each(vers, function(_, thisVer){
var isTrue // 是否命中校验
,errorText = '' // 错误提示文本
,isFn = typeof verify[thisVer] === 'function';
// 匹配验证规则
if(verify[thisVer]){
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);
errorText = errorText || verify[thisVer][1];
// 如果是必填项或者非空命中校验，则阻止提交，弹出提示
if(isTrue){
// 提示层风格
if(verType === 'tips'){
layer.tips(errorText, function(){
if(typeof othis.attr('lay-ignore') !== 'string'){
if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){
return othis.next();
}
}
return othis;
}(), {tips: 1});
} else if(verType === 'alert') {
layer.alert(errorText, {title: '提示', shadeClose: true});
} else {
layer.msg(errorText, {icon: 5, shift: 6});
}
if(!device.android && !device.ios) item.focus(); // 非移动设备自动定位焦点
othis.addClass(DANGER);
return stop = true;
}
}
});
if(stop) return stop;
});
if(stop) return false;
var nameIndex = {}; // 数组 name 索引
layui.each(fieldElem, function(_, item){
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
if(!item.name) return;
// 用于支持数组 name
if(/^.*\[\]$/.test(item.name)){
var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0;
item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
}
if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
field[item.name] = item.value;
});
// 获取字段
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
elem: this
,form: formElem
,field: field
});
};
// 自动完成渲染
var form = new Form()
,$dom = $(document), $win = $(window);
form.render();
// 表单reset重置渲染
$dom.on('reset', ELEM, function(){
var filter = $(this).attr('lay-filter');
setTimeout(function(){
form.render(null, filter);
}, 50);
});
// 表单提交事件
$dom.on('submit', ELEM, submit)
.on('click', '*[lay-submit]', submit);
exports(MOD_NAME, form);
});
laydate.js
/**
@Name : layDate 5.0.9 日期时间控件
@Author: 贤心
@Site：http:// www.layui.com/laydate/
@License：MIT
*/
;!function(){
"use strict";
var isLayui = window.layui && layui.define, ready = {
getPath: function(){
var jsPath = document.currentScript ? document.currentScript.src : function(){
var js = document.scripts
,last = js.length - 1
,src;
for(var i = last; i > 0; i--){
if(js[i].readyState === 'interactive'){
src = js[i].src;
break;
}
}
return src || js[last].src;
}();
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}()
// 获取节点的style属性值
,getStyle: function(node, name){
var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
}
// 载入CSS配件
,link: function(href, fn, cssname){
// 未设置路径，则不主动加载css
if(!laydate.path) return;
var head = document.getElementsByTagName("head")[0], link = document.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\// g, '');
var id = 'layuicss-'+ app, timeout = 0;
link.rel = 'stylesheet';
link.href = laydate.path + href;
link.id = id;
if(!document.getElementById(id)){
head.appendChild(link);
}
if(typeof fn !== 'function') return;
// 轮询css是否加载完毕
(function poll() {
if(++timeout > 8 * 1000 / 100){
return window.console && console.error('laydate.css: Invalid');
};
parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);
}());
}
}
,laydate = {
v: '5.0.9'
,config: {} // 全局配置项
,index: (window.laydate && window.laydate.v) ? 100000 : 0
,path: ready.getPath
// 设置全局项
,set: function(options){
var that = this;
that.config = lay.extend({}, that.config, options);
return that;
}
// 主体CSS等待事件
,ready: function(fn){
var cssname = 'laydate', ver = ''
,path = (isLayui ? 'modules/laydate/' : 'theme/') + 'default/laydate.css?v='+ laydate.v + ver;
isLayui ? layui.addcss(path, fn, cssname) : ready.link(path, fn, cssname);
return this;
}
}
// 操作当前实例
,thisDate = function(){
var that = this;
return {
// 提示框
hint: function(content){
that.hint.call(that, content);
}
,config: that.config
};
}
// 字符常量
,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', TIPS_OUT = '开始日期超出了结束日期<br>建议重新选择', LIMIT_YEAR = [100, 200000]
,ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = '.laydate-btns-time'
// 组件构造器
,Class = function(options){
var that = this;
that.index = ++laydate.index;
that.config = lay.extend({}, that.config, laydate.config, options);
laydate.ready(function(){
that.init();
});
}
// DOM查找
,lay = function(selector){
return new LAY(selector);
}
// DOM构造器
,LAY = function(selector){
var index = 0
,nativeDOM = typeof selector === 'object' ? [selector] : (
this.selector = selector
,document.querySelectorAll(selector || null)
);
for(; index < nativeDOM.length; index++){
this.push(nativeDOM[index]);
}
};
/*
lay对象操作
*/
LAY.prototype = [];
LAY.prototype.constructor = LAY;
// 普通对象深度扩展
lay.extend = function(){
var ai = 1, args = arguments
,clone = function(target, obj){
target = target || (obj.constructor === Array ? [] : {});
for(var i in obj){
// 如果值为对象，则进入递归，继续深度合并
target[i] = (obj[i] && (obj[i].constructor === Object))
? clone(target[i], obj[i])
: obj[i];
}
return target;
}
args[0] = typeof args[0] === 'object' ? args[0] : {};
for(; ai < args.length; ai++){
if(typeof args[ai] === 'object'){
clone(args[0], args[ai])
}
}
return args[0];
};
// ie版本
lay.ie = function(){
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于ie11并没有msie的标识
) : false;
}();
// 中止冒泡
lay.stope = function(e){
e = e || window.event;
e.stopPropagation
? e.stopPropagation()
: e.cancelBubble = true;
};
// 对象遍历
lay.each = function(obj, fn){
var key
,that = this;
if(typeof fn !== 'function') return that;
obj = obj || [];
if(obj.constructor === Object){
for(key in obj){
if(fn.call(obj[key], key, obj[key])) break;
}
} else {
for(key = 0; key < obj.length; key++){
if(fn.call(obj[key], key, obj[key])) break;
}
}
return that;
};
// 数字前置补零
lay.digit = function(num, length, end){
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
};
// 创建元素
lay.elem = function(elemName, attr){
var elem = document.createElement(elemName);
lay.each(attr || {}, function(key, value){
elem.setAttribute(key, value);
});
return elem;
};
// 追加字符
LAY.addStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
if(!new RegExp('\\b'+ item + '\\b').test(str)){
str = str + ' ' + item;
}
});
return str.replace(/^\s|\s$/, '');
};
// 移除值
LAY.removeStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
var exp = new RegExp('\\b'+ item + '\\b')
if(exp.test(str)){
str = str.replace(exp, '');
}
});
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
};
// 查找子元素
LAY.prototype.find = function(selector){
var that = this;
var index = 0, arr = []
,isObject = typeof selector === 'object';
this.each(function(i, item){
var nativeDOM = isObject ? [selector] : item.querySelectorAll(selector || null);
for(; index < nativeDOM.length; index++){
arr.push(nativeDOM[index]);
}
that.shift();
});
if(!isObject){
that.selector = (that.selector ? that.selector + ' ' : '') + selector
}
lay.each(arr, function(i, item){
that.push(item);
});
return that;
};
// DOM遍历
LAY.prototype.each = function(fn){
return lay.each.call(this, this, fn);
};
// 添加css类
LAY.prototype.addClass = function(className, type){
return this.each(function(index, item){
item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)
});
};
// 移除css类
LAY.prototype.removeClass = function(className){
return this.addClass(className, true);
};
// 是否包含css类
LAY.prototype.hasClass = function(className){
var has = false;
this.each(function(index, item){
if(new RegExp('\\b'+ className +'\\b').test(item.className)){
has = true;
}
});
return has;
};
// 添加或获取属性
LAY.prototype.attr = function(key, value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].getAttribute(key);
}() : that.each(function(index, item){
item.setAttribute(key, value);
});
};
// 移除属性
LAY.prototype.removeAttr = function(key){
return this.each(function(index, item){
item.removeAttribute(key);
});
};
// 设置HTML内容
LAY.prototype.html = function(html){
return this.each(function(index, item){
item.innerHTML = html;
});
};
// 设置值
LAY.prototype.val = function(value){
return this.each(function(index, item){
item.value = value;
});
};
// 追加内容
LAY.prototype.append = function(elem){
return this.each(function(index, item){
typeof elem === 'object'
? item.appendChild(elem)
: item.innerHTML = item.innerHTML + elem;
});
};
// 移除内容
LAY.prototype.remove = function(elem){
return this.each(function(index, item){
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
});
};
// 事件绑定
LAY.prototype.on = function(eventName, fn){
return this.each(function(index, item){
item.attachEvent ? item.attachEvent('on' + eventName, function(e){
e.target = e.srcElement;
fn.call(item, e);
}) : item.addEventListener(eventName, fn, false);
});
};
// 解除事件
LAY.prototype.off = function(eventName, fn){
return this.each(function(index, item){
item.detachEvent
? item.detachEvent('on'+ eventName, fn)
: item.removeEventListener(eventName, fn, false);
});
};
/*
组件操作
*/
// 是否闰年
Class.isLeapYear = function(year){
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
};
// 默认配置
Class.prototype.config = {
type: 'date' // 控件类型，支持：year/month/date/time/datetime
,range: false // 是否开启范围选择，即双控件
,format: 'yyyy-MM-dd' // 默认日期格式
,value: null // 默认日期，支持传入new Date()，或者符合format参数设定的日期格式字符
,isInitValue: true // 用于控制是否自动向元素填充初始值（需配合 value 参数使用）
,min: '1900-1-1' // 有效最小日期，年月日必须用“-”分割，时分秒必须用“:”分割。注意：它并不是遵循 format 设定的格式。
,max: '2099-12-31' // 有效最大日期，同上
,trigger: 'focus' // 呼出控件的事件
,show: false // 是否直接显示，如果设置true，则默认直接显示控件
,showBottom: true // 是否显示底部栏
,btns: ['clear', 'now', 'confirm'] // 右下角显示的按钮，会按照数组顺序排列
,lang: 'cn' // 语言，只支持cn/en，即中文和英文
,theme: 'default' // 主题
,position: null // 控件定位方式定位, 默认absolute，支持：fixed/absolute/static
,calendar: false // 是否开启公历重要节日，仅支持中文版
,mark: {} // 日期备注，如重要事件或活动标记
,zIndex: null // 控件层叠顺序
,done: null // 控件选择完毕后的回调，点击清空/现在/确定也均会触发
,change: null // 日期时间改变后的回调
};
// 多语言
Class.prototype.lang = function(){
var that = this
,options = that.config
,text = {
cn: {
weeks: ['日', '一', '二', '三', '四', '五', '六']
,time: ['时', '分', '秒']
,timeTips: '选择时间'
,startTime: '开始时间'
,endTime: '结束时间'
,dateTips: '返回日期'
,month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
,tools: {
confirm: '确定'
,clear: '清空'
,now: '现在'
}
}
,en: {
weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
,time: ['Hours', 'Minutes', 'Seconds']
,timeTips: 'Select Time'
,startTime: 'Start Time'
,endTime: 'End Time'
,dateTips: 'Select Date'
,month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
,tools: {
confirm: 'Confirm'
,clear: 'Clear'
,now: 'Now'
}
}
};
return text[options.lang] || text['cn'];
};
// 初始准备
Class.prototype.init = function(){
var that = this
,options = that.config
,dateType = 'yyyy|y|MM|M|dd|d|HH|H|mm|m|ss|s'
,isStatic = options.position === 'static'
,format = {
year: 'yyyy'
,month: 'yyyy-MM'
,date: 'yyyy-MM-dd'
,time: 'HH:mm:ss'
,datetime: 'yyyy-MM-dd HH:mm:ss'
};
options.elem = lay(options.elem);
options.eventElem = lay(options.eventElem);
if(!options.elem[0]) return;
// 日期范围分隔符
if(options.range === true) options.range = '-';
// 根据不同type，初始化默认format
if(options.format === format.date){
options.format = format[options.type];
}
// 将日期格式转化成数组
that.format = options.format.match(new RegExp(dateType + '|.', 'g')) || [];
// 生成正则表达式
that.EXP_IF = '';
that.EXP_SPLIT = '';
lay.each(that.format, function(i, item){
var EXP = new RegExp(dateType).test(item)
? '\\d{'+ function(){
if(new RegExp(dateType).test(that.format[i === 0 ? i + 1 : i - 1]||'')){
if(/^yyyy|y$/.test(item)) return 4;
return item.length;
}
if(/^yyyy$/.test(item)) return '1,4';
if(/^y$/.test(item)) return '1,308';
return '1,2';
}() +'}'
: '\\' + item;
that.EXP_IF = that.EXP_IF + EXP;
that.EXP_SPLIT = that.EXP_SPLIT + '(' + EXP + ')';
});
that.EXP_IF = new RegExp('^'+ (
options.range ?
that.EXP_IF + '\\s\\'+ options.range + '\\s' + that.EXP_IF
: that.EXP_IF
) +'$');
that.EXP_SPLIT = new RegExp('^'+ that.EXP_SPLIT +'$', '');
// 如果不是input|textarea元素，则默认采用click事件
if(!that.isInput(options.elem[0])){
if(options.trigger === 'focus'){
options.trigger = 'click';
}
}
// 设置唯一KEY
if(!options.elem.attr('lay-key')){
options.elem.attr('lay-key', that.index);
options.eventElem.attr('lay-key', that.index);
}
// 记录重要日期
options.mark = lay.extend({}, (options.calendar && options.lang === 'cn') ? {
'0-1-1': '元旦'
,'0-2-14': '情人'
,'0-3-8': '妇女'
,'0-3-12': '植树'
,'0-4-1': '愚人'
,'0-5-1': '劳动'
,'0-5-4': '青年'
,'0-6-1': '儿童'
,'0-9-10': '教师'
,'0-9-18': '国耻'
,'0-10-1': '国庆'
,'0-12-25': '圣诞'
} : {}, options.mark);
// 获取限制内日期
lay.each(['min', 'max'], function(i, item){
var ymd = [], hms = [];
if(typeof options[item] === 'number'){ // 如果为数字
var day = options[item]
,time = new Date().getTime()
,STAMP = 86400000 // 代表一天的时间戳
,thisDate = new Date(
day ? (
day < STAMP ? time + day*STAMP : day // 如果数字小于一天的时间戳，则数字为天数，否则为时间戳
) : time
);
ymd = [thisDate.getFullYear(), thisDate.getMonth() + 1, thisDate.getDate()];
day < STAMP || (hms = [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds()]);
} else {
ymd = (options[item].match(/\d+-\d+-\d+/) || [''])[0].split('-');
hms = (options[item].match(/\d+:\d+:\d+/) || [''])[0].split(':');
}
options[item] = {
year: ymd[0] | 0 || new Date().getFullYear()
,month: ymd[1] ? (ymd[1] | 0) - 1 : new Date().getMonth()
,date: ymd[2] | 0 || new Date().getDate()
,hours: hms[0] | 0
,minutes: hms[1] | 0
,seconds: hms[2] | 0
};
});
that.elemID = 'layui-laydate'+ options.elem.attr('lay-key');
if(options.show || isStatic) that.render();
isStatic || that.events();
// 默认赋值
if(options.value && options.isInitValue){
if(options.value.constructor === Date){
that.setValue(that.parse(0, that.systemDate(options.value)));
} else {
that.setValue(options.value);
}
}
};
// 控件主体渲染
Class.prototype.render = function(){
var that = this
,options = that.config
,lang = that.lang()
,isStatic = options.position === 'static'
// 主面板
,elem = that.elem = lay.elem('div', {
id: that.elemID
,'class': [
'layui-laydate'
,options.range ? ' layui-laydate-range' : ''
,isStatic ? (' '+ ELEM_STATIC) : ''
,options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : ''
].join('')
})
// 主区域
,elemMain = that.elemMain = []
,elemHeader = that.elemHeader = []
,elemCont = that.elemCont = []
,elemTable = that.table = []
// 底部区域
,divFooter = that.footer = lay.elem('div', {
'class': ELEM_FOOTER
});
if(options.zIndex) elem.style.zIndex = options.zIndex;
// 单双日历区域
lay.each(new Array(2), function(i){
if(!options.range && i > 0){
return true;
}
// 头部区域
var divHeader = lay.elem('div', {
'class': 'layui-laydate-header'
})
// 左右切换
,headerChild = [function(){ // 上一年
var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-prev-y'
});
elem.innerHTML = '';
return elem;
}(), function(){ // 上一月
var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-prev-m'
});
elem.innerHTML = '';
return elem;
}(), function(){ // 年月选择
var elem = lay.elem('div', {
'class': 'laydate-set-ym'
}), spanY = lay.elem('span'), spanM = lay.elem('span');
elem.appendChild(spanY);
elem.appendChild(spanM);
return elem;
}(), function(){ // 下一月
var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-next-m'
});
elem.innerHTML = '';
return elem;
}(), function(){ // 下一年
var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-next-y'
});
elem.innerHTML = '';
return elem;
}()]
// 日历内容区域
,divContent = lay.elem('div', {
'class': 'layui-laydate-content'
})
,table = lay.elem('table')
,thead = lay.elem('thead'), theadTr = lay.elem('tr');
// 生成年月选择
lay.each(headerChild, function(i, item){
divHeader.appendChild(item);
});
// 生成表格
thead.appendChild(theadTr);
lay.each(new Array(6), function(i){ // 表体
var tr = table.insertRow(0);
lay.each(new Array(7), function(j){
if(i === 0){
var th = lay.elem('th');
th.innerHTML = lang.weeks[j];
theadTr.appendChild(th);
}
tr.insertCell(j);
});
});
table.insertBefore(thead, table.children[0]); // 表头
divContent.appendChild(table);
elemMain[i] = lay.elem('div', {
'class': 'layui-laydate-main laydate-main-list-'+ i
});
elemMain[i].appendChild(divHeader);
elemMain[i].appendChild(divContent);
elemHeader.push(headerChild);
elemCont.push(divContent);
elemTable.push(table);
});
// 生成底部栏
lay(divFooter).html(function(){
var html = [], btns = [];
if(options.type === 'datetime'){
html.push('<span lay-type="datetime" class="laydate-btns-time">'+ lang.timeTips +'</span>');
}
lay.each(options.btns, function(i, item){
var title = lang.tools[item] || 'btn';
if(options.range && item === 'now') return;
if(isStatic && item === 'clear') title = options.lang === 'cn' ? '重置' : 'Reset';
btns.push('<span lay-type="'+ item +'" class="laydate-btns-'+ item +'">'+ title +'</span>');
});
html.push('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');
return html.join('');
}());
// 插入到主区域
lay.each(elemMain, function(i, main){
elem.appendChild(main);
});
options.showBottom && elem.appendChild(divFooter);
// 生成自定义主题
if(/^#/.test(options.theme)){
var style = lay.elem('style')
,styleText = [
'#{{id}} .layui-laydate-header{background-color:{{theme}};}'
,'#{{id}} .layui-this{background-color:{{theme}} !important;}'
].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, options.theme);
if('styleSheet' in style){
style.setAttribute('type', 'text/css');
style.styleSheet.cssText = styleText;
} else {
style.innerHTML = styleText;
}
lay(elem).addClass('laydate-theme-molv');
elem.appendChild(style);
}
// 移除上一个控件
that.remove(Class.thisElemDate);
// 如果是静态定位，则插入到指定的容器中，否则，插入到body
isStatic ? options.elem.append(elem) : (
document.body.appendChild(elem)
,that.position() // 定位
);
that.checkDate().calendar(); // 初始校验
that.changeEvent(); // 日期切换
Class.thisElemDate = that.elemID;
typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, {
month: options.dateTime.month + 1
}));
};
// 控件移除
Class.prototype.remove = function(prev){
var that = this
,options = that.config
,elem = lay('#'+ (prev || that.elemID));
if(!elem.hasClass(ELEM_STATIC)){
that.checkDate(function(){
elem.remove();
});
}
return that;
};
// 定位算法
Class.prototype.position = function(){
var that = this
,options = that.config
,elem = that.bindElem || options.elem[0]
,rect = elem.getBoundingClientRect() // 绑定元素的坐标
,elemWidth = that.elem.offsetWidth // 控件的宽度
,elemHeight = that.elem.offsetHeight // 控件的高度
// 滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
// 如果右侧超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin;
}
// 如果底部超出边界
if(top + elemHeight + margin > winArea()){
top = rect.top > elemHeight // 顶部是否有足够区域显示完全
? rect.top - elemHeight
: winArea() - elemHeight;
top = top - margin*2;
}
if(options.position){
that.elem.style.position = options.position;
}
that.elem.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
that.elem.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
};
// 提示
Class.prototype.hint = function(content){
var that = this
,options = that.config
,div = lay.elem('div', {
'class': ELEM_HINT
});
if(!that.elem) return;
div.innerHTML = content || '';
lay(that.elem).find('.'+ ELEM_HINT).remove();
that.elem.appendChild(div);
clearTimeout(that.hinTimer);
that.hinTimer = setTimeout(function(){
lay(that.elem).find('.'+ ELEM_HINT).remove();
}, 3000);
};
// 获取递增/减后的年月
Class.prototype.getAsYM = function(Y, M, type){
type ? M-- : M++;
if(M < 0){
M = 11;
Y--;
}
if(M > 11){
M = 0;
Y++;
}
return [Y, M];
};
// 系统消息
Class.prototype.systemDate = function(newDate){
var thisDate = newDate || new Date();
return {
year: thisDate.getFullYear() // 年
,month: thisDate.getMonth() // 月
,date: thisDate.getDate() // 日
,hours: newDate ? newDate.getHours() : 0 // 时
,minutes: newDate ? newDate.getMinutes() : 0 // 分
,seconds: newDate ? newDate.getSeconds() : 0 // 秒
}
};
// 日期校验
Class.prototype.checkDate = function(fn){
var that = this
,thisDate = new Date()
,options = that.config
,dateTime = options.dateTime = options.dateTime || that.systemDate()
,thisMaxDate, error
,elem = that.bindElem || options.elem[0]
,valType = that.isInput(elem) ? 'val' : 'html'
,value = that.isInput(elem) ? elem.value : (options.position === 'static' ? '' : elem.innerHTML)
// 校验日期有效数字
,checkValid = function(dateTime){
if(dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], error = true; // 不能超过20万年
if(dateTime.month > 11) dateTime.month = 11, error = true;
if(dateTime.hours > 23) dateTime.hours = 0, error = true;
if(dateTime.minutes > 59) dateTime.minutes = 0, dateTime.hours++, error = true;
if(dateTime.seconds > 59) dateTime.seconds = 0, dateTime.minutes++, error = true;
// 计算当前月的最后一天
thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year);
if(dateTime.date > thisMaxDate) dateTime.date = thisMaxDate, error = true;
}
// 获得初始化日期值
,initDate = function(dateTime, value, index){
var startEnd = ['startTime', 'endTime'];
value = (value.match(that.EXP_SPLIT) || []).slice(1);
index = index || 0;
if(options.range){
that[startEnd[index]] = that[startEnd[index]] || {};
}
lay.each(that.format, function(i, item){
var thisv = parseFloat(value[i]);
if(value[i].length < item.length) error = true;
if(/yyyy|y/.test(item)){ // 年
if(thisv < LIMIT_YEAR[0]) thisv = LIMIT_YEAR[0], error = true; // 年不能低于100年
dateTime.year = thisv;
} else if(/MM|M/.test(item)){ // 月
if(thisv < 1) thisv = 1, error = true;
dateTime.month = thisv - 1;
} else if(/dd|d/.test(item)){ // 日
if(thisv < 1) thisv = 1, error = true;
dateTime.date = thisv;
} else if(/HH|H/.test(item)){ // 时
if(thisv < 1) thisv = 0, error = true;
dateTime.hours = thisv;
options.range && (that[startEnd[index]].hours = thisv);
} else if(/mm|m/.test(item)){ // 分
if(thisv < 1) thisv = 0, error = true;
dateTime.minutes = thisv;
options.range && (that[startEnd[index]].minutes = thisv);
} else if(/ss|s/.test(item)){ // 秒
if(thisv < 1) thisv = 0, error = true;
dateTime.seconds = thisv;
options.range && (that[startEnd[index]].seconds = thisv);
}
});
checkValid(dateTime)
};
if(fn === 'limit') return checkValid(dateTime), that;
value = value || options.value;
if(typeof value === 'string'){
value = value.replace(/\s+/g, ' ').replace(/^\s|\s$/g, '');
}
// 如果点击了开始，单未选择结束就关闭，则重新选择开始
if(that.startState && !that.endState){
delete that.startState;
that.endState = true;
};
if(typeof value === 'string' && value){
if(that.EXP_IF.test(value)){ // 校验日期格式
if(options.range){
value = value.split(' '+ options.range +' ');
that.startDate = that.startDate || that.systemDate();
that.endDate = that.endDate || that.systemDate();
options.dateTime = lay.extend({}, that.startDate);
lay.each([that.startDate, that.endDate], function(i, item){
initDate(item, value[i], i);
});
} else {
initDate(dateTime, value)
}
} else {
that.hint('日期格式不合法<br>必须遵循下述格式：<br>'+ (
options.range ? (options.format + ' '+ options.range +' ' + options.format) : options.format
) + '<br>已为你重置');
error = true;
}
} else if(value && value.constructor === Date){ // 如果值为日期对象时
options.dateTime = that.systemDate(value);
} else {
options.dateTime = that.systemDate();
delete that.startState;
delete that.endState;
delete that.startDate;
delete that.endDate;
delete that.startTime;
delete that.endTime;
}
checkValid(dateTime);
if(error && value){
that.setValue(
options.range ? (that.endDate ? that.parse() : '') : that.parse()
);
}
fn && fn();
return that;
};
// 公历重要日期与自定义备注
Class.prototype.mark = function(td, YMD){
var that = this
,mark, options = that.config;
lay.each(options.mark, function(key, title){
var keys = key.split('-');
if((keys[0] == YMD[0] || keys[0] == 0) // 每年的每月
&& (keys[1] == YMD[1] || keys[1] == 0) // 每月的每日
&& keys[2] == YMD[2]){ // 特定日
mark = title || YMD[2];
}
});
mark && td.html('<span class="laydate-day-mark">'+ mark +'</span>');
return that;
};
// 无效日期范围的标记
Class.prototype.limit = function(elem, date, index, time){
var that = this
,options = that.config, timestrap = {}
,dateTime = options[index > 41 ? 'endDate' : 'dateTime']
,isOut, thisDateTime = lay.extend({}, dateTime, date || {});
lay.each({
now: thisDateTime
,min: options.min
,max: options.max
}, function(key, item){
timestrap[key] = that.newDate(lay.extend({
year: item.year
,month: item.month
,date: item.date
}, function(){
var hms = {};
lay.each(time, function(i, keys){
hms[keys] = item[keys];
});
return hms;
}())).getTime(); // time：是否比较时分秒
});
isOut = timestrap.now < timestrap.min || timestrap.now > timestrap.max;
elem && elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
return isOut;
};
// 日历表
Class.prototype.calendar = function(value){
var that = this
,options = that.config
,dateTime = value || options.dateTime
,thisDate = new Date(), startWeek, prevMaxDate, thisMaxDate
,lang = that.lang()
,isAlone = options.type !== 'date' && options.type !== 'datetime'
,index = value ? 1 : 0
,tds = lay(that.table[index]).find('td')
,elemYM = lay(that.elemHeader[index][2]).find('span');
if(dateTime.year < LIMIT_YEAR[0]) dateTime.year = LIMIT_YEAR[0], that.hint('最低只能支持到公元'+ LIMIT_YEAR[0] +'年');
if(dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], that.hint('最高只能支持到公元'+ LIMIT_YEAR[1] +'年');
// 记录初始值
if(!that.firstDate){
that.firstDate = lay.extend({}, dateTime);
}
// 计算当前月第一天的星期
thisDate.setFullYear(dateTime.year, dateTime.month, 1);
startWeek = thisDate.getDay();
prevMaxDate = laydate.getEndDate(dateTime.month || 12, dateTime.year); // 计算上个月的最后一天
thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year); // 计算当前月的最后一天
// 赋值日
lay.each(tds, function(index, item){
var YMD = [dateTime.year, dateTime.month], st = 0;
item = lay(item);
item.removeAttr('class');
if(index < startWeek){
st = prevMaxDate - startWeek + index;
item.addClass('laydate-day-prev');
YMD = that.getAsYM(dateTime.year, dateTime.month, 'sub');
} else if(index >= startWeek && index < thisMaxDate + startWeek){
st = index - startWeek;
if(!options.range){
st + 1 === dateTime.date && item.addClass(THIS);
}
} else {
st = index - thisMaxDate - startWeek;
item.addClass('laydate-day-next');
YMD = that.getAsYM(dateTime.year, dateTime.month);
}
YMD[1]++;
YMD[2] = st + 1;
item.attr('lay-ymd', YMD.join('-')).html(YMD[2]);
that.mark(item, YMD).limit(item, {
year: YMD[0]
,month: YMD[1] - 1
,date: YMD[2]
}, index);
});
// 同步头部年月
lay(elemYM[0]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));
lay(elemYM[1]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));
if(options.lang === 'cn'){
lay(elemYM[0]).attr('lay-type', 'year').html(dateTime.year + '年')
lay(elemYM[1]).attr('lay-type', 'month').html((dateTime.month + 1) + '月');
} else {
lay(elemYM[0]).attr('lay-type', 'month').html(lang.month[dateTime.month]);
lay(elemYM[1]).attr('lay-type', 'year').html(dateTime.year);
}
// 初始默认选择器
if(isAlone){
if(options.range){
value ? that.endDate = (that.endDate || {
year: dateTime.year + (options.type === 'year' ? 1 : 0)
,month: dateTime.month + (options.type === 'month' ? 0 : -1)
}) : (that.startDate = that.startDate || {
year: dateTime.year
,month: dateTime.month
});
if(value){
that.listYM = [
[that.startDate.year, that.startDate.month + 1]
,[that.endDate.year, that.endDate.month + 1]
];
that.list(options.type, 0).list(options.type, 1);
// 同步按钮可点状态
options.type === 'time' ? that.setBtnStatus('时间'
,lay.extend({}, that.systemDate(), that.startTime)
,lay.extend({}, that.systemDate(), that.endTime)
) : that.setBtnStatus(true);
}
}
if(!options.range){
that.listYM = [[dateTime.year, dateTime.month + 1]];
that.list(options.type, 0);
}
}
// 赋值双日历
if(options.range && !value){
var EYM = that.getAsYM(dateTime.year, dateTime.month)
that.calendar(lay.extend({}, dateTime, {
year: EYM[0]
,month: EYM[1]
}));
}
// 通过检测当前有效日期，来设定确定按钮是否可点
if(!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0, ['hours', 'minutes', 'seconds']);
// 标记选择范围
if(options.range && value && !isAlone) that.stampRange();
return that;
};
// 生成年月时分秒列表
Class.prototype.list = function(type, index){
var that = this
,options = that.config
,dateTime = options.dateTime
,lang = that.lang()
,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' // 独立范围选择器
,ul = lay.elem('ul', {
'class': ELEM_LIST + ' ' + ({
year: 'laydate-year-list'
,month: 'laydate-month-list'
,time: 'laydate-time-list'
})[type]
})
,elemHeader = that.elemHeader[index]
,elemYM = lay(elemHeader[2]).find('span')
,elemCont = that.elemCont[index || 0]
,haveList = lay(elemCont).find('.'+ ELEM_LIST)[0]
,isCN = options.lang === 'cn'
,text = isCN ? '年' : ''
,listYM = that.listYM[index] || {}
,hms = ['hours', 'minutes', 'seconds']
,startEnd = ['startTime', 'endTime'][index];
if(listYM[0] < 1) listYM[0] = 1;
if(type === 'year'){ // 年列表
var yearNum, startY = yearNum = listYM[0] - 7;
if(startY < 1) startY = yearNum = 1;
lay.each(new Array(15), function(i){
var li = lay.elem('li', {
'lay-ym': yearNum
}), ymd = {year: yearNum};
yearNum == listYM[0] && lay(li).addClass(THIS);
li.innerHTML = yearNum + text;
ul.appendChild(li);
if(yearNum < that.firstDate.year){
ymd.month = options.min.month;
ymd.date = options.min.date;
} else if(yearNum >= that.firstDate.year){
ymd.month = options.max.month;
ymd.date = options.max.date;
}
that.limit(lay(li), ymd, index);
yearNum++;
});
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', (yearNum - 8) + '-' + listYM[1])
.html((startY + text) + ' - ' + (yearNum - 1 + text));
} else if(type === 'month'){ // 月列表
lay.each(new Array(12), function(i){
var li = lay.elem('li', {
'lay-ym': i
}), ymd = {year: listYM[0], month: i};
i + 1 == listYM[1] && lay(li).addClass(THIS);
li.innerHTML = lang.month[i] + (isCN ? '月' : '');
ul.appendChild(li);
if(listYM[0] < that.firstDate.year){
ymd.date = options.min.date;
} else if(listYM[0] >= that.firstDate.year){
ymd.date = options.max.date;
}
that.limit(lay(li), ymd, index);
});
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
.html(listYM[0] + text);
} else if(type === 'time'){ // 时间列表
// 检测时分秒状态是否在有效日期时间范围内
var setTimeStatus = function(){
lay(ul).find('ol').each(function(i, ol){
lay(ol).find('li').each(function(ii, li){
that.limit(lay(li), [{
hours: ii
}, {
hours: that[startEnd].hours
,minutes: ii
}, {
hours: that[startEnd].hours
,minutes: that[startEnd].minutes
,seconds: ii
}][i], index, [['hours'], ['hours', 'minutes'], ['hours', 'minutes', 'seconds']][i]);
});
});
if(!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), that[startEnd], 0, ['hours', 'minutes', 'seconds']);
};
if(options.range){
if(!that[startEnd]) that[startEnd] = {
hours: 0
,minutes: 0
,seconds: 0
};
} else {
that[startEnd] = dateTime;
}
lay.each([24, 60, 60], function(i, item){
var li = lay.elem('li'), childUL = ['<p>'+ lang.time[i] +'</p><ol>'];
lay.each(new Array(item), function(ii){
childUL.push('<li'+ (that[startEnd][hms[i]] === ii ? ' class="'+ THIS +'"' : '') +'>'+ lay.digit(ii, 2) +'</li>');
});
li.innerHTML = childUL.join('') + '</ol>';
ul.appendChild(li);
});
setTimeStatus();
}
// 插入容器
if(haveList) elemCont.removeChild(haveList);
elemCont.appendChild(ul);
// 年月
if(type === 'year' || type === 'month'){
// 显示切换箭头
lay(that.elemMain[index]).addClass('laydate-ym-show');
// 选中
lay(ul).find('li').on('click', function(){
var ym = lay(this).attr('lay-ym') | 0;
if(lay(this).hasClass(DISABLED)) return;
if(index === 0){
dateTime[type] = ym;
if(isAlone) that.startDate[type] = ym;
that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0);
} else { // 范围选择
if(isAlone){ // 非date/datetime类型
that.endDate[type] = ym;
} else { // date/datetime类型
var YM = type === 'year'
? that.getAsYM(ym, listYM[1] - 1, 'sub')
: that.getAsYM(listYM[0], ym, 'sub');
lay.extend(dateTime, {
year: YM[0]
,month: YM[1]
});
}
}
if(options.type === 'year' || options.type === 'month'){
lay(ul).find('.'+ THIS).removeClass(THIS);
lay(this).addClass(THIS);
// 如果为年月选择器，点击了年列表，则切换到月选择器
if(options.type === 'month' && type === 'year'){
that.listYM[index][0] = ym;
isAlone && (that[['startDate', 'endDate'][index]].year = ym);
that.list('month', index);
}
} else {
that.checkDate('limit').calendar();
that.closeList();
}
that.setBtnStatus(); // 同步按钮可点状态
options.range || that.done(null, 'change');
lay(that.footer).find(ELEM_TIME_BTN).removeClass(DISABLED);
});
} else {
var span = lay.elem('span', {
'class': ELEM_TIME_TEXT
}), scroll = function(){ // 滚动条定位
lay(ul).find('ol').each(function(i){
var ol = this
,li = lay(ol).find('li')
ol.scrollTop = 30*(that[startEnd][hms[i]] - 2);
if(ol.scrollTop <= 0){
li.each(function(ii, item){
if(!lay(this).hasClass(DISABLED)){
ol.scrollTop = 30*(ii - 2);
return true;
}
});
}
});
}, haveSpan = lay(elemHeader[2]).find('.'+ ELEM_TIME_TEXT);
scroll()
span.innerHTML = options.range ? [lang.startTime,lang.endTime][index] : lang.timeTips
lay(that.elemMain[index]).addClass('laydate-time-show');
if(haveSpan[0]) haveSpan.remove();
elemHeader[2].appendChild(span);
lay(ul).find('ol').each(function(i){
var ol = this;
// 选择时分秒
lay(ol).find('li').on('click', function(){
var value = this.innerHTML | 0;
if(lay(this).hasClass(DISABLED)) return;
if(options.range){
that[startEnd][hms[i]] = value;
} else {
dateTime[hms[i]] = value;
}
lay(ol).find('.'+ THIS).removeClass(THIS);
lay(this).addClass(THIS);
setTimeStatus();
scroll();
(that.endDate || options.type === 'time') && that.done(null, 'change');
// 同步按钮可点状态
that.setBtnStatus();
});
});
}
return that;
};
// 记录列表切换后的年月
Class.prototype.listYM = [];
// 关闭列表
Class.prototype.closeList = function(){
var that = this
,options = that.config;
lay.each(that.elemCont, function(index, item){
lay(this).find('.'+ ELEM_LIST).remove();
lay(that.elemMain[index]).removeClass('laydate-ym-show laydate-time-show');
});
lay(that.elem).find('.'+ ELEM_TIME_TEXT).remove();
};
// 检测结束日期是否超出开始日期
Class.prototype.setBtnStatus = function(tips, start, end){
var that = this
,options = that.config
,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM)
,isAlone = options.range && options.type !== 'date' && options.type !== 'time';
if(isAlone){
start = start || that.startDate;
end = end || that.endDate;
isOut = that.newDate(start).getTime() > that.newDate(end).getTime();
// 如果不在有效日期内，直接禁用按钮，否则比较开始和结束日期
(that.limit(null, start) || that.limit(null, end))
? elemBtn.addClass(DISABLED)
: elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);
// 是否异常提示
if(tips && isOut) that.hint(
typeof tips === 'string' ? TIPS_OUT.replace(/日期/g, tips) : TIPS_OUT
);
}
};
// 转义为规定格式的日期字符
Class.prototype.parse = function(state, date){
var that = this
,options = that.config
,dateTime = date || (state
? lay.extend({}, that.endDate, that.endTime)
: (options.range ? lay.extend({}, that.startDate, that.startTime) : options.dateTime))
,format = that.format.concat();
// 转义为规定格式
lay.each(format, function(i, item){
if(/yyyy|y/.test(item)){ // 年
format[i] = lay.digit(dateTime.year, item.length);
} else if(/MM|M/.test(item)){ // 月
format[i] = lay.digit(dateTime.month + 1, item.length);
} else if(/dd|d/.test(item)){ // 日
format[i] = lay.digit(dateTime.date, item.length);
} else if(/HH|H/.test(item)){ // 时
format[i] = lay.digit(dateTime.hours, item.length);
} else if(/mm|m/.test(item)){ // 分
format[i] = lay.digit(dateTime.minutes, item.length);
} else if(/ss|s/.test(item)){ // 秒
format[i] = lay.digit(dateTime.seconds, item.length);
}
});
// 返回日期范围字符
if(options.range && !state){
return format.join('') + ' '+ options.range +' ' + that.parse(1);
}
return format.join('');
};
// 创建指定日期时间对象
Class.prototype.newDate = function(dateTime){
dateTime = dateTime || {};
return new Date(
dateTime.year || 1
,dateTime.month || 0
,dateTime.date || 1
,dateTime.hours || 0
,dateTime.minutes || 0
,dateTime.seconds || 0
);
};
// 赋值
Class.prototype.setValue = function(value){
var that = this
,options = that.config
,elem = that.bindElem || options.elem[0]
,valType = that.isInput(elem) ? 'val' : 'html'
options.position === 'static' || lay(elem)[valType](value || '');
return this;
};
// 标记范围内的日期
Class.prototype.stampRange = function(){
var that = this
,options = that.config
,startTime, endTime
,tds = lay(that.elem).find('td');
if(options.range && !that.endDate) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED);
if(!that.endDate) return;
startTime = that.newDate({
year: that.startDate.year
,month: that.startDate.month
,date: that.startDate.date
}).getTime();
endTime = that.newDate({
year: that.endDate.year
,month: that.endDate.month
,date: that.endDate.date
}).getTime();
if(startTime > endTime) return that.hint(TIPS_OUT);
lay.each(tds, function(i, item){
var ymd = lay(item).attr('lay-ymd').split('-')
,thisTime = that.newDate({
year: ymd[0]
,month: ymd[1] - 1
,date: ymd[2]
}).getTime();
lay(item).removeClass(ELEM_SELECTED + ' ' + THIS);
if(thisTime === startTime || thisTime === endTime){
lay(item).addClass(
lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT)
? ELEM_SELECTED
: THIS
);
}
if(thisTime > startTime && thisTime < endTime){
lay(item).addClass(ELEM_SELECTED);
}
});
};
// 执行done/change回调
Class.prototype.done = function(param, type){
var that = this
,options = that.config
,start = lay.extend({}, that.startDate ? lay.extend(that.startDate, that.startTime) : options.dateTime)
,end = lay.extend({}, lay.extend(that.endDate, that.endTime))
lay.each([start, end], function(i, item){
if(!('month' in item)) return;
lay.extend(item, {
month: item.month + 1
});
});
param = param || [that.parse(), start, end];
typeof options[type || 'done'] === 'function' && options[type || 'done'].apply(options, param);
return that;
};
// 选择日期
Class.prototype.choose = function(td){
var that = this
,options = that.config
,dateTime = options.dateTime
,tds = lay(that.elem).find('td')
,YMD = td.attr('lay-ymd').split('-')
,setDateTime = function(one){
var thisDate = new Date();
// 同步dateTime
one && lay.extend(dateTime, YMD);
// 记录开始日期
if(options.range){
that.startDate ? lay.extend(that.startDate, YMD) : (
that.startDate = lay.extend({}, YMD, that.startTime)
);
that.startYMD = YMD;
}
};
YMD = {
year: YMD[0] | 0
,month: (YMD[1] | 0) - 1
,date: YMD[2] | 0
};
if(td.hasClass(DISABLED)) return;
// 范围选择
if(options.range){
lay.each(['startTime', 'endTime'], function(i, item){
that[item] = that[item] || {
hours: 0
,minutes: 0
,seconds: 0
};
});
if(that.endState){ // 重新选择
setDateTime();
delete that.endState;
delete that.endDate;
that.startState = true;
tds.removeClass(THIS + ' ' + ELEM_SELECTED);
td.addClass(THIS);
} else if(that.startState){ // 选中截止
td.addClass(THIS);
that.endDate ? lay.extend(that.endDate, YMD) : (
that.endDate = lay.extend({}, YMD, that.endTime)
);
// 判断是否顺时或逆时选择
if(that.newDate(YMD).getTime() < that.newDate(that.startYMD).getTime()){
var startDate = lay.extend({}, that.endDate, {
hours: that.startDate.hours
,minutes: that.startDate.minutes
,seconds: that.startDate.seconds
});
lay.extend(that.endDate, that.startDate, {
hours: that.endDate.hours
,minutes: that.endDate.minutes
,seconds: that.endDate.seconds
});
that.startDate = startDate;
}
options.showBottom || that.done();
that.stampRange(); // 标记范围内的日期
that.endState = true;
that.done(null, 'change');
} else { // 选中开始
td.addClass(THIS);
setDateTime();
that.startState = true;
}
lay(that.footer).find(ELEM_CONFIRM)[that.endDate ? 'removeClass' : 'addClass'](DISABLED);
} else if(options.position === 'static'){ // 直接嵌套的选中
setDateTime(true);
that.calendar().done().done(null, 'change');
} else if(options.type === 'date'){
setDateTime(true);
that.setValue(that.parse()).remove().done();
} else if(options.type === 'datetime'){
setDateTime(true);
that.calendar().done(null, 'change');
}
};
// 底部按钮
Class.prototype.tool = function(btn, type){
var that = this
,options = that.config
,dateTime = options.dateTime
,isStatic = options.position === 'static'
,active = {
// 选择时间
datetime: function(){
if(lay(btn).hasClass(DISABLED)) return;
that.list('time', 0);
options.range && that.list('time', 1);
lay(btn).attr('lay-type', 'date').html(that.lang().dateTips);
}
// 选择日期
,date: function(){
that.closeList();
lay(btn).attr('lay-type', 'datetime').html(that.lang().timeTips);
}
// 清空、重置
,clear: function(){
that.setValue('').remove();
isStatic && (
lay.extend(dateTime, that.firstDate)
,that.calendar()
)
options.range && (
delete that.startState
,delete that.endState
,delete that.endDate
,delete that.startTime
,delete that.endTime
);
that.done(['', {}, {}]);
}
// 现在
,now: function(){
var thisDate = new Date();
lay.extend(dateTime, that.systemDate(), {
hours: thisDate.getHours()
,minutes: thisDate.getMinutes()
,seconds: thisDate.getSeconds()
});
that.setValue(that.parse()).remove();
isStatic && that.calendar();
that.done();
}
// 确定
,confirm: function(){
if(options.range){
if(!that.endDate) return that.hint('请先选择日期范围');
if(lay(btn).hasClass(DISABLED)) return that.hint(
options.type === 'time' ? TIPS_OUT.replace(/日期/g, '时间') : TIPS_OUT
);
} else {
if(lay(btn).hasClass(DISABLED)) return that.hint('不在有效日期或时间范围内');
}
that.done();
that.setValue(that.parse()).remove()
}
};
active[type] && active[type]();
};
// 统一切换处理
Class.prototype.change = function(index){
var that = this
,options = that.config
,dateTime = options.dateTime
,isAlone = options.range && (options.type === 'year' || options.type === 'month')
,elemCont = that.elemCont[index || 0]
,listYM = that.listYM[index]
,addSubYeay = function(type){
var startEnd = ['startDate', 'endDate'][index]
,isYear = lay(elemCont).find('.laydate-year-list')[0]
,isMonth = lay(elemCont).find('.laydate-month-list')[0];
// 切换年列表
if(isYear){
listYM[0] = type ? listYM[0] - 15 : listYM[0] + 15;
that.list('year', index);
}
if(isMonth){ // 切换月面板中的年
type ? listYM[0]-- : listYM[0]++;
that.list('month', index);
}
if(isYear || isMonth){
lay.extend(dateTime, {
year: listYM[0]
});
if(isAlone) that[startEnd].year = listYM[0];
options.range || that.done(null, 'change');
that.setBtnStatus();
options.range || that.limit(lay(that.footer).find(ELEM_CONFIRM), {
year: listYM[0]
});
}
return isYear || isMonth;
};
return {
prevYear: function(){
if(addSubYeay('sub')) return;
dateTime.year--;
that.checkDate('limit').calendar();
options.range || that.done(null, 'change');
}
,prevMonth: function(){
var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub');
lay.extend(dateTime, {
year: YM[0]
,month: YM[1]
});
that.checkDate('limit').calendar();
options.range || that.done(null, 'change');
}
,nextMonth: function(){
var YM = that.getAsYM(dateTime.year, dateTime.month);
lay.extend(dateTime, {
year: YM[0]
,month: YM[1]
});
that.checkDate('limit').calendar();
options.range || that.done(null, 'change');
}
,nextYear: function(){
if(addSubYeay()) return;
dateTime.year++
that.checkDate('limit').calendar();
options.range || that.done(null, 'change');
}
};
};
// 日期切换事件
Class.prototype.changeEvent = function(){
var that = this
,options = that.config;
// 日期选择事件
lay(that.elem).on('click', function(e){
lay.stope(e);
});
// 年月切换
lay.each(that.elemHeader, function(i, header){
// 上一年
lay(header[0]).on('click', function(e){
that.change(i).prevYear();
});
// 上一月
lay(header[1]).on('click', function(e){
that.change(i).prevMonth();
});
// 选择年月
lay(header[2]).find('span').on('click', function(e){
var othis = lay(this)
,layYM = othis.attr('lay-ym')
,layType = othis.attr('lay-type');
if(!layYM) return;
layYM = layYM.split('-');
that.listYM[i] = [layYM[0] | 0, layYM[1] | 0];
that.list(layType, i);
lay(that.footer).find(ELEM_TIME_BTN).addClass(DISABLED);
});
// 下一月
lay(header[3]).on('click', function(e){
that.change(i).nextMonth();
});
// 下一年
lay(header[4]).on('click', function(e){
that.change(i).nextYear();
});
});
// 点击日期
lay.each(that.table, function(i, table){
var tds = lay(table).find('td');
tds.on('click', function(){
that.choose(lay(this));
});
});
// 点击底部按钮
lay(that.footer).find('span').on('click', function(){
var type = lay(this).attr('lay-type');
that.tool(this, type);
});
};
// 是否输入框
Class.prototype.isInput = function(elem){
return /input|textarea/.test(elem.tagName.toLocaleLowerCase());
};
// 绑定的元素事件处理
Class.prototype.events = function(){
var that = this
,options = that.config
// 绑定呼出控件事件
,showEvent = function(elem, bind){
elem.on(options.trigger, function(){
bind && (that.bindElem = this);
that.render();
});
};
if(!options.elem[0] || options.elem[0].eventHandler) return;
showEvent(options.elem, 'bind');
showEvent(options.eventElem);
// 绑定关闭控件事件
lay(document).on('click', function(e){
if(e.target === options.elem[0]
|| e.target === options.eventElem[0]
|| e.target === lay(options.closeStop)[0]){
return;
}
that.remove();
}).on('keydown', function(e){
if(e.keyCode === 13){
if(lay('#'+ that.elemID)[0] && that.elemID === Class.thisElem){
e.preventDefault();
lay(that.footer).find(ELEM_CONFIRM)[0].click();
}
}
});
// 自适应定位
lay(window).on('resize', function(){
if(!that.elem || !lay(ELEM)[0]){
return false;
}
that.position();
});
options.elem[0].eventHandler = true;
};
// 核心接口
laydate.render = function(options){
var inst = new Class(options);
return thisDate.call(inst);
};
// 得到某月的最后一天
laydate.getEndDate = function(month, year){
var thisDate = new Date();
// 设置日期为下个月的第一天
thisDate.setFullYear(
year || thisDate.getFullYear()
,month || (thisDate.getMonth() + 1)
,1);
// 减去一天，得到当前月最后一天
return new Date(thisDate.getTime() - 1000*60*60*24).getDate();
};
// 暴露lay
window.lay = window.lay || lay;
// 加载方式
isLayui ? (
laydate.ready()
,layui.define(function(exports){ // layui加载
laydate.path = layui.cache.dir;
exports(MOD_NAME, laydate);
})
) : (
(typeof define === 'function' && define.amd) ? define(function(){ // requirejs加载
return laydate;
}) : function(){ // 普通script标签加载
laydate.ready();
window.laydate = laydate
}()
);
}();layedit.js
/**
@Name：layui.layedit 富文本编辑器
@Author：贤心
@License：MIT
*/
layui.define(['layer', 'form'], function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,form = layui.form
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'layedit', THIS = 'layui-this', SHOW = 'layui-show', ABLED = 'layui-disabled'
,Edit = function(){
var that = this;
that.index = 0;
// 全局配置
that.config = {
// 默认工具bar
tool: [
'strong', 'italic', 'underline', 'del'
,'|'
,'left', 'center', 'right'
,'|'
,'link', 'unlink', 'face', 'image'
]
,hideTool: []
,height: 280 // 默认高
};
};
// 全局设置
Edit.prototype.set = function(options){
var that = this;
$.extend(true, that.config, options);
return that;
};
// 事件监听
Edit.prototype.on = function(events, callback){
return layui.onevent(MOD_NAME, events, callback);
};
// 建立编辑器
Edit.prototype.build = function(id, settings){
settings = settings || {};
var that = this
,config = that.config
,ELEM = 'layui-layedit', textArea = $(typeof(id)=='string'?'#'+id:id)
,name = 'LAY_layedit_'+ (++that.index)
,haveBuild = textArea.next('.'+ELEM)
,set = $.extend({}, config, settings)
,tool = function(){
var node = [], hideTools = {};
layui.each(set.hideTool, function(_, item){
hideTools[item] = true;
});
layui.each(set.tool, function(_, item){
if(tools[item] && !hideTools[item]){
node.push(tools[item]);
}
});
return node.join('');
}()
,editor = $(['<div class="'+ ELEM +'">'
,'<div class="layui-unselect layui-layedit-tool">'+ tool +'</div>'
,'<div class="layui-layedit-iframe">'
,'<iframe id="'+ name +'" name="'+ name +'" textarea="'+ id +'" frameborder="0"></iframe>'
,'</div>'
,'</div>'].join(''))
// 编辑器不兼容ie8以下
if(device.ie && device.ie < 8){
return textArea.removeClass('layui-hide').addClass(SHOW);
}
haveBuild[0] && (haveBuild.remove());
setIframe.call(that, editor, textArea[0], set)
textArea.addClass('layui-hide').after(editor);
return that.index;
};
// 获得编辑器中内容
Edit.prototype.getContent = function(index){
var iframeWin = getWin(index);
if(!iframeWin[0]) return;
return toLower(iframeWin[0].document.body.innerHTML);
};
// 获得编辑器中纯文本内容
Edit.prototype.getText = function(index){
var iframeWin = getWin(index);
if(!iframeWin[0]) return;
return $(iframeWin[0].document.body).text();
};
/**
* 设置编辑器内容
* @param {[type]} index 编辑器索引
* @param {[type]} content 要设置的内容
* @param {[type]} flag 是否追加模式
*/
Edit.prototype.setContent = function(index, content, flag){
var iframeWin = getWin(index);
if(!iframeWin[0]) return;
if(flag){
$(iframeWin[0].document.body).append(content)
}else{
$(iframeWin[0].document.body).html(content)
};
layedit.sync(index)
};
// 将编辑器内容同步到textarea（一般用于异步提交时）
Edit.prototype.sync = function(index){
var iframeWin = getWin(index);
if(!iframeWin[0]) return;
var textarea = $('#'+iframeWin[1].attr('textarea'));
textarea.val(toLower(iframeWin[0].document.body.innerHTML));
};
// 获取编辑器选中内容
Edit.prototype.getSelection = function(index){
var iframeWin = getWin(index);
if(!iframeWin[0]) return;
var range = Range(iframeWin[0].document);
return document.selection ? range.text : range.toString();
};
// iframe初始化
var setIframe = function(editor, textArea, set){
var that = this, iframe = editor.find('iframe');
iframe.css({
height: set.height
}).on('load', function(){
var conts = iframe.contents()
,iframeWin = iframe.prop('contentWindow')
,head = conts.find('head')
,style = $(['<style>'
,'*{margin: 0; padding: 0;}'
,'body{padding: 10px; line-height: 20px; overflow-x: hidden; word-wrap: break-word; font: 14px Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Tahoma,Arial,sans-serif; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}'
,'a{color:#01AAED; text-decoration:none;}a:hover{color:#c00}'
,'p{margin-bottom: 10px;}'
,'img{display: inline-block; border: none; vertical-align: middle;}'
,'pre{margin: 10px 0; padding: 10px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}'
,'</style>'].join(''))
,body = conts.find('body');
head.append(style);
body.attr('contenteditable', 'true').css({
'min-height': set.height
}).html(textArea.value||'');
hotkey.apply(that, [iframeWin, iframe, textArea, set]); // 快捷键处理
toolActive.call(that, iframeWin, editor, set); // 触发工具
});
}
// 获得iframe窗口对象
,getWin = function(index){
var iframe = $('#LAY_layedit_'+ index)
,iframeWin = iframe.prop('contentWindow');
return [iframeWin, iframe];
}
// IE8下将标签处理成小写
,toLower = function(html){
if(device.ie == 8){
html = html.replace(/<.+>/g, function(str){
return str.toLowerCase();
});
}
return html;
}
// 快捷键处理
,hotkey = function(iframeWin, iframe, textArea, set){
var iframeDOM = iframeWin.document, body = $(iframeDOM.body);
body.on('keydown', function(e){
var keycode = e.keyCode;
// 处理回车
if(keycode === 13){
var range = Range(iframeDOM);
var container = getContainer(range)
,parentNode = container.parentNode;
if(parentNode.tagName.toLowerCase() === 'pre'){
if(e.shiftKey) return
layer.msg('请暂时用shift+enter');
return false;
}
iframeDOM.execCommand('formatBlock', false, '<p>');
}
});
// 给textarea同步内容
$(textArea).parents('form').on('submit', function(){
var html = body.html();
// IE8下将标签处理成小写
if(device.ie == 8){
html = html.replace(/<.+>/g, function(str){
return str.toLowerCase();
});
}
textArea.value = html;
});
// 处理粘贴
body.on('paste', function(e){
iframeDOM.execCommand('formatBlock', false, '<p>');
setTimeout(function(){
filter.call(iframeWin, body);
textArea.value = body.html();
}, 100);
});
}
// 标签过滤
,filter = function(body){
var iframeWin = this
,iframeDOM = iframeWin.document;
// 清除影响版面的css属性
body.find('*[style]').each(function(){
var textAlign = this.style.textAlign;
this.removeAttribute('style');
$(this).css({
'text-align': textAlign || ''
})
});
// 修饰表格
body.find('table').addClass('layui-table');
// 移除不安全的标签
body.find('script,link').remove();
}
// Range对象兼容性处理
,Range = function(iframeDOM){
return iframeDOM.selection
? iframeDOM.selection.createRange()
: iframeDOM.getSelection().getRangeAt(0);
}
// 当前Range对象的endContainer兼容性处理
,getContainer = function(range){
return range.endContainer || range.parentElement().childNodes[0]
}
// 在选区插入内联元素
,insertInline = function(tagName, attr, range){
var iframeDOM = this.document
,elem = document.createElement(tagName)
for(var key in attr){
elem.setAttribute(key, attr[key]);
}
elem.removeAttribute('text');
if(iframeDOM.selection){ // IE
var text = range.text || attr.text;
if(tagName === 'a' && !text) return;
if(text){
elem.innerHTML = text;
}
range.pasteHTML($(elem).prop('outerHTML'));
range.select();
} else { // 非IE
var text = range.toString() || attr.text;
if(tagName === 'a' && !text) return;
if(text){
elem.innerHTML = text;
}
range.deleteContents();
range.insertNode(elem);
}
}
// 工具选中
,toolCheck = function(tools, othis){
var iframeDOM = this.document
,CHECK = 'layedit-tool-active'
,container = getContainer(Range(iframeDOM))
,item = function(type){
return tools.find('.layedit-tool-'+type)
}
if(othis){
othis[othis.hasClass(CHECK) ? 'removeClass' : 'addClass'](CHECK);
}
tools.find('>i').removeClass(CHECK);
item('unlink').addClass(ABLED);
$(container).parents().each(function(){
var tagName = this.tagName.toLowerCase()
,textAlign = this.style.textAlign;
// 文字
if(tagName === 'b' || tagName === 'strong'){
item('b').addClass(CHECK)
}
if(tagName === 'i' || tagName === 'em'){
item('i').addClass(CHECK)
}
if(tagName === 'u'){
item('u').addClass(CHECK)
}
if(tagName === 'strike'){
item('d').addClass(CHECK)
}
// 对齐
if(tagName === 'p'){
if(textAlign === 'center'){
item('center').addClass(CHECK);
} else if(textAlign === 'right'){
item('right').addClass(CHECK);
} else {
item('left').addClass(CHECK);
}
}
// 超链接
if(tagName === 'a'){
item('link').addClass(CHECK);
item('unlink').removeClass(ABLED);
}
});
}
// 触发工具
,toolActive = function(iframeWin, editor, set){
var iframeDOM = iframeWin.document
,body = $(iframeDOM.body)
,toolEvent = {
// 超链接
link: function(range){
var container = getContainer(range)
,parentNode = $(container).parent();
link.call(body, {
href: parentNode.attr('href')
,target: parentNode.attr('target')
}, function(field){
var parent = parentNode[0];
if(parent.tagName === 'A'){
parent.href = field.url;
} else {
insertInline.call(iframeWin, 'a', {
target: field.target
,href: field.url
,text: field.url
}, range);
}
});
}
// 清除超链接
,unlink: function(range){
iframeDOM.execCommand('unlink');
}
// 表情
,face: function(range){
face.call(this, function(img){
insertInline.call(iframeWin, 'img', {
src: img.src
,alt: img.alt
}, range);
});
}
// 图片
,image: function(range){
var that = this;
layui.use('upload', function(upload){
var uploadImage = set.uploadImage || {};
upload.render({
url: uploadImage.url
,method: uploadImage.type
,elem: $(that).find('input')[0]
,done: function(res){
if(res.code == 0){
res.data = res.data || {};
insertInline.call(iframeWin, 'img', {
src: res.data.src
,alt: res.data.title
}, range);
} else {
layer.msg(res.msg||'上传失败');
}
}
});
});
}
// 插入代码
,code: function(range){
code.call(body, function(pre){
insertInline.call(iframeWin, 'pre', {
text: pre.code
,'lay-lang': pre.lang
}, range);
});
}
// 帮助
,help: function(){
layer.open({
type: 2
,title: '帮助'
,area: ['600px', '380px']
,shadeClose: true
,shade: 0.1
,skin: 'layui-layer-msg'
,content: ['http:// www.layui.com/about/layedit/help.html', 'no']
});
}
}
,tools = editor.find('.layui-layedit-tool')
,click = function(){
var othis = $(this)
,events = othis.attr('layedit-event')
,command = othis.attr('lay-command');
if(othis.hasClass(ABLED)) return;
body.focus();
var range = Range(iframeDOM)
,container = range.commonAncestorContainer
if(command){
iframeDOM.execCommand(command);
if(/justifyLeft|justifyCenter|justifyRight/.test(command)){
iframeDOM.execCommand('formatBlock', false, '<p>');
}
setTimeout(function(){
body.focus();
}, 10);
} else {
toolEvent[events] && toolEvent[events].call(this, range);
}
toolCheck.call(iframeWin, tools, othis);
}
,isClick = /image/
tools.find('>i').on('mousedown', function(){
var othis = $(this)
,events = othis.attr('layedit-event');
if(isClick.test(events)) return;
click.call(this)
}).on('click', function(){
var othis = $(this)
,events = othis.attr('layedit-event');
if(!isClick.test(events)) return;
click.call(this)
});
// 触发内容区域
body.on('click', function(){
toolCheck.call(iframeWin, tools);
layer.close(face.index);
});
}
// 超链接面板
,link = function(options, callback){
var body = this, index = layer.open({
type: 1
,id: 'LAY_layedit_link'
,area: '350px'
,shade: 0.05
,shadeClose: true
,moveType: 1
,title: '超链接'
,skin: 'layui-layer-msg'
,content: ['<ul class="layui-form" style="margin: 15px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label" style="width: 60px;">URL</label>'
,'<div class="layui-input-block" style="margin-left: 90px">'
,'<input name="url" lay-verify="url" value="'+ (options.href||'') +'" autofocus="true" autocomplete="off" class="layui-input">'
,'</div>'
,'</li>'
,'<li class="layui-form-item">'
,'<label class="layui-form-label" style="width: 60px;">打开方式</label>'
,'<div class="layui-input-block" style="margin-left: 90px">'
,'<input type="radio" name="target" value="_self" class="layui-input" title="当前窗口"'
+ ((options.target==='_self' || !options.target) ? 'checked' : '') +'>'
,'<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口" '
+ (options.target==='_blank' ? 'checked' : '') +'>'
,'</div>'
,'</li>'
,'<li class="layui-form-item" style="text-align: center;">'
,'<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 确定 </button>'
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
,'</li>'
,'</ul>'].join('')
,success: function(layero, index){
var eventFilter = 'submit(layedit-link-yes)';
form.render('radio');
layero.find('.layui-btn-primary').on('click', function(){
layer.close(index);
body.focus();
});
form.on(eventFilter, function(data){
layer.close(link.index);
callback && callback(data.field);
});
}
});
link.index = index;
}
// 表情面板
,face = function(callback){
// 表情库
var faces = function(){
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
layui.each(alt, function(index, item){
arr[item] = layui.cache.dir + 'images/face/'+ index + '.gif';
});
return arr;
}();
face.hide = face.hide || function(e){
if($(e.target).attr('layedit-event') !== 'face'){
layer.close(face.index);
}
}
return face.index = layer.tips(function(){
var content = [];
layui.each(faces, function(key, item){
content.push('<li title="'+ key +'"><img src="'+ item +'" alt="'+ key +'"></li>');
});
return '<ul class="layui-clear">' + content.join('') + '</ul>';
}(), this, {
tips: 1
,time: 0
,skin: 'layui-box layui-util-face'
,maxWidth: 500
,success: function(layero, index){
layero.css({
marginTop: -4
,marginLeft: -10
}).find('.layui-clear>li').on('click', function(){
callback && callback({
src: faces[this.title]
,alt: this.title
});
layer.close(index);
});
$(document).off('click', face.hide).on('click', face.hide);
}
});
}
// 插入代码面板
,code = function(callback){
var body = this, index = layer.open({
type: 1
,id: 'LAY_layedit_code'
,area: '550px'
,shade: 0.05
,shadeClose: true
,moveType: 1
,title: '插入代码'
,skin: 'layui-layer-msg'
,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">请选择语言</label>'
,'<div class="layui-input-block">'
,'<select name="lang">'
,'<option value="JavaScript">JavaScript</option>'
,'<option value="HTML">HTML</option>'
,'<option value="CSS">CSS</option>'
,'<option value="Java">Java</option>'
,'<option value="PHP">PHP</option>'
,'<option value="C#">C#</option>'
,'<option value="Python">Python</option>'
,'<option value="Ruby">Ruby</option>'
,'<option value="Go">Go</option>'
,'</select>'
,'</div>'
,'</li>'
,'<li class="layui-form-item layui-form-text">'
,'<label class="layui-form-label">代码</label>'
,'<div class="layui-input-block">'
,'<textarea name="code" lay-verify="required" autofocus="true" class="layui-textarea" style="height: 200px;"></textarea>'
,'</div>'
,'</li>'
,'<li class="layui-form-item" style="text-align: center;">'
,'<button type="button" lay-submit lay-filter="layedit-code-yes" class="layui-btn"> 确定 </button>'
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
,'</li>'
,'</ul>'].join('')
,success: function(layero, index){
var eventFilter = 'submit(layedit-code-yes)';
form.render('select');
layero.find('.layui-btn-primary').on('click', function(){
layer.close(index);
body.focus();
});
form.on(eventFilter, function(data){
layer.close(code.index);
callback && callback(data.field);
});
}
});
code.index = index;
}
// 全部工具
,tools = {
html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>'
,strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>'
,italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>'
,underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>'
,del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>'
,'|': '<span class="layedit-tool-mid"></span>'
,left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>'
,center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>'
,right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>'
,link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>'
,unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>'
,face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>'
,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>'
,code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>'
,help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>'
}
,edit = new Edit();
exports(MOD_NAME, edit);
});
layer.js
/**
@Name：layer v3.1.2 Web弹层组件
@Author：贤心
@Site：http:// layer.layui.com
@License：MIT
*/
;!function(window, undefined){
"use strict";
var isLayui = window.layui && layui.define, $, win, ready = {
getPath: function(){
var jsPath = document.currentScript ? document.currentScript.src : function(){
var js = document.scripts
,last = js.length - 1
,src;
for(var i = last; i > 0; i--){
if(js[i].readyState === 'interactive'){
src = js[i].src;
break;
}
}
return src || js[last].src;
}();
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}(),
config: {}, end: {}, minIndex: 0, minLeft: [],
btn: ['确定', '取消'],
// 五种原始层模式
type: ['dialog', 'page', 'iframe', 'loading', 'tips'],
// 获取节点的style属性值
getStyle: function(node, name){
var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
},
// 载入CSS配件
link: function(href, fn, cssname){
// 未设置路径，则不主动加载css
if(!layer.path) return;
var head = document.getElementsByTagName("head")[0], link = document.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\// g, '');
var id = 'layuicss-'+ app, timeout = 0;
link.rel = 'stylesheet';
link.href = layer.path + href;
link.id = id;
if(!document.getElementById(id)){
head.appendChild(link);
}
if(typeof fn !== 'function') return;
// 轮询css是否加载完毕
(function poll() {
if(++timeout > 8 * 1000 / 100){
return window.console && console.error('layer.css: Invalid');
};
parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);
}());
}
};
// 默认内置方法。
var layer = {
v: '3.1.1',
ie: function(){ // ie版本
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于ie11并没有msie的标识
) : false;
}(),
index: (window.layer && window.layer.v) ? 100000 : 0,
path: ready.getPath,
config: function(options, fn){
options = options || {};
layer.cache = ready.config = $.extend({}, ready.config, options);
layer.path = ready.config.path || layer.path;
typeof options.extend === 'string' && (options.extend = [options.extend]);
if(ready.config.path) layer.ready();
if(!options.extend) return this;
isLayui
? layui.addcss('modules/layer/' + options.extend)
: ready.link('theme/' + options.extend);
return this;
},
// 主体CSS等待事件
ready: function(callback){
var cssname = 'layer', ver = ''
,path = (isLayui ? 'modules/layer/' : 'theme/') + 'default/layer.css?v='+ layer.v + ver;
isLayui ? layui.addcss(path, callback, cssname) : ready.link(path, callback, cssname);
return this;
},
// 各种快捷引用
alert: function(content, options, yes){
var type = typeof options === 'function';
if(type) yes = options;
return layer.open($.extend({
content: content,
yes: yes
}, type ? {} : options));
},
confirm: function(content, options, yes, cancel){
var type = typeof options === 'function';
if(type){
cancel = yes;
yes = options;
}
return layer.open($.extend({
content: content,
btn: ready.btn,
yes: yes,
btn2: cancel
}, type ? {} : options));
},
msg: function(content, options, end){ // 最常用提示层
var type = typeof options === 'function', rskin = ready.config.skin;
var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg';
var anim = doms.anim.length - 1;
if(type) end = options;
return layer.open($.extend({
content: content,
time: 3000,
shade: false,
skin: skin,
title: false,
closeBtn: false,
btn: false,
resize: false,
end: end
}, (type && !ready.config.skin) ? {
skin: skin + ' layui-layer-hui',
anim: anim
} : function(){
options = options || {};
if(options.icon === -1 || options.icon === undefined && !ready.config.skin){
options.skin = skin + ' ' + (options.skin||'layui-layer-hui');
}
return options;
}()));
},
load: function(icon, options){
return layer.open($.extend({
type: 3,
icon: icon || 0,
resize: false,
shade: 0.01
}, options));
},
tips: function(content, follow, options){
return layer.open($.extend({
type: 4,
content: [content, follow],
closeBtn: false,
time: 3000,
shade: false,
resize: false,
fixed: false,
maxWidth: 210
}, options));
}
};
var Class = function(setings){
var that = this;
that.index = ++layer.index;
that.config = $.extend({}, that.config, ready.config, setings);
document.body ? that.creat() : setTimeout(function(){
that.creat();
}, 30);
};
Class.pt = Class.prototype;
// 缓存常用字符
var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
// 默认配置
Class.pt.config = {
type: 0,
shade: 0.3,
fixed: true,
move: doms[1],
title: '信息',
offset: 'auto',
area: 'auto',
closeBtn: 1,
time: 0, // 0表示不自动关闭
zIndex: 19891014,
maxWidth: 360,
anim: 0,
isOutAnim: true,
icon: -1,
moveType: 1,
resize: true,
scrollbar: true, // 是否允许浏览器滚动条
tips: 2
};
// 容器
Class.pt.vessel = function(conType, callback){
var that = this, times = that.index, config = that.config;
var zIndex = config.zIndex + times, titype = typeof config.title === 'object';
var ismax = config.maxmin && (config.type === 1 || config.type === 2);
var titleHTML = (config.title ? '<div class="layui-layer-title" style="'+ (titype ? config.title[1] : '') +'">'
+ (titype ? config.title[0] : config.title)
+ '</div>' : '');
config.zIndex = zIndex;
callback([
// 遮罩
config.shade ? ('<div class="layui-layer-shade" id="layui-layer-shade'+ times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
// 主体
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fixed ? '' : ';position:absolute;') +'">'
+ (conType && config.type != 2 ? '' : titleHTML)
+ '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
+ (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
+ (config.type == 1 && conType ? '' : (config.content||''))
+ '</div>'
+ '<span class="layui-layer-setwin">'+ function(){
var closebtn = ismax ? '<a class="layui-layer-min" href="javascript:;"><cite></cite></a><a class="layui-layer-ico layui-layer-max" href="javascript:;"></a>' : '';
config.closeBtn && (closebtn += '<a class="layui-layer-ico '+ doms[7] +' '+ doms[7] + (config.title ? config.closeBtn : (config.type == 4 ? '1' : '2')) +'" href="javascript:;"></a>');
return closebtn;
}() + '</span>'
+ (config.btn ? function(){
var button = '';
typeof config.btn === 'string' && (config.btn = [config.btn]);
for(var i = 0, len = config.btn.length; i < len; i++){
button += '<a class="'+ doms[6] +''+ i +'">'+ config.btn[i] +'</a>'
}
return '<div class="'+ doms[6] +' layui-layer-btn-'+ (config.btnAlign||'') +'">'+ button +'</div>'
}() : '')
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
+ '</div>'
], titleHTML, $('<div class="layui-layer-move"></div>'));
return that;
};
// 创建骨架
Class.pt.creat = function(){
var that = this
,config = that.config
,times = that.index, nodeIndex
,content = config.content
,conType = typeof content === 'object'
,body = $('body');
if(config.id && $('#'+config.id)[0]) return;
if(typeof config.area === 'string'){
config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
}
// anim兼容旧版shift
if(config.shift){
config.anim = config.shift;
}
if(layer.ie == 6){
config.fixed = false;
}
switch(config.type){
case 0:
config.btn = ('btn' in config) ? config.btn : ready.btn[0];
layer.closeAll('dialog');
break;
case 2:
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:
delete config.title;
delete config.closeBtn;
config.icon === -1 && (config.icon === 0);
layer.closeAll('loading');
break;
case 4:
conType || (config.content = [config.content, 'body']);
config.follow = config.content[1];
config.content = config.content[0] + '<i class="layui-layer-TipsG"></i>';
delete config.title;
config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
config.tipsMore || layer.closeAll('tips');
break;
}
// 建立容器
that.vessel(conType, function(html, titleHTML, moveElem){
body.append(html[0]);
conType ? function(){
(config.type == 2 || config.type == 4) ? function(){
$('body').append(html[1]);
}() : function(){
if(!content.parents('.'+doms[0])[0]){
content.data('display', content.css('display')).show().addClass('layui-layer-wrap').wrap(html[1]);
$('#'+ doms[0] + times).find('.'+doms[5]).before(titleHTML);
}
}();
}() : body.append(html[1]);
$('.layui-layer-move')[0] || body.append(ready.moveElem = moveElem);
that.layero = $('#'+ doms[0] + times);
config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
}).auto(times);
// 遮罩
$('#layui-layer-shade'+ that.index).css({
'background-color': config.shade[1] || '#000'
,'opacity': config.shade[0]||config.shade
});
config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
// 坐标自适应浏览器窗口尺寸
config.type == 4 ? that.tips() : that.offset();
if(config.fixed){
win.on('resize', function(){
that.offset();
(/^\d+%$/.test(config.area[0]) || /^\d+%$/.test(config.area[1])) && that.auto(times);
config.type == 4 && that.tips();
});
}
config.time <= 0 || setTimeout(function(){
layer.close(that.index)
}, config.time);
that.move().callback();
// 为兼容jQuery3.0的css动画影响元素尺寸计算
if(doms.anim[config.anim]){
var animClass = 'layer-anim '+ doms.anim[config.anim];
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass(animClass);
});
};
// 记录关闭动画
if(config.isOutAnim){
that.layero.data('isOutAnim', true);
}
};
// 自适应
Class.pt.auto = function(index){
var that = this, config = that.config, layero = $('#'+ doms[0] + index);
if(config.area[0] === '' && config.maxWidth > 0){
// 为了修复IE7下一个让人难以理解的bug
if(layer.ie && layer.ie < 8 && config.btn){
layero.width(layero.innerWidth());
}
layero.outerWidth() > config.maxWidth && layero.width(config.maxWidth);
}
var area = [layero.innerWidth(), layero.innerHeight()]
,titHeight = layero.find(doms[1]).outerHeight() || 0
,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0
,setHeight = function(elem){
elem = layero.find(elem);
elem.height(area[1] - titHeight - btnHeight - 2*(parseFloat(elem.css('padding-top'))|0));
};
switch(config.type){
case 2:
setHeight('iframe');
break;
default:
if(config.area[1] === ''){
if(config.maxHeight > 0 && layero.outerHeight() > config.maxHeight){
area[1] = config.maxHeight;
setHeight('.'+doms[5]);
} else if(config.fixed && area[1] >= win.height()){
area[1] = win.height();
setHeight('.'+doms[5]);
}
} else {
setHeight('.'+doms[5]);
}
break;
};
return that;
};
// 计算坐标
Class.pt.offset = function(){
var that = this, config = that.config, layero = that.layero;
var area = [layero.outerWidth(), layero.outerHeight()];
var type = typeof config.offset === 'object';
that.offsetTop = (win.height() - area[1])/2;
that.offsetLeft = (win.width() - area[0])/2;
if(type){
that.offsetTop = config.offset[0];
that.offsetLeft = config.offset[1]||that.offsetLeft;
} else if(config.offset !== 'auto'){
if(config.offset === 't'){ // 上
that.offsetTop = 0;
} else if(config.offset === 'r'){ // 右
that.offsetLeft = win.width() - area[0];
} else if(config.offset === 'b'){ // 下
that.offsetTop = win.height() - area[1];
} else if(config.offset === 'l'){ // 左
that.offsetLeft = 0;
} else if(config.offset === 'lt'){ // 左上角
that.offsetTop = 0;
that.offsetLeft = 0;
} else if(config.offset === 'lb'){ // 左下角
that.offsetTop = win.height() - area[1];
that.offsetLeft = 0;
} else if(config.offset === 'rt'){ // 右上角
that.offsetTop = 0;
that.offsetLeft = win.width() - area[0];
} else if(config.offset === 'rb'){ // 右下角
that.offsetTop = win.height() - area[1];
that.offsetLeft = win.width() - area[0];
} else {
that.offsetTop = config.offset;
}
}
if(!config.fixed){
that.offsetTop = /%$/.test(that.offsetTop) ?
win.height()*parseFloat(that.offsetTop)/100
: parseFloat(that.offsetTop);
that.offsetLeft = /%$/.test(that.offsetLeft) ?
win.width()*parseFloat(that.offsetLeft)/100
: parseFloat(that.offsetLeft);
that.offsetTop += win.scrollTop();
that.offsetLeft += win.scrollLeft();
}
if(layero.attr('minLeft')){
that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0);
that.offsetLeft = layero.css('left');
}
layero.css({top: that.offsetTop, left: that.offsetLeft});
};
// Tips
Class.pt.tips = function(){
var that = this, config = that.config, layero = that.layero;
var layArea = [layero.outerWidth(), layero.outerHeight()], follow = $(config.follow);
if(!follow[0]) follow = $('body');
var goal = {
width: follow.outerWidth(),
height: follow.outerHeight(),
top: follow.offset().top,
left: follow.offset().left
}, tipsG = layero.find('.layui-layer-TipsG');
var guide = config.tips[0];
config.tips[1] || tipsG.remove();
goal.autoLeft = function(){
if(goal.left + layArea[0] - win.width() > 0){
goal.tipLeft = goal.left + goal.width - layArea[0];
tipsG.css({right: 12, left: 'auto'});
} else {
goal.tipLeft = goal.left;
};
};
// 辨别tips的方位
goal.where = [function(){ // 上
goal.autoLeft();
goal.tipTop = goal.top - layArea[1] - 10;
tipsG.removeClass('layui-layer-TipsB').addClass('layui-layer-TipsT').css('border-right-color', config.tips[1]);
}, function(){ // 右
goal.tipLeft = goal.left + goal.width + 10;
goal.tipTop = goal.top;
tipsG.removeClass('layui-layer-TipsL').addClass('layui-layer-TipsR').css('border-bottom-color', config.tips[1]);
}, function(){ // 下
goal.autoLeft();
goal.tipTop = goal.top + goal.height + 10;
tipsG.removeClass('layui-layer-TipsT').addClass('layui-layer-TipsB').css('border-right-color', config.tips[1]);
}, function(){ // 左
goal.tipLeft = goal.left - layArea[0] - 10;
goal.tipTop = goal.top;
tipsG.removeClass('layui-layer-TipsR').addClass('layui-layer-TipsL').css('border-bottom-color', config.tips[1]);
}];
goal.where[guide-1]();
/* 8*2为小三角形占据的空间 */
if(guide === 1){
goal.top - (win.scrollTop() + layArea[1] + 8*2) < 0 && goal.where[2]();
} else if(guide === 2){
win.width() - (goal.left + goal.width + layArea[0] + 8*2) > 0 || goal.where[3]()
} else if(guide === 3){
(goal.top - win.scrollTop() + goal.height + layArea[1] + 8*2) - win.height() > 0 && goal.where[0]();
} else if(guide === 4){
layArea[0] + 8*2 - goal.left > 0 && goal.where[1]()
}
layero.find('.'+doms[5]).css({
'background-color': config.tips[1],
'padding-right': (config.closeBtn ? '30px' : '')
});
layero.css({
left: goal.tipLeft - (config.fixed ? win.scrollLeft() : 0),
top: goal.tipTop - (config.fixed ? win.scrollTop() : 0)
});
}
// 拖拽层
Class.pt.move = function(){
var that = this
,config = that.config
,_DOC = $(document)
,layero = that.layero
,moveElem = layero.find(config.move)
,resizeElem = layero.find('.layui-layer-resize')
,dict = {};
if(config.move){
moveElem.css('cursor', 'move');
}
moveElem.on('mousedown', function(e){
e.preventDefault();
if(config.move){
dict.moveStart = true;
dict.offset = [
e.clientX - parseFloat(layero.css('left'))
,e.clientY - parseFloat(layero.css('top'))
];
ready.moveElem.css('cursor', 'move').show();
}
});
resizeElem.on('mousedown', function(e){
e.preventDefault();
dict.resizeStart = true;
dict.offset = [e.clientX, e.clientY];
dict.area = [
layero.outerWidth()
,layero.outerHeight()
];
ready.moveElem.css('cursor', 'se-resize').show();
});
_DOC.on('mousemove', function(e){
// 拖拽移动
if(dict.moveStart){
var X = e.clientX - dict.offset[0]
,Y = e.clientY - dict.offset[1]
,fixed = layero.css('position') === 'fixed';
e.preventDefault();
dict.stX = fixed ? 0 : win.scrollLeft();
dict.stY = fixed ? 0 : win.scrollTop();
// 控制元素不被拖出窗口外
if(!config.moveOut){
var setRig = win.width() - layero.outerWidth() + dict.stX
,setBot = win.height() - layero.outerHeight() + dict.stY;
X < dict.stX && (X = dict.stX);
X > setRig && (X = setRig);
Y < dict.stY && (Y = dict.stY);
Y > setBot && (Y = setBot);
}
layero.css({
left: X
,top: Y
});
}
// Resize
if(config.resize && dict.resizeStart){
var X = e.clientX - dict.offset[0]
,Y = e.clientY - dict.offset[1];
e.preventDefault();
layer.style(that.index, {
width: dict.area[0] + X
,height: dict.area[1] + Y
})
dict.isResize = true;
config.resizing && config.resizing(layero);
}
}).on('mouseup', function(e){
if(dict.moveStart){
delete dict.moveStart;
ready.moveElem.hide();
config.moveEnd && config.moveEnd(layero);
}
if(dict.resizeStart){
delete dict.resizeStart;
ready.moveElem.hide();
}
});
return that;
};
Class.pt.callback = function(){
var that = this, layero = that.layero, config = that.config;
that.openLayer();
if(config.success){
if(config.type == 2){
layero.find('iframe').on('load', function(){
config.success(layero, that.index);
});
} else {
config.success(layero, that.index);
}
}
layer.ie == 6 && that.IE6(layero);
// 按钮
layero.find('.'+ doms[6]).children('a').on('click', function(){
var index = $(this).index();
if(index === 0){
if(config.yes){
config.yes(that.index, layero)
} else if(config['btn1']){
config['btn1'](that.index, layero)
} else {
layer.close(that.index);
}
} else {
var close = config['btn'+(index+1)] && config['btn'+(index+1)](that.index, layero);
close === false || layer.close(that.index);
}
});
// 取消
function cancel(){
var close = config.cancel && config.cancel(that.index, layero);
close === false || layer.close(that.index);
}
// 右上角关闭回调
layero.find('.'+ doms[7]).on('click', cancel);
// 点遮罩关闭
if(config.shadeClose){
$('#layui-layer-shade'+ that.index).on('click', function(){
layer.close(that.index);
});
}
// 最小化
layero.find('.layui-layer-min').on('click', function(){
var min = config.min && config.min(layero);
min === false || layer.min(that.index, config);
});
// 全屏/还原
layero.find('.layui-layer-max').on('click', function(){
if($(this).hasClass('layui-layer-maxmin')){
layer.restore(that.index);
config.restore && config.restore(layero);
} else {
layer.full(that.index, config);
setTimeout(function(){
config.full && config.full(layero);
}, 100);
}
});
config.end && (ready.end[that.index] = config.end);
};
// for ie6 恢复select
ready.reselect = function(){
$.each($('select'), function(index , value){
var sthis = $(this);
if(!sthis.parents('.'+doms[0])[0]){
(sthis.attr('layer') == 1 && $('.'+doms[0]).length < 1) && sthis.removeAttr('layer').show();
}
sthis = null;
});
};
Class.pt.IE6 = function(layero){
// 隐藏select
$('select').each(function(index , value){
var sthis = $(this);
if(!sthis.parents('.'+doms[0])[0]){
sthis.css('display') === 'none' || sthis.attr({'layer' : '1'}).hide();
}
sthis = null;
});
};
// 需依赖原型的对外方法
Class.pt.openLayer = function(){
var that = this;
// 置顶当前窗口
layer.zIndex = that.config.zIndex;
layer.setTop = function(layero){
var setZindex = function(){
layer.zIndex++;
layero.css('z-index', layer.zIndex + 1);
};
layer.zIndex = parseInt(layero[0].style.zIndex);
layero.on('mousedown', setZindex);
return layer.zIndex;
};
};
ready.record = function(layero){
var area = [
layero.width(),
layero.height(),
layero.position().top,
layero.position().left + parseFloat(layero.css('margin-left'))
];
layero.find('.layui-layer-max').addClass('layui-layer-maxmin');
layero.attr({area: area});
};
ready.rescollbar = function(index){
if(doms.html.attr('layer-full') == index){
if(doms.html[0].style.removeProperty){
doms.html[0].style.removeProperty('overflow');
} else {
doms.html[0].style.removeAttribute('overflow');
}
doms.html.removeAttr('layer-full');
}
};
/** 内置成员 */
window.layer = layer;
// 获取子iframe的DOM
layer.getChildFrame = function(selector, index){
index = index || $('.'+doms[4]).attr('times');
return $('#'+ doms[0] + index).find('iframe').contents().find(selector);
};
// 得到当前iframe层的索引，子iframe时使用
layer.getFrameIndex = function(name){
return $('#'+ name).parents('.'+doms[4]).attr('times');
};
// iframe层自适应宽高
layer.iframeAuto = function(index){
if(!index) return;
var heg = layer.getChildFrame('html', index).outerHeight();
var layero = $('#'+ doms[0] + index);
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
layero.css({height: heg + titHeight + btnHeight});
layero.find('iframe').css({height: heg});
};
// 重置iframe url
layer.iframeSrc = function(index, url){
$('#'+ doms[0] + index).find('iframe').attr('src', url);
};
// 设定层的样式
layer.style = function(index, options, limit){
var layero = $('#'+ doms[0] + index)
,contElem = layero.find('.layui-layer-content')
,type = layero.attr('type')
,titHeight = layero.find(doms[1]).outerHeight() || 0
,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0
,minLeft = layero.attr('minLeft');
if(type === ready.type[3] || type === ready.type[4]){
return;
}
if(!limit){
if(parseFloat(options.width) <= 260){
options.width = 260;
};
if(parseFloat(options.height) - titHeight - btnHeight <= 64){
options.height = 64 + titHeight + btnHeight;
};
}
layero.css(options);
btnHeight = layero.find('.'+doms[6]).outerHeight();
if(type === ready.type[2]){
layero.find('iframe').css({
height: parseFloat(options.height) - titHeight - btnHeight
});
} else {
contElem.css({
height: parseFloat(options.height) - titHeight - btnHeight
- parseFloat(contElem.css('padding-top'))
- parseFloat(contElem.css('padding-bottom'))
})
}
};
// 最小化
layer.min = function(index, options){
var layero = $('#'+ doms[0] + index)
,titHeight = layero.find(doms[1]).outerHeight() || 0
,left = layero.attr('minLeft') || (181*ready.minIndex)+'px'
,position = layero.css('position');
ready.record(layero);
if(ready.minLeft[0]){
left = ready.minLeft[0];
ready.minLeft.shift();
}
layero.attr('position', position);
layer.style(index, {
width: 180
,height: titHeight
,left: left
,top: win.height() - titHeight
,position: 'fixed'
,overflow: 'hidden'
}, true);
layero.find('.layui-layer-min').hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
if(!layero.attr('minLeft')){
ready.minIndex++;
}
layero.attr('minLeft', left);
};
// 还原
layer.restore = function(index){
var layero = $('#'+ doms[0] + index), area = layero.attr('area').split(',');
var type = layero.attr('type');
layer.style(index, {
width: parseFloat(area[0]),
height: parseFloat(area[1]),
top: parseFloat(area[2]),
left: parseFloat(area[3]),
position: layero.attr('position'),
overflow: 'visible'
}, true);
layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
layero.find('.layui-layer-min').show();
layero.attr('type') === 'page' && layero.find(doms[4]).show();
ready.rescollbar(index);
};
// 全屏
layer.full = function(index){
var layero = $('#'+ doms[0] + index), timer;
ready.record(layero);
if(!doms.html.attr('layer-full')){
doms.html.css('overflow','hidden').attr('layer-full', index);
}
clearTimeout(timer);
timer = setTimeout(function(){
var isfix = layero.css('position') === 'fixed';
layer.style(index, {
top: isfix ? 0 : win.scrollTop(),
left: isfix ? 0 : win.scrollLeft(),
width: win.width(),
height: win.height()
}, true);
layero.find('.layui-layer-min').hide();
}, 100);
};
// 改变title
layer.title = function(name, index){
var title = $('#'+ doms[0] + (index||layer.index)).find(doms[1]);
title.html(name);
};
// 关闭layer总方法
layer.close = function(index){
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
if(!layero[0]) return;
var WRAP = 'layui-layer-wrap', remove = function(){
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
for(var i = 0; i < 2; i++){
wrap.unwrap();
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else {
// 低版本IE 回收 iframe
if(type === ready.type[2]){
try {
var iframe = $('#'+doms[4]+index)[0];
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
layero.find('.'+doms[5])[0].removeChild(iframe);
} catch(e){}
}
layero[0].innerHTML = '';
layero.remove();
}
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
};
if(layero.data('isOutAnim')){
layero.addClass('layer-anim '+ closeAnim);
}
$('#layui-layer-moves, #layui-layer-shade' + index).remove();
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
if(layero.attr('minLeft')){
ready.minIndex--;
ready.minLeft.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
remove()
} else {
setTimeout(function(){
remove();
}, 200);
}
};
// 关闭所有层
layer.closeAll = function(type){
$.each($('.'+doms[0]), function(){
var othis = $(this);
var is = type ? (othis.attr('type') === type) : 1;
is && layer.close(othis.attr('times'));
is = null;
});
};
/**
拓展模块，layui开始合并在一起
*/
var cache = layer.cache||{}, skin = function(type){
return (cache.skin ? (' ' + cache.skin + ' ' + cache.skin + '-'+type) : '');
};
// 仿系统prompt
layer.prompt = function(options, yes){
var style = '';
options = options || {};
if(typeof options === 'function') yes = options;
if(options.area){
var area = options.area;
style = 'style="width: '+ area[0] +'; height: '+ area[1] + ';"';
delete options.area;
}
var prompt, content = options.formType == 2 ? '<textarea class="layui-layer-input"' + style +'></textarea>' : function(){
return '<input type="'+ (options.formType == 1 ? 'password' : 'text') +'" class="layui-layer-input">';
}();
var success = options.success;
delete options.success;
return layer.open($.extend({
type: 1
,btn: ['确定','取消']
,content: content
,skin: 'layui-layer-prompt' + skin('prompt')
,maxWidth: win.width()
,success: function(layero){
prompt = layero.find('.layui-layer-input');
prompt.val(options.value || '').focus();
typeof success === 'function' && success(layero);
}
,resize: false
,yes: function(index){
var value = prompt.val();
if(value === ''){
prompt.focus();
} else if(value.length > (options.maxlength||500)) {
layer.tips('最多输入'+ (options.maxlength || 500) +'个字数', prompt, {tips: 1});
} else {
yes && yes(value, index, prompt);
}
}
}, options));
};
// tab层
layer.tab = function(options){
options = options || {};
var tab = options.tab || {}
,THIS = 'layui-this'
,success = options.success;
delete options.success;
return layer.open($.extend({
type: 1,
skin: 'layui-layer-tab' + skin('tab'),
resize: false,
title: function(){
var len = tab.length, ii = 1, str = '';
if(len > 0){
str = '<span class="'+ THIS +'">'+ tab[0].title +'</span>';
for(; ii < len; ii++){
str += '<span>'+ tab[ii].title +'</span>';
}
}
return str;
}(),
content: '<ul class="layui-layer-tabmain">'+ function(){
var len = tab.length, ii = 1, str = '';
if(len > 0){
str = '<li class="layui-layer-tabli '+ THIS +'">'+ (tab[0].content || 'no content') +'</li>';
for(; ii < len; ii++){
str += '<li class="layui-layer-tabli">'+ (tab[ii].content || 'no content') +'</li>';
}
}
return str;
}() +'</ul>',
success: function(layero){
var btn = layero.find('.layui-layer-title').children();
var main = layero.find('.layui-layer-tabmain').children();
btn.on('mousedown', function(e){
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
var othis = $(this), index = othis.index();
othis.addClass(THIS).siblings().removeClass(THIS);
main.eq(index).show().siblings().hide();
typeof options.change === 'function' && options.change(index);
});
typeof success === 'function' && success(layero);
}
}, options));
};
// 相册层
layer.photos = function(options, loop, key){
var dict = {};
options = options || {};
if(!options.photos) return;
var type = options.photos.constructor === Object;
var photos = type ? options.photos : {}, data = photos.data || [];
var start = photos.start || 0;
dict.imgIndex = (start|0) + 1;
options.img = options.img || 'img';
var success = options.success;
delete options.success;
if(!type){ // 页面直接获取
var parent = $(options.photos), pushData = function(){
data = [];
parent.find(options.img).each(function(index){
var othis = $(this);
othis.attr('layer-index', index);
data.push({
alt: othis.attr('alt'),
pid: othis.attr('layer-pid'),
src: othis.attr('layer-src') || othis.attr('src'),
thumb: othis.attr('src')
});
})
};
pushData();
if (data.length === 0) return;
loop || parent.on('click', options.img, function(){
var othis = $(this), index = othis.attr('layer-index');
layer.photos($.extend(options, {
photos: {
start: index,
data: data,
tab: options.tab
},
full: options.full
}), true);
pushData();
})
// 不直接弹出
if(!loop) return;
} else if (data.length === 0){
return layer.msg('没有图片');
}
// 上一张
dict.imgprev = function(key){
dict.imgIndex--;
if(dict.imgIndex < 1){
dict.imgIndex = data.length;
}
dict.tabimg(key);
};
// 下一张
dict.imgnext = function(key,errorMsg){
dict.imgIndex++;
if(dict.imgIndex > data.length){
dict.imgIndex = 1;
if (errorMsg) {return};
}
dict.tabimg(key)
};
// 方向键
dict.keyup = function(event){
if(!dict.end){
var code = event.keyCode;
event.preventDefault();
if(code === 37){
dict.imgprev(true);
} else if(code === 39) {
dict.imgnext(true);
} else if(code === 27) {
layer.close(dict.index);
}
}
}
// 切换
dict.tabimg = function(key){
if(data.length <= 1) return;
photos.start = dict.imgIndex - 1;
layer.close(dict.index);
return layer.photos(options, true, key);
setTimeout(function(){
layer.photos(options, true, key);
}, 200);
}
// 一些动作
dict.event = function(){
dict.bigimg.hover(function(){
dict.imgsee.show();
}, function(){
dict.imgsee.hide();
});
dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){
event.preventDefault();
dict.imgprev();
});
dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){
event.preventDefault();
dict.imgnext();
});
$(document).on('keyup', dict.keyup);
};
// 图片预加载
function loadImage(url, callback, error) {
var img = new Image();
img.src = url;
if(img.complete){
return callback(img);
}
img.onload = function(){
img.onload = null;
callback(img);
};
img.onerror = function(e){
img.onerror = null;
error(e);
};
};
dict.loadi = layer.load(1, {
shade: 'shade' in options ? false : 0.9,
scrollbar: false
});
loadImage(data[start].src, function(img){
layer.close(dict.loadi);
dict.index = layer.open($.extend({
type: 1,
id: 'layui-layer-photos',
area: function(){
var imgarea = [img.width, img.height];
var winarea = [$(window).width() - 100, $(window).height() - 100];
// 如果 实际图片的宽或者高比 屏幕大（那么进行缩放）
if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){
var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];// 取宽度缩放比例、高度缩放比例
if(wh[0] > wh[1]){// 取缩放比例最大的进行缩放
imgarea[0] = imgarea[0]/wh[0];
imgarea[1] = imgarea[1]/wh[0];
} else if(wh[0] < wh[1]){
imgarea[0] = imgarea[0]/wh[1];
imgarea[1] = imgarea[1]/wh[1];
}
}
return [imgarea[0]+'px', imgarea[1]+'px'];
}(),
title: false,
shade: 0.9,
shadeClose: true,
closeBtn: false,
move: '.layui-layer-phimg img',
moveType: 1,
scrollbar: false,
moveOut: true,
// anim: Math.random()*5|0,
isOutAnim: false,
skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">'
+'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
+'<div class="layui-layer-imgsee">'
+(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : '')
+'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt||'') +'</a><em>'+ dict.imgIndex +'/'+ data.length +'</em></span></div>'
+'</div>'
+'</div>',
success: function(layero, index){
dict.bigimg = layero.find('.layui-layer-phimg');
dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar');
dict.event(layero);
options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero);
}, end: function(){
dict.end = true;
$(document).off('keyup', dict.keyup);
}
}, options));
}, function(){
layer.close(dict.loadi);
layer.msg('当前图片地址异常<br>是否继续查看下一张？', {
time: 30000,
btn: ['下一张', '不看了'],
yes: function(){
data.length > 1 && dict.imgnext(true,true);
}
});
});
};
// 主入口
ready.run = function(_$){
$ = _$;
win = $(window);
doms.html = $('html');
layer.open = function(deliver){
var o = new Class(deliver);
return o.index;
};
};
// 加载方式
window.layui && layui.define ? (
layer.ready()
,layui.define('jquery', function(exports){ // layui加载
layer.path = layui.cache.dir;
ready.run(layui.$);
// 暴露模块
window.layer = layer;
exports('layer', layer);
})
) : (
(typeof define === 'function' && define.amd) ? define(['jquery'], function(){ // requirejs加载
ready.run(window.jQuery);
return layer;
}) : function(){ // 普通script标签加载
ready.run(window.jQuery);
layer.ready();
}()
);
}(window);
laypage.js
/**
@Name : layui.laypage 分页组件
@Author：贤心
@License：MIT
*/
layui.define(function(exports){
"use strict";
var doc = document
,id = 'getElementById'
,tag = 'getElementsByTagName'
// 字符常量
,MOD_NAME = 'laypage', DISABLED = 'layui-disabled'
// 构造器
,Class = function(options){
var that = this;
that.config = options || {};
that.config.index = ++laypage.index;
that.render(true);
};
// 判断传入的容器类型
Class.prototype.type = function(){
var config = this.config;
if(typeof config.elem === 'object'){
return config.elem.length === undefined ? 2 : 3;
}
};
// 分页视图
Class.prototype.view = function(){
var that = this
,config = that.config
,groups = config.groups = 'groups' in config ? (config.groups|0) : 5; // 连续页码个数
// 排版
config.layout = typeof config.layout === 'object'
? config.layout
: ['prev', 'page', 'next'];
config.count = config.count|0; // 数据总数
config.curr = (config.curr|0) || 1; // 当前页
// 每页条数的选择项
config.limits = typeof config.limits === 'object'
? config.limits
: [10, 20, 30, 40, 50];
config.limit = (config.limit|0) || 10; // 默认条数
// 总页数
config.pages = Math.ceil(config.count/config.limit) || 1;
// 当前页不能超过总页数
if(config.curr > config.pages){
config.curr = config.pages;
}
// 连续分页个数不能低于0且不能大于总页数
if(groups < 0){
groups = 1;
} else if (groups > config.pages){
groups = config.pages;
}
config.prev = 'prev' in config ? config.prev : '上一页'; // 上一页文本
config.next = 'next' in config ? config.next : '下一页'; // 下一页文本
// 计算当前组
var index = config.pages > groups
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) )
: 1
// 视图片段
,views = {
// 上一页
prev: function(){
return config.prev
? '<a href="javascript:;" class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>'
: '';
}()
// 页码
,page: function(){
var pager = [];
// 数据量为0时，不输出页码
if(config.count < 1){
return '';
}
// 首页
if(index > 1 && config.first !== false && groups !== 0){
pager.push('<a href="javascript:;" class="layui-laypage-first" data-page="1" title="首页">'+ (config.first || 1) +'</a>');
}
// 计算当前页码组的起始页
var halve = Math.floor((groups-1)/2) // 页码数等分
,start = index > 1 ? config.curr - halve : 1
,end = index > 1 ? (function(){
var max = config.curr + (groups - halve - 1);
return max > config.pages ? config.pages : max;
}()) : groups;
// 防止最后一组出现“不规定”的连续页码数
if(end - start < groups - 1){
start = end - groups + 1;
}
// 输出左分割符
if(config.first !== false && start > 2){
pager.push('<span class="layui-laypage-spr">…</span>')
}
// 输出连续页码
for(; start <= end; start++){
if(start === config.curr){
// 当前页
pager.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+ (/^#/.test(config.theme) ? 'style="background-color:'+ config.theme +';"' : '') +'></em><em>'+ start +'</em></span>');
} else {
pager.push('<a href="javascript:;" data-page="'+ start +'">'+ start +'</a>');
}
}
// 输出输出右分隔符 & 末页
if(config.pages > groups && config.pages > end && config.last !== false){
if(end + 1 < config.pages){
pager.push('<span class="layui-laypage-spr">…</span>');
}
if(groups !== 0){
pager.push('<a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="'+ config.pages +'">'+ (config.last || config.pages) +'</a>');
}
}
return pager.join('');
}()
// 下一页
,next: function(){
return config.next
? '<a href="javascript:;" class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>'
: '';
}()
// 数据总数
,count: '<span class="layui-laypage-count">共 '+ config.count +' 条</span>'
// 每页条数
,limit: function(){
var options = ['<span class="layui-laypage-limits"><select lay-ignore>'];
layui.each(config.limits, function(index, item){
options.push(
'<option value="'+ item +'"'
+(item === config.limit ? 'selected' : '')
+'>'+ item +' 条/页</option>'
);
});
return options.join('') +'</select></span>';
}()
// 刷新当前页
,refresh: ['<a href="javascript:;" data-page="'+ config.curr +'" class="layui-laypage-refresh">'
,'<i class="layui-icon layui-icon-refresh"></i>'
,'</a>'].join('')
// 跳页区域
,skip: function(){
return ['<span class="layui-laypage-skip">到第'
,'<input type="text" min="1" value="'+ config.curr +'" class="layui-input">'
,'页<button type="button" class="layui-laypage-btn">确定</button>'
,'</span>'].join('');
}()
};
return ['<div class="layui-box layui-laypage layui-laypage-'+ (config.theme ? (
/^#/.test(config.theme) ? 'molv' : config.theme
) : 'default') +'" id="layui-laypage-'+ config.index +'">'
,function(){
var plate = [];
layui.each(config.layout, function(index, item){
if(views[item]){
plate.push(views[item])
}
});
return plate.join('');
}()
,'</div>'].join('');
};
// 跳页的回调
Class.prototype.jump = function(elem, isskip){
if(!elem) return;
var that = this
,config = that.config
,childs = elem.children
,btn = elem[tag]('button')[0]
,input = elem[tag]('input')[0]
,select = elem[tag]('select')[0]
,skip = function(){
var curr = input.value.replace(/\s|\D/g, '')|0;
if(curr){
config.curr = curr;
that.render();
}
};
if(isskip) return skip();
// 页码
for(var i = 0, len = childs.length; i < len; i++){
if(childs[i].nodeName.toLowerCase() === 'a'){
laypage.on(childs[i], 'click', function(){
var curr = this.getAttribute('data-page')|0;
if(curr < 1 || curr > config.pages) return;
config.curr = curr;
that.render();
});
}
}
// 条数
if(select){
laypage.on(select, 'change', function(){
var value = this.value;
if(config.curr*value > config.count){
config.curr = Math.ceil(config.count/value);
}
config.limit = value;
that.render();
});
}
// 确定
if(btn){
laypage.on(btn, 'click', function(){
skip();
});
}
};
// 输入页数字控制
Class.prototype.skip = function(elem){
if(!elem) return;
var that = this, input = elem[tag]('input')[0];
if(!input) return;
laypage.on(input, 'keyup', function(e){
var value = this.value
,keyCode = e.keyCode;
if(/^(37|38|39|40)$/.test(keyCode)) return;
if(/\D/.test(value)){
this.value = value.replace(/\D/, '');
}
if(keyCode === 13){
that.jump(elem, true)
}
});
};
// 渲染分页
Class.prototype.render = function(load){
var that = this
,config = that.config
,type = that.type()
,view = that.view();
if(type === 2){
config.elem && (config.elem.innerHTML = view);
} else if(type === 3){
config.elem.html(view);
} else {
if(doc[id](config.elem)){
doc[id](config.elem).innerHTML = view;
}
}
config.jump && config.jump(config, load);
var elem = doc[id]('layui-laypage-' + config.index);
that.jump(elem);
if(config.hash && !load){
location.hash = '!'+ config.hash +'='+ config.curr;
}
that.skip(elem);
};
// 外部接口
var laypage = {
// 分页渲染
render: function(options){
var o = new Class(options);
return o.index;
}
,index: layui.laypage ? (layui.laypage.index + 10000) : 0
,on: function(elem, even, fn){
elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ // for ie
e.target = e.srcElement;
fn.call(elem, e);
}) : elem.addEventListener(even, fn, false);
return this;
}
}
exports(MOD_NAME, laypage);
});laytpl.js
/**
@Name : layui.laytpl 模板引擎
@Author：贤心
@License：MIT
*/
layui.define(function(exports){
"use strict";
var config = {
open: '{{',
close: '}}'
};
var tool = {
exp: function(str){
return new RegExp(str, 'g');
},
// 匹配满足规则内容
query: function(type, _, __){
var types = [
'#([\\s\\S])+?', // js语句
'([^{#}])*?' // 普通字段
][type || 0];
return exp((_||'') + config.open + types + config.close + (__||''));
},
escape: function(html){
return String(html||'').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');
},
error: function(e, tplog){
var error = 'Laytpl Error：';
typeof console === 'object' && console.error(error + e + '\n'+ (tplog || ''));
return error + e;
}
};
var exp = tool.exp, Tpl = function(tpl){
this.tpl = tpl;
};
Tpl.pt = Tpl.prototype;
window.errors = 0;
// 编译模版
Tpl.pt.parse = function(tpl, data){
var that = this, tplog = tpl;
var jss = exp('^'+config.open+'#', ''), jsse = exp(config.close+'$', '');
tpl = tpl.replace(/\s+|\r|\t|\n/g, ' ')
.replace(exp(config.open+'#'), config.open+'# ')
.replace(exp(config.close+'}'), '} '+config.close).replace(/\\/g, '\\\\')
// 不匹配指定区域的内容
.replace(exp(config.open + '!(.+?)!' + config.close), function(str){
str = str.replace(exp('^'+ config.open + '!'), '')
.replace(exp('!'+ config.close), '')
.replace(exp(config.open + '|' + config.close), function(tag){
return tag.replace(/(.)/g, '\\$1')
});
return str
})
// 匹配JS规则内容
.replace(/(?="|')/g, '\\').replace(tool.query(), function(str){
str = str.replace(jss, '').replace(jsse, '');
return '";' + str.replace(/\\/g, '') + ';view+="';
})
// 匹配普通字段
.replace(tool.query(1), function(str){
var start = '"+(';
if(str.replace(/\s/g, '') === config.open+config.close){
return '';
}
str = str.replace(exp(config.open+'|'+config.close), '');
if(/^=/.test(str)){
str = str.replace(/^=/, '');
start = '"+_escape_(';
}
return start + str.replace(/\\/g, '') + ')+"';
});
tpl = '"use strict";var view = "' + tpl + '";return view;';
try{
that.cache = tpl = new Function('d, _escape_', tpl);
return tpl(data, tool.escape);
} catch(e){
delete that.cache;
return tool.error(e, tplog);
}
};
Tpl.pt.render = function(data, callback){
var that = this, tpl;
if(!data) return tool.error('no data');
tpl = that.cache ? that.cache(data, tool.escape) : that.parse(that.tpl, data);
if(!callback) return tpl;
callback(tpl);
};
var laytpl = function(tpl){
if(typeof tpl !== 'string') return tool.error('Template not found');
return new Tpl(tpl);
};
laytpl.config = function(options){
options = options || {};
for(var i in options){
config[i] = options[i];
}
};
laytpl.v = '1.2.0';
exports('laytpl', laytpl);
});mobile.js
/**
@Name：layui 移动模块入口 | 构建后则为移动模块集合
@Author：贤心
@License：MIT
*/
if(!layui['layui.mobile']){
layui.config({
base: layui.cache.dir + 'lay/modules/mobile/'
}).extend({
'layer-mobile': 'layer-mobile'
,'zepto': 'zepto'
,'upload-mobile': 'upload-mobile'
,'layim-mobile': 'layim-mobile'
});
}
layui.define([
'layer-mobile'
,'zepto'
,'layim-mobile'
], function(exports){
exports('mobile', {
layer: layui['layer-mobile'] // 弹层
,layim: layui['layim-mobile'] // WebIM
});
});rate.js
/**
@Title: layui.rate 评分评星
@Author: star1029
@License：MIT
*/
layui.define('jquery',function(exports){
"use strict";
var $ = layui.jquery
// 外部接口
,rate = {
config: {}
,index: layui.rate ? (layui.rate.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);
}
}
// 操作当前实例
,thisRate = function(){
var that = this
,options = that.config;
return {
setvalue: function(value){
that.setvalue.call(that, value);
}
,config: options
}
}
// 字符常量
,MOD_NAME = 'rate',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half'
,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half'
// 构造器
,Class = function(options){
var that = this;
that.index = ++rate.index;
that.config = $.extend({}, that.config, rate.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
length: 5 // 初始长度
,text: false // 是否显示评分等级
,readonly: false // 是否只读
,half: false // 是否可以半星
,value: 0 // 星星选中个数
,theme: ''
};
// 评分渲染
Class.prototype.render = function(){
var that = this
,options = that.config
,style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
options.elem = $(options.elem);
// 如果没有选择半星的属性，却给了小数的数值，统一向上或向下取整
if(parseInt(options.value) !== options.value){
if(!options.half){
options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value)
}
}
// 组件模板
var temp = '<ul class="layui-rate" '+ (options.readonly ? 'readonly' : '') +'>';
for(var i = 1;i <= options.length;i++){
var item = '<li class="layui-inline"><i class="layui-icon '
+ (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
+ '" '+ style +'></i></li>';
if(options.half){
if(parseInt(options.value) !== options.value){
if(i == Math.ceil(options.value)){
temp = temp + '<li><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
}else{
temp = temp + item
}
}else{
temp = temp + item
}
}else{
temp = temp +item;
}
}
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
// 开始插入替代元素
var othis = options.elem
,hasRender = othis.next('.' + ELEM_VIEW);
// 生成替代元素
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
that.elemTemp = $(temp);
options.span = that.elemTemp.next('span');
options.setText && options.setText(options.value);
othis.html(that.elemTemp);
othis.addClass("layui-inline");
// 如果不是只读，那么进行触控事件
if(!options.readonly) that.action();
};
// 评分重置
Class.prototype.setvalue = function(value){
var that = this
,options = that.config ;
options.value = value ;
that.render();
};
// li触控事件
Class.prototype.action = function(){
var that = this
,options = that.config
,_ul = that.elemTemp
,wide = _ul.find("i").width();
_ul.children("li").each(function(index){
var ind = index + 1
,othis = $(this);
// 点击
othis.on('click', function(e){
// 将当前点击li的索引值赋给value
options.value = ind;
if(options.half){
// 获取鼠标在li上的位置
var x = e.pageX - $(this).offset().left;
if(x <= wide / 2){
options.value = options.value - 0.5;
}
}
if(options.text) _ul.next("span").text(options.value + "星");
options.choose && options.choose(options.value);
options.setText && options.setText(options.value);
});
// 移入
othis.on('mousemove', function(e){
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + ind + ")").each(function(){
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
});
// 如果设置可选半星，那么判断鼠标相对li的位置
if(options.half){
var x = e.pageX - $(this).offset().left;
if(x <= wide / 2){
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
}
}
})
// 移出
othis.on('mouseleave', function(){
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
});
// 如果设置可选半星，根据分数判断是否有半星
if(options.half){
if(parseInt(options.value) !== options.value){
_ul.children("li:eq(" + Math.floor(options.value) + ")").children("i").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE)
}
}
})
})
};
// 事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
};
// 核心入口
rate.render = function(options){
var inst = new Class(options);
return thisRate.call(inst);
};
exports(MOD_NAME, rate);
})slider.js
/**
@Title: layui.slider 滑块
@Author: star1029
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.jquery
// 外部接口
,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);
}
}
// 操作当前实例
,thisSlider = function(){
var that = this
,options = that.config;
return {
setValue: function(value, index){ // 设置值
return that.slide('set', value, index || 0);
}
,config: options
}
}
// 字符常量
,MOD_NAME = 'slider', DISABLED = 'layui-disabled', 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', ELEM_HOVER = 'layui-slider-hover'
// 构造器
,Class = function(options){
var that = this;
that.index = ++slider.index;
that.config = $.extend({}, that.config, slider.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
type: 'default' // 滑块类型，垂直：vertical
,min: 0 // 最小值
,max: 100 // 最大值，默认100
,value: 0 // 初始值，默认为0
,step: 1 // 间隔值
,showstep: false // 间隔点开启
,tips: true // 文字提示，开启
,input: false // 输入框，关闭
,range: false // 范围选择，与输入框不能同时开启，默认关闭
,height: 200 // 配合 type:"vertical" 使用，默认200px
,disabled: false // 滑块禁用，默认关闭
,theme: '#009688' // 主题颜色
};
// 滑块渲染
Class.prototype.render = function(){
var that = this
,options = that.config;
// 间隔值不能小于 1
if(options.step < 1) options.step = 1;
// 最大值不能小于最小值
if(options.max < options.min) options.max = options.min + options.step;
// 判断是否开启双滑块
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 {
// 如果初始值是一个数组，则获取数组的最小值
if(typeof options.value == 'object'){
options.value = Math.min.apply(null, options.value);
}
// 初始值不能小于最小值且不能大于最大值
if(options.value < options.min) options.value = options.min;
if(options.value > options.max) options.value = options.max;
var scale = Math.floor((options.value - options.min) / (options.max - options.min) * 100) + '%';
};
// 如果禁用，颜色为统一的灰色
var theme = options.disabled ? '#c2c2c2' : options.theme;
// 滑块
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div>' : '') +
'<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></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.type === '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.type === 'vertical' ? 'bottom' : 'left') +':'+ step +'%"></div>'
}
};
that.elemTemp.append(item);
};
// 插入输入框
if(options.input && !options.range){
var elemInput = $('<div class="layui-slider-input layui-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.css("position","relative");
othis.append(elemInput);
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value);
if(options.type === 'vertical'){
elemInput.css({
left: 0
,top: -48
});
} else {
that.elemTemp.css("margin-right", elemInput.outerWidth() + 15);
}
};
// 给未禁止的滑块滑动事件
if(!options.disabled){
that.slide();
}else{
that.elemTemp.addClass(DISABLED);
that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED);
};
// 划过滑块显示数值
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
,tipsLeft = options.type === '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.type === 'vertical'){
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"});
}else{
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
};
}).on('mouseout', function(){
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
});
};
// 滑块滑动
Class.prototype.slide = function(setValue, value, i){
var that = this
,options = that.config
,sliderAct = that.elemTemp
,sliderWidth = function(){
return options.type === '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.type === 'vertical' ?'bottom':'left'), offsetValue + '%');
var firLeft = valueTo(sliderWrap[0].offsetLeft)
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
if(options.type === 'vertical'){
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
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 + '%');
};
firLeft = firLeft > 100 ? 100: firLeft;
secLeft = secLeft > 100 ? 100: secLeft;
var minLeft = Math.min(firLeft, secLeft)
,wrapWidth = Math.abs(firLeft - secLeft);
if(options.type === '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);
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);
// 如果开启范围选择，则返回数组值
if(options.range){
var arrValue = [
sliderWrap.eq(0).data('value')
,sliderWrap.eq(1).data('value')
];
if(arrValue[0] > arrValue[1]) arrValue.reverse(); // 如果前面的圆点超过了后面的圆点值，则调换顺序
}
// 回调
options.change && options.change(options.range ? arrValue : 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;
}
// 拖拽元素
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''))
,createMoveElem = function(move, up){
var upCall = function(){
up && up();
elemMove.remove();
};
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', move);
elemMove.on('mouseup', upCall).on('mouseleave', upCall);
};
// 动态赋值
if(setValue === 'set') return change(value, i);
// 滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
var othis = $(this);
othis.on('mousedown', function(e){
e = e || window.event;
var oldleft = othis.parent()[0].offsetLeft
,oldx = e.clientX;
if(options.type === 'vertical'){
oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
oldx = e.clientY;
};
var move = function(e){
e = e || window.event;
var left = oldleft + (options.type === '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);
othis.addClass(ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).show();
e.preventDefault();
};
var up = function(){
othis.removeClass(ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).hide();
};
createMoveElem(move, up)
});
});
// 点击滑块
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.type === '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.type === '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(){
var othis = $(this);
othis.children('.' + SLIDER_INPUT_BTN).fadeIn('fast');
}, function(){
var othis = $(this);
othis.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 - options.step < options.min
? options.min
: Number(inputValue) - options.step;
}else{
inputValue = Number(inputValue) + options.step > options.max
? options.max
: Number(inputValue) + options.step;
};
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step;
change(inputScale, 0);
});
});
// 获取输入框值
var getInputValue = function(){
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);
};
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
if(e.keyCode === 13){
e.preventDefault();
getInputValue.call(this);
}
}).on('change', getInputValue);
};
// 事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
};
// 核心入口
slider.render = function(options){
var inst = new Class(options);
return thisSlider.call(inst);
};
exports(MOD_NAME, slider);
})table.js
/**
@Name：layui.table 表格操作
@Author：贤心
@License：MIT
*/
layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
"use strict";
var $ = layui.$
,laytpl = layui.laytpl
,laypage = layui.laypage
,layer = layui.layer
,form = layui.form
,util = layui.util
,hint = layui.hint()
,device = layui.device()
// 外部接口
,table = {
config: {
checkName: 'LAY_CHECKED' // 是否选中状态的字段名
,indexName: 'LAY_TABLE_INDEX' // 下标索引名
} // 全局配置项
,cache: {} // 数据缓存
,index: layui.table ? (layui.table.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);
}
}
// 操作当前实例
,thisTable = function(){
var that = this
,options = that.config
,id = options.id || options.index;
if(id){
thisTable.that[id] = that; // 记录当前实例对象
thisTable.config[id] = options; // 记录当前实例配置项
}
return {
reload: function(options){
that.reload.call(that, options);
}
,setColsWidth: function(){
that.setColsWidth.call(that);
}
,resize: function(){ // 重置表格尺寸/结构
that.resize.call(that);
}
,config: options
}
}
// 获取当前实例配置项
,getThisTableConfig = function(id){
var config = thisTable.config[id];
if(!config) hint.error('The ID option was not found in the table instance');
return config || null;
}
// 字符常量
,MOD_NAME = 'table', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled', NONE = 'layui-none'
,ELEM_VIEW = 'layui-table-view', ELEM_TOOL = '.layui-table-tool', ELEM_BOX = '.layui-table-box', ELEM_INIT = '.layui-table-init', ELEM_HEADER = '.layui-table-header', ELEM_BODY = '.layui-table-body', ELEM_MAIN = '.layui-table-main', ELEM_FIXED = '.layui-table-fixed', ELEM_FIXL = '.layui-table-fixed-l', ELEM_FIXR = '.layui-table-fixed-r', ELEM_TOTAL = '.layui-table-total', ELEM_PAGE = '.layui-table-page', ELEM_SORT = '.layui-table-sort', ELEM_EDIT = 'layui-table-edit', ELEM_HOVER = 'layui-table-hover'
// thead区域模板
,TPL_HEADER = function(options){
var rowCols = '{{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}}';
options = options || {};
return ['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" '
,'{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>'
,'<thead>'
,'{{# layui.each(d.data.cols, function(i1, item1){ }}'
,'<tr>'
,'{{# layui.each(item1, function(i2, item2){ }}'
,'{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}'
,'{{# if(item2.fixed === "right"){ right = true; } }}'
,function(){
if(options.fixed && options.fixed !== 'right'){
return '{{# if(item2.fixed && item2.fixed !== "right"){ }}';
}
if(options.fixed === 'right'){
return '{{# if(item2.fixed === "right"){ }}';
}
return '';
}()
,'{{# var isSort = !(item2.colGroup) && item2.sort; }}'
,'<th data-field="{{ item2.field||i2 }}" data-key="{{d.index}}-{{i1}}-{{i2}}" {{# if( item2.parentKey){ }}data-parentkey="{{ item2.parentKey }}"{{# } }} {{# if(item2.minWidth){ }}data-minwidth="{{item2.minWidth}}"{{# } }} '+ rowCols +' {{# if(item2.unresize || item2.colGroup){ }}data-unresize="true"{{# } }} class="{{# if(item2.hide){ }}layui-hide{{# } }}{{# if(isSort){ }} layui-unselect{{# } }}{{# if(!item2.field){ }} layui-table-col-special{{# } }}">'
,'<div class="layui-table-cell laytable-cell-'
,'{{# if(item2.colGroup){ }}'
,'group'
,'{{# } else { }}'
,'{{d.index}}-{{i1}}-{{i2}}'
,'{{# if(item2.type !== "normal"){ }}'
,' laytable-cell-{{ item2.type }}'
,'{{# } }}'
,'{{# } }}'
,'" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}>'
,'{{# if(item2.type === "checkbox"){ }}' // 复选框
,'<input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}>'
,'{{# } else { }}'
,'<span>{{item2.title||""}}</span>'
,'{{# if(isSort){ }}'
,'<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span>'
,'{{# } }}'
,'{{# } }}'
,'</div>'
,'</th>'
,(options.fixed ? '{{# }; }}' : '')
,'{{# }); }}'
,'</tr>'
,'{{# }); }}'
,'</thead>'
,'</table>'].join('');
}
// tbody区域模板
,TPL_BODY = ['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" '
,'{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>'
,'<tbody></tbody>'
,'</table>'].join('')
// 主模板
,TPL_MAIN = ['<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" lay-id="{{ d.data.id }}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">'
,'{{# if(d.data.toolbar){ }}'
,'<div class="layui-table-tool">'
,'<div class="layui-table-tool-temp"></div>'
,'<div class="layui-table-tool-self"></div>'
,'</div>'
,'{{# } }}'
,'<div class="layui-table-box">'
,'{{# if(d.data.loading){ }}'
,'<div class="layui-table-init" style="background-color: #fff;">'
,'<i class="layui-icon layui-icon-loading layui-icon"></i>'
,'</div>'
,'{{# } }}'
,'{{# var left, right; }}'
,'<div class="layui-table-header">'
,TPL_HEADER()
,'</div>'
,'<div class="layui-table-body layui-table-main">'
,TPL_BODY
,'</div>'
,'{{# if(left){ }}'
,'<div class="layui-table-fixed layui-table-fixed-l">'
,'<div class="layui-table-header">'
,TPL_HEADER({fixed: true})
,'</div>'
,'<div class="layui-table-body">'
,TPL_BODY
,'</div>'
,'</div>'
,'{{# }; }}'
,'{{# if(right){ }}'
,'<div class="layui-table-fixed layui-table-fixed-r">'
,'<div class="layui-table-header">'
,TPL_HEADER({fixed: 'right'})
,'<div class="layui-table-mend"></div>'
,'</div>'
,'<div class="layui-table-body">'
,TPL_BODY
,'</div>'
,'</div>'
,'{{# }; }}'
,'</div>'
,'{{# if(d.data.totalRow){ }}'
,'<div class="layui-table-total">'
,'<table cellspacing="0" cellpadding="0" border="0" class="layui-table" '
,'{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>'
,'<tbody><tr><td><div class="layui-table-cell" style="visibility: hidden;">Total</div></td></tr></tbody>'
, '</table>'
,'</div>'
,'{{# } }}'
,'{{# if(d.data.page){ }}'
,'<div class="layui-table-page">'
,'<div id="layui-table-page{{d.index}}"></div>'
,'</div>'
,'{{# } }}'
,'<style>'
,'{{# layui.each(d.data.cols, function(i1, item1){'
,'layui.each(item1, function(i2, item2){ }}'
,'.laytable-cell-{{d.index}}-{{i1}}-{{i2}}{ '
,'{{# if(item2.width){ }}'
,'width: {{item2.width}}px;'
,'{{# } }}'
,' }'
,'{{# });'
,'}); }}'
,'</style>'
,'</div>'].join('')
,_WIN = $(window)
,_DOC = $(document)
// 构造器
,Class = function(options){
var that = this;
that.index = ++table.index;
that.config = $.extend({}, that.config, table.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
limit: 10 // 每页显示的数量
,loading: true // 请求数据时，是否显示loading
,cellMinWidth: 60 // 所有单元格默认最小宽度
,defaultToolbar: ['filter', 'exports', 'print'] // 工具栏右侧图标
,autoSort: true // 是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
,text: {
none: '无数据'
}
};
// 表格渲染
Class.prototype.render = function(){
var that = this
,options = that.config;
options.elem = $(options.elem);
options.where = options.where || {};
options.id = options.id || options.elem.attr('id') || that.index;
// 请求参数的自定义格式
options.request = $.extend({
pageName: 'page'
,limitName: 'limit'
}, options.request)
// 响应数据的自定义格式
options.response = $.extend({
statusName: 'code'
,statusCode: 0
,msgName: 'msg'
,dataName: 'data'
,countName: 'count'
}, options.response);
// 如果 page 传入 laypage 对象
if(typeof options.page === 'object'){
options.limit = options.page.limit || options.limit;
options.limits = options.page.limits || options.limits;
that.page = options.page.curr = options.page.curr || 1;
delete options.page.elem;
delete options.page.jump;
}
if(!options.elem[0]) return that;
// 高度铺满：full-差距值
if(options.height && /^full-\d+$/.test(options.height)){
that.fullHeightGap = options.height.split('-')[1];
options.height = _WIN.height() - that.fullHeightGap;
}
// 初始化一些参数
that.setInit();
// 开始插入替代元素
var othis = options.elem
,hasRender = othis.next('.' + ELEM_VIEW)
// 主容器
,reElem = that.elem = $(laytpl(TPL_MAIN).render({
VIEW_CLASS: ELEM_VIEW
,data: options
,index: that.index // 索引
}));
options.index = that.index;
// 生成替代元素
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem);
// 各级容器
that.layTool = reElem.find(ELEM_TOOL);
that.layBox = reElem.find(ELEM_BOX);
that.layHeader = reElem.find(ELEM_HEADER);
that.layMain = reElem.find(ELEM_MAIN);
that.layBody = reElem.find(ELEM_BODY);
that.layFixed = reElem.find(ELEM_FIXED);
that.layFixLeft = reElem.find(ELEM_FIXL);
that.layFixRight = reElem.find(ELEM_FIXR);
that.layTotal = reElem.find(ELEM_TOTAL);
that.layPage = reElem.find(ELEM_PAGE);
// 初始化工具栏
that.renderToolbar();
// 让表格平铺
that.fullSize();
// 如果多级表头，则填补表头高度
if(options.cols.length > 1){
// 补全高度
var th = that.layFixed.find(ELEM_HEADER).find('th');
th.height(that.layHeader.height() - 1 - parseFloat(th.css('padding-top')) - parseFloat(th.css('padding-bottom')));
}
that.pullData(that.page); // 请求数据
that.events(); // 事件
};
// 根据列类型，定制化参数
Class.prototype.initOpts = function(item){
var that = this
,options = that.config
,initWidth = {
checkbox: 48
,radio: 48
,space: 15
,numbers: 40
};
// 让 type 参数兼容旧版本
if(item.checkbox) item.type = "checkbox";
if(item.space) item.type = "space";
if(!item.type) item.type = "normal";
if(item.type !== "normal"){
item.unresize = true;
item.width = item.width || initWidth[item.type];
}
};
// 初始化一些参数
Class.prototype.setInit = function(type){
var that = this
,options = that.config;
options.clientWidth = options.width || function(){ // 获取容器宽度
// 如果父元素宽度为0（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止
var getWidth = function(parent){
var width, isNone;
parent = parent || options.elem.parent()
width = parent.width();
try {
isNone = parent.css('display') === 'none';
} catch(e){}
if(parent[0] && (!width || isNone)) return getWidth(parent.parent());
return width;
};
return getWidth();
}();
if(type === 'width') return options.clientWidth;
// 初始化列参数
layui.each(options.cols, function(i1, item1){
layui.each(item1, function(i2, item2){
// 如果列参数为空，则移除
if(!item2){
item1.splice(i2, 1);
return;
}
item2.key = i1 + '-' + i2;
item2.hide = item2.hide || false;
// 设置列的父列索引
// 如果是组合列，则捕获对应的子列
if(item2.colGroup || item2.colspan > 1){
var childIndex = 0;
layui.each(options.cols[i1 + 1], function(i22, item22){
// 如果子列已经被标注为{HAS_PARENT}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
if(item22.HAS_PARENT || (childIndex > 1 && childIndex == item2.colspan)) return;
item22.HAS_PARENT = true;
item22.parentKey = i1 + '-' + i2;
childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
});
item2.colGroup = true; // 标注是组合列
}
// 根据列类型，定制化参数
that.initOpts(item2);
});
});
};
// 初始工具栏
Class.prototype.renderToolbar = function(){
var that = this
,options = that.config
// 添加工具栏左侧模板
var leftDefaultTemp = [
'<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>'
,'<div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>'
,'<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>'
].join('')
,elemToolTemp = that.layTool.find('.layui-table-tool-temp');
if(options.toolbar === 'default'){
elemToolTemp.html(leftDefaultTemp);
} else if(typeof options.toolbar === 'string'){
var toolbarHtml = $(options.toolbar).html() || '';
toolbarHtml && elemToolTemp.html(
laytpl(toolbarHtml).render(options)
);
}
// 添加工具栏右侧面板
var layout = {
filter: {
title: '筛选列'
,layEvent: 'LAYTABLE_COLS'
,icon: 'layui-icon-cols'
}
,exports: {
title: '导出'
,layEvent: 'LAYTABLE_EXPORT'
,icon: 'layui-icon-export'
}
,print: {
title: '打印'
,layEvent: 'LAYTABLE_PRINT'
,icon: 'layui-icon-print'
}
}, iconElem = [];
if(typeof options.defaultToolbar === 'object'){
layui.each(options.defaultToolbar, function(i, item){
var thisItem = layout[item];
if(thisItem){
iconElem.push('<div class="layui-inline" title="'+ thisItem.title +'" lay-event="'+ thisItem.layEvent +'">'
+'<i class="layui-icon '+ thisItem.icon +'"></i>'
+'</div>');
}
});
}
that.layTool.find('.layui-table-tool-self').html(iconElem.join(''));
}
// 同步表头父列的相关值
Class.prototype.setParentCol = function(hide, parentKey){
var that = this
,options = that.config
,parentTh = that.layHeader.find('th[data-key="'+ options.index +'-'+ parentKey +'"]') // 获取父列元素
,parentColspan = parseInt(parentTh.attr('colspan')) || 0;
if(parentTh[0]){
var arrParentKey = parentKey.split('-')
,getThisCol = options.cols[arrParentKey[0]][arrParentKey[1]];
hide ? parentColspan-- : parentColspan++;
parentTh.attr('colspan', parentColspan);
parentTh[parentColspan < 1 ? 'addClass' : 'removeClass'](HIDE);
getThisCol.colspan = parentColspan; // 同步 colspan 参数
getThisCol.hide = parentColspan < 1; // 同步 hide 参数
// 递归，继续往上查询是否有父列
var nextParentKey = parentTh.data('parentkey');
nextParentKey && that.setParentCol(hide, nextParentKey);
}
};
// 多级表头补丁
Class.prototype.setColsPatch = function(){
var that = this
,options = that.config
// 同步表头父列的相关值
layui.each(options.cols, function(i1, item1){
layui.each(item1, function(i2, item2){
if(item2.hide){
that.setParentCol(item2.hide, item2.parentKey);
}
});
});
};
// 动态分配列宽
Class.prototype.setColsWidth = function(){
var that = this
,options = that.config
,colNums = 0 // 列个数
,autoColNums = 0 // 自动列宽的列个数
,autoWidth = 0 // 自动列分配的宽度
,countWidth = 0 // 所有列总宽度和
,cntrWidth = that.setInit('width');
// 统计列个数
that.eachCols(function(i, item){
item.hide || colNums++;
});
// 减去边框差和滚动条宽
cntrWidth = cntrWidth - function(){
return (options.skin === 'line' || options.skin === 'nob') ? 2 : colNums + 1;
}() - that.getScrollWidth(that.layMain[0]) - 1;
// 计算自动分配的宽度
var getAutoWidth = function(back){
// 遍历所有列
layui.each(options.cols, function(i1, item1){
layui.each(item1, function(i2, item2){
var width = 0
,minWidth = item2.minWidth || options.cellMinWidth; // 最小宽度
if(!item2){
item1.splice(i2, 1);
return;
}
if(item2.colGroup || item2.hide) return;
if(!back){
width = item2.width || 0;
if(/\d+%$/.test(width)){ // 列宽为百分比
width = Math.floor((parseFloat(width) / 100) * cntrWidth);
width < minWidth && (width = minWidth);
} else if(!width){ // 列宽未填写
item2.width = width = 0;
autoColNums++;
}
} else if(autoWidth && autoWidth < minWidth){
autoColNums--;
width = minWidth;
}
if(item2.hide) width = 0;
countWidth = countWidth + width;
});
});
// 如果未填充满，则将剩余宽度平分
(cntrWidth > countWidth && autoColNums) && (
autoWidth = (cntrWidth - countWidth) / autoColNums
);
}
getAutoWidth();
getAutoWidth(true); // 重新检测分配的宽度是否低于最小列宽
// 记录自动列数
that.autoColNums = autoColNums;
// 设置列宽
that.eachCols(function(i3, item3){
var minWidth = item3.minWidth || options.cellMinWidth;
if(item3.colGroup || item3.hide) return;
// 给位分配宽的列平均分配宽
if(item3.width === 0){
that.getCssRule(options.index +'-'+ item3.key, function(item){
item.style.width = Math.floor(autoWidth >= minWidth ? autoWidth : minWidth) + 'px';
});
}
// 给设定百分比的列分配列宽
else if(/\d+%$/.test(item3.width)){
that.getCssRule(options.index +'-'+ item3.key, function(item){
item.style.width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth) + 'px';
});
}
});
// 填补 Math.floor 造成的数差
var patchNums = that.layMain.width() - that.getScrollWidth(that.layMain[0])
- that.layMain.children('table').outerWidth();
if(that.autoColNums && patchNums >= -colNums && patchNums <= colNums){
var getEndTh = function(th){
var field;
th = th || that.layHeader.eq(0).find('thead th:last-child')
field = th.data('field');
if(!field && th.prev()[0]){
return getEndTh(th.prev())
}
return th
}
,th = getEndTh()
,key = th.data('key');
that.getCssRule(key, function(item){
var width = item.style.width || th.outerWidth();
item.style.width = (parseFloat(width) + patchNums) + 'px';
// 二次校验，如果仍然出现横向滚动条（通常是 1px 的误差导致）
if(that.layMain.height() - that.layMain.prop('clientHeight') > 0){
item.style.width = (parseFloat(item.style.width) - 1) + 'px';
}
});
}
that.loading(!0);
};
// 重置表格尺寸/结构
Class.prototype.resize = function(){
var that = this;
that.fullSize(); // 让表格铺满
that.setColsWidth(); // 自适应列宽
that.scrollPatch(); // 滚动条补丁
};
// 表格完整重载
Class.prototype.reload = function(options){
var that = this;
if(that.config.data && that.config.data.constructor === Array) delete that.config.data;
that.config = $.extend({}, that.config, options);
that.render();
};
// 页码
Class.prototype.page = 1;
// 获得数据
Class.prototype.pullData = function(curr){
var that = this
,options = that.config
,request = options.request
,response = options.response
,sort = function(){
if(typeof options.initSort === 'object'){
that.sort(options.initSort.field, options.initSort.type);
}
};
that.startTime = new Date().getTime(); // 渲染开始时间
if(options.url){ // Ajax请求
var params = {};
params[request.pageName] = curr;
params[request.limitName] = options.limit;
// 参数
var data = $.extend(params, options.where);
if(options.contentType && options.contentType.indexOf("application/json") == 0){ // 提交 json 格式
data = JSON.stringify(data);
}
$.ajax({
type: options.method || 'get'
,url: options.url
,contentType: options.contentType
,data: data
,dataType: 'json'
,headers: options.headers || {}
,success: function(res){
// 如果有数据解析的回调，则获得其返回的数据
if(typeof options.parseData === 'function'){
res = options.parseData(res) || res;
}
// 检查数据格式是否符合规范
if(res[response.statusName] != response.statusCode){
that.renderForm();
that.layMain.html('<div class="'+ NONE +'">'+ (
res[response.msgName] ||
('返回的数据不符合规范，正确的成功状态码 ('+ response.statusName +') 应为：'+ response.statusCode)
) +'</div>');
} else {
that.renderData(res, curr, res[response.countName]), sort();
options.time = (new Date().getTime() - that.startTime) + ' ms'; // 耗时（接口请求+视图渲染）
}
that.setColsWidth();
typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
}
,error: function(e, m){
that.layMain.html('<div class="'+ NONE +'">数据接口请求异常：'+ m +'</div>');
that.renderForm();
that.setColsWidth();
}
});
} else if(options.data && options.data.constructor === Array){ // 已知数据
var res = {}
,startLimit = curr*options.limit - options.limit
res[response.dataName] = options.data.concat().splice(startLimit, options.limit);
res[response.countName] = options.data.length;
that.renderData(res, curr, options.data.length), sort();
that.setColsWidth();
typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
}
};
// 遍历表头
Class.prototype.eachCols = function(callback){
var that = this;
table.eachCols(null, callback, that.config.cols);
return that;
};
// 数据渲染
Class.prototype.renderData = function(res, curr, count, sort){
var that = this
,options = that.config
,data = res[options.response.dataName] || []
,trs = []
,trs_fixed = []
,trs_fixed_r = []
// 渲染视图
,render = function(){ // 后续性能提升的重点
var thisCheckedRowIndex;
if(!sort && that.sortKey){
return that.sort(that.sortKey.field, that.sortKey.sort, true);
}
layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = []
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号
if(item1.length === 0) return;
if(!sort){
item1[table.config.indexName] = i1;
}
that.eachCols(function(i3, item3){
var field = item3.field || i3
,key = options.index + '-' + item3.key
,content = item1[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
// td内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){ // 追加各种属性
var attr = [];
if(item3.edit) attr.push('data-edit="'+ item3.edit +'"'); // 是否允许单元格编辑
if(item3.align) attr.push('align="'+ item3.align +'"'); // 对齐方式
if(item3.templet) attr.push('data-content="'+ content +'"'); // 自定义模板
if(item3.toolbar) attr.push('data-off="true"'); // 行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); // 自定义事件
if(item3.style) attr.push('style="'+ item3.style +'"'); // 自定义样式
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); // 单元格最小宽度
return attr.join(' ');
}() +' class="'+ function(){ // 追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式
if(!item3.field) classNames.push('layui-table-col-special'); // 插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'">' + function(){
var tplData = $.extend(true, {
LAY_INDEX: numbers
}, item1)
,checkName = table.config.checkName;
// 渲染不同风格的列
switch(item3.type){
case 'checkbox':
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
return item3[checkName] ? 'checked' : '';
}
return tplData[checkName] ? 'checked' : '';
}() +'>';
break;
case 'radio':
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ (tplData[checkName] ? 'checked' : '') +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
// 解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return item3.templet ? function(){
return typeof item3.templet === 'function'
? item3.templet(tplData)
: laytpl($(item3.templet).html() || String(content)).render(tplData)
}() : content;
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
that.layBody.scrollTop(0);
that.layMain.find('.'+ NONE).remove();
that.layMain.find('tbody').html(trs.join(''));
that.layFixLeft.find('tbody').html(trs_fixed.join(''));
that.layFixRight.find('tbody').html(trs_fixed_r.join(''));
that.renderForm();
typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
that.syncCheckAll();
// 滚动条补丁
that.haveInit ? that.scrollPatch() : setTimeout(function(){
that.scrollPatch();
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
// 同步表头父列的相关值
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
};
that.key = options.id || options.index;
table.cache[that.key] = data; // 记录数据
// 显示隐藏分页栏
that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
// 排序
if(sort){
return render();
}
if(data.length === 0){
that.renderForm();
that.layFixed.remove();
that.layMain.find('tbody').html('');
that.layMain.find('.'+ NONE).remove();
return that.layMain.append('<div class="'+ NONE +'">'+ options.text.none +'</div>');
}
render(); // 渲染数据
that.renderTotal(data); // 数据合计
// 同步分页状态
if(options.page){
options.page = $.extend({
elem: 'layui-table-page' + options.index
,count: count
,limit: options.limit
,limits: options.limits || [10,20,30,40,50,60,70,80,90]
,groups: 3
,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
,prev: '<i class="layui-icon"></i>'
,next: '<i class="layui-icon"></i>'
,jump: function(obj, first){
if(!first){
// 分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们
// 而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用）
that.page = obj.curr; // 更新页码
options.limit = obj.limit; // 更新每页条数
that.loading();
that.pullData(obj.curr);
}
}
}, options.page);
options.page.count = count; // 更新总条数
laypage.render(options.page);
}
};
// 数据合计行
Class.prototype.renderTotal = function(data){
var that = this
,options = that.config
,totalNums = {};
if(!options.totalRow) return;
layui.each(data, function(i1, item1){
if(item1.length === 0) return;
that.eachCols(function(i3, item3){
var field = item3.field || i3
,content = item1[field];
if(item3.totalRow){
totalNums[field] = (totalNums[field] || 0) + (parseFloat(content) || 0);
}
});
});
var tds = [];
that.eachCols(function(i3, item3){
var field = item3.field || i3;
// td内容
var td = ['<td data-field="'+ field +'" data-key="'+ options.index + '-'+ item3.key +'" '+ function(){
var attr = [];
if(item3.align) attr.push('align="'+ item3.align +'"'); // 对齐方式
if(item3.style) attr.push('style="'+ item3.style +'"'); // 自定义样式
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); // 单元格最小宽度
return attr.join(' ');
}() +' class="'+ function(){ // 追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式
if(!item3.field) classNames.push('layui-table-col-special'); // 插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
var str = (options.index + '-' + item3.key);
return item3.type === 'normal' ? str
: (str + ' laytable-cell-' + item3.type);
}() +'">' + function(){
var text = item3.totalRowText || '';
return item3.totalRow ? (parseFloat(totalNums[field]).toFixed(2) || text) : text;
}()
,'</div></td>'].join('');
tds.push(td);
});
that.layTotal.find('tbody').html('<tr>' + tds.join('') + '</tr>');
};
// 找到对应的列元素
Class.prototype.getColElem = function(parent, key){
var that = this
,options = that.config;
return parent.eq(0).find('.laytable-cell-'+ (options.index + '-' + key) + ':eq(0)');
};
// 渲染表单
Class.prototype.renderForm = function(type){
form.render(type, 'LAY-table-'+ this.index);
};
// 标记当前行选中状态
Class.prototype.setThisRowChecked = function(index){
var that = this
,options = that.config
,ELEM_CLICK = 'layui-table-click'
,tr = that.layBody.find('tr[data-index="'+ index +'"]');
tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
};
// 数据排序
Class.prototype.sort = function(th, type, pull, formEvent){
var that = this
,field
,res = {}
,options = that.config
,filter = options.elem.attr('lay-filter')
,data = table.cache[that.key], thisData;
// 字段匹配
if(typeof th === 'string'){
that.layHeader.find('th').each(function(i, item){
var othis = $(this)
,_field = othis.data('field');
if(_field === th){
th = othis;
field = _field;
return false;
}
});
}
try {
var field = field || th.data('field')
,key = th.data('key');
// 如果欲执行的排序已在状态中，则不执行渲染
if(that.sortKey && !pull){
if(field === that.sortKey.field && type === that.sortKey.sort){
return;
}
}
var elemSort = that.layHeader.find('th .laytable-cell-'+ key).find(ELEM_SORT);
that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); // 清除其它标题排序状态
elemSort.attr('lay-sort', type || null);
that.layFixed.find('th')
} catch(e){
return hint.error('Table modules: Did not match to field');
}
// 记录排序索引和类型
that.sortKey = {
field: field
,sort: type
};
// 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
if(options.autoSort){
if(type === 'asc'){ // 升序
thisData = layui.sort(data, field);
} else if(type === 'desc'){ // 降序
thisData = layui.sort(data, field, true);
} else { // 清除排序
thisData = layui.sort(data, table.config.indexName);
delete that.sortKey;
}
}
res[options.response.dataName] = thisData || data;
that.renderData(res, that.page, that.count, true);
if(formEvent){
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', {
field: field
,type: type
});
}
};
// 请求loading
Class.prototype.loading = function(hide){
var that = this
,options = that.config;
if(options.loading){
if(hide){
that.layInit && that.layInit.remove();
delete that.layInit;
that.layBox.find(ELEM_INIT).remove()
} else {
that.layInit = $(['<div class="layui-table-init">'
,'<i class="layui-icon layui-icon-loading layui-icon"></i>'
,'</div>'].join(''));
that.layBox.append(that.layInit);
}
}
};
// 同步选中值状态
Class.prototype.setCheckData = function(index, checked){
var that = this
,options = that.config
,thisData = table.cache[that.key];
if(!thisData[index]) return;
if(thisData[index].constructor === Array) return;
thisData[index][options.checkName] = checked;
};
// 同步全选按钮状态
Class.prototype.syncCheckAll = function(){
var that = this
,options = that.config
,checkAllElem = that.layHeader.find('input[name="layTableCheckbox"]')
,syncColsCheck = function(checked){
that.eachCols(function(i, item){
if(item.type === 'checkbox'){
item[options.checkName] = checked;
}
});
return checked;
};
if(!checkAllElem[0]) return;
if(table.checkStatus(that.key).isAll){
if(!checkAllElem[0].checked){
checkAllElem.prop('checked', true);
that.renderForm('checkbox');
}
syncColsCheck(true);
} else {
if(checkAllElem[0].checked){
checkAllElem.prop('checked', false);
that.renderForm('checkbox');
}
syncColsCheck(false);
}
};
// 获取cssRule
Class.prototype.getCssRule = function(key, callback){
var that = this
,style = that.elem.find('style')[0]
,sheet = style.sheet || style.styleSheet || {}
,rules = sheet.cssRules || sheet.rules;
layui.each(rules, function(i, item){
if(item.selectorText === ('.laytable-cell-'+ key)){
return callback(item), true;
}
});
};
// 让表格铺满
Class.prototype.fullSize = function(){
var that = this
,options = that.config
,height = options.height, bodyHeight;
if(that.fullHeightGap){
height = _WIN.height() - that.fullHeightGap;
if(height < 135) height = 135;
that.elem.css('height', height);
}
if(!height) return;
// 减去列头区域的高度
bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 38); // 此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题，暂时只对默认尺寸的表格做支持。
// 减去工具栏的高度
if(options.toolbar){
bodyHeight = bodyHeight - (that.layTool.outerHeight() || 50);
}
// 减去统计朗的高度
if(options.totalRow){
bodyHeight = bodyHeight - (that.layTotal.outerHeight() || 40);
}
// 减去分页栏的高度
if(options.page){
bodyHeight = bodyHeight - (that.layPage.outerHeight() || 41) - 2;
}
that.layMain.css('height', bodyHeight);
};
// 获取滚动条宽度
Class.prototype.getScrollWidth = function(elem){
var width = 0;
if(elem){
width = elem.offsetWidth - elem.clientWidth;
} else {
elem = document.createElement('div');
elem.style.width = '100px';
elem.style.height = '100px';
elem.style.overflowY = 'scroll';
document.body.appendChild(elem);
width = elem.offsetWidth - elem.clientWidth;
document.body.removeChild(elem);
}
return width;
};
// 滚动条补丁
Class.prototype.scrollPatch = function(){
var that = this
,layMainTable = that.layMain.children('table')
,scollWidth = that.layMain.width() - that.layMain.prop('clientWidth') // 纵向滚动条宽度
,scollHeight = that.layMain.height() - that.layMain.prop('clientHeight') // 横向滚动条高度
,getScrollWidth = that.getScrollWidth(that.layMain[0]) // 获取主容器滚动条宽度，如果有的话
,outWidth = layMainTable.outerWidth() - that.layMain.width() // 表格内容器的超出宽度
// 添加补丁
,addPatch = function(elem){
if(scollWidth && scollHeight){
elem = elem.eq(0);
if(!elem.find('.layui-table-patch')[0]){
var patchElem = $('<th class="layui-table-patch"><div class="layui-table-cell"></div></th>'); // 补丁元素
patchElem.find('div').css({
width: scollWidth
});
elem.find('tr').append(patchElem);
}
} else {
elem.find('.layui-table-patch').remove();
}
}
addPatch(that.layHeader);
addPatch(that.layTotal);
// 固定列区域高度
var mainHeight = that.layMain.height()
,fixHeight = mainHeight - scollHeight;
that.layFixed.find(ELEM_BODY).css('height', layMainTable.height() >= fixHeight ? fixHeight : 'auto');
// 表格宽度小于容器宽度时，隐藏固定列
that.layFixRight[outWidth > 0 ? 'removeClass' : 'addClass'](HIDE);
// 操作栏
that.layFixRight.css('right', scollWidth - 1);
};
// 事件处理
Class.prototype.events = function(){
var that = this
,options = that.config
,_BODY = $('body')
,dict = {}
,th = that.layHeader.find('th')
,resizing
,ELEM_CELL = '.layui-table-cell'
,filter = options.elem.attr('lay-filter');
// 工具栏操作事件
that.layTool.on('click', '*[lay-event]', function(e){
var othis = $(this)
,events = othis.attr('lay-event')
,openPanel = function(sets){
var list = $(sets.list)
,panel = $('<ul class="layui-table-tool-panel"></ul>');
panel.html(list);
// 限制最大高度
if(options.height){
panel.css('max-height', options.height - (that.layTool.outerHeight() || 50));
}
// 插入元素
othis.find('.layui-table-tool-panel')[0] || othis.append(panel);
that.renderForm();
panel.on('click', function(e){
layui.stope(e);
});
sets.done && sets.done(panel, list)
};
layui.stope(e);
_DOC.trigger('table.tool.panel.remove');
layer.close(that.tipsIndex);
switch(events){
case 'LAYTABLE_COLS': // 筛选列
openPanel({
list: function(){
var lis = [];
that.eachCols(function(i, item){
if(item.field && item.type == 'normal'){
lis.push('<li><input type="checkbox" name="'+ item.field +'" data-key="'+ item.key +'" data-parentkey="'+ (item.parentKey||'') +'" lay-skin="primary" '+ (item.hide ? '' : 'checked') +' title="'+ (item.title || item.field) +'" lay-filter="LAY_TABLE_TOOL_COLS"></li>');
}
});
return lis.join('');
}()
,done: function(){
form.on('checkbox(LAY_TABLE_TOOL_COLS)', function(obj){
var othis = $(obj.elem)
,checked = this.checked
,key = othis.data('key')
,parentKey = othis.data('parentkey');
layui.each(options.cols, function(i1, item1){
layui.each(item1, function(i2, item2){
if(i1+ '-'+ i2 === key){
var hide = item2.hide;
// 同步勾选列的 hide 值和隐藏样式
item2.hide = !checked;
that.elem.find('*[data-key="'+ options.index +'-'+ key +'"]')
[checked ? 'removeClass' : 'addClass'](HIDE);
// 根据列的显示隐藏，同步多级表头的父级相关属性值
if(hide != item2.hide){
that.setParentCol(!checked, parentKey);
}
// 重新适配尺寸
that.resize();
}
});
});
});
}
});
break;
case 'LAYTABLE_EXPORT': // 导出
if(device.ie){
layer.tips('导出功能不支持 IE，请用 Chrome 等高级浏览器导出', this, {
tips: 3
})
} else {
openPanel({
list: function(){
return [
'<li data-type="csv">导出到 Csv 文件</li>'
,'<li data-type="xls">导出到 Excel 文件</li>'
].join('')
}()
,done: function(panel, list){
list.on('click', function(){
var type = $(this).data('type')
table.exportFile(options.id, null, type);
});
}
});
}
break;
case 'LAYTABLE_PRINT': // 打印
var printWin = window.open('打印窗口', '_blank')
,style = ['<style>'
,'body{font-size: 12px; color: #666;}'
,'table{width: 100%; border-collapse: collapse; border-spacing: 0;}'
,'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}'
,'a{color: #666; text-decoration:none;}'
,'*.layui-hide{display: none}'
,'</style>'].join('')
,html = $(that.layHeader.html());
html.append(that.layMain.find('table').html());
html.find('th.layui-table-patch').remove();
html.find('.layui-table-col-special').remove();
printWin.document.write(style + html.prop('outerHTML'));
printWin.document.close();
printWin.print();
printWin.close();
break;
}
layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({
event: events
,config: options
},{}));
});
// 拖拽调整宽度
th.on('mousemove', function(e){
var othis = $(this)
,oLeft = othis.offset().left
,pLeft = e.clientX - oLeft;
if(othis.data('unresize') || dict.resizeStart){
return;
}
dict.allowResize = othis.width() - pLeft <= 10; // 是否处于拖拽允许区域
_BODY.css('cursor', (dict.allowResize ? 'col-resize' : ''));
}).on('mouseleave', function(){
var othis = $(this);
if(dict.resizeStart) return;
_BODY.css('cursor', '');
}).on('mousedown', function(e){
var othis = $(this);
if(dict.allowResize){
var key = othis.data('key');
e.preventDefault();
dict.resizeStart = true; // 开始拖拽
dict.offset = [e.clientX, e.clientY]; // 记录初始坐标
that.getCssRule(key, function(item){
var width = item.style.width || othis.outerWidth();
dict.rule = item;
dict.ruleWidth = parseFloat(width);
dict.minWidth = othis.data('minwidth') || options.cellMinWidth;
});
}
});
// 拖拽中
_DOC.on('mousemove', function(e){
if(dict.resizeStart){
e.preventDefault();
if(dict.rule){
var setWidth = dict.ruleWidth + e.clientX - dict.offset[0];
if(setWidth < dict.minWidth) setWidth = dict.minWidth;
dict.rule.style.width = setWidth + 'px';
layer.close(that.tipsIndex);
}
resizing = 1
}
}).on('mouseup', function(e){
if(dict.resizeStart){
dict = {};
_BODY.css('cursor', '');
that.scrollPatch();
}
if(resizing === 2){
resizing = null;
}
});
// 排序
th.on('click', function(e){
var othis = $(this)
,elemSort = othis.find(ELEM_SORT)
,nowType = elemSort.attr('lay-sort')
,type;
if(!elemSort[0] || resizing === 1) return resizing = 2;
if(nowType === 'asc'){
type = 'desc';
} else if(nowType === 'desc'){
type = null;
} else {
type = 'asc';
}
that.sort(othis, type, null, true);
}).find(ELEM_SORT+' .layui-edge ').on('click', function(e){
var othis = $(this)
,index = othis.index()
,field = othis.parents('th').eq(0).data('field')
layui.stope(e);
if(index === 0){
that.sort(field, 'asc', null, true);
} else {
that.sort(field, 'desc', null, true);
}
});
// 数据行中的事件监听返回的公共对象成员
var commonMember = function(sets){
var othis = $(this)
,index = othis.parents('tr').eq(0).data('index')
,tr = that.layBody.find('tr[data-index="'+ index +'"]')
,data = table.cache[that.key][index];
return $.extend({
tr: tr // 行元素
,data: table.clearCacheKey(data) // 当前行数据
,del: function(){ // 删除行数据
table.cache[that.key][index] = [];
tr.remove();
that.scrollPatch();
}
,update: function(fields){ // 修改行数据
fields = fields || {};
layui.each(fields, function(key, value){
if(key in data){
var templet, td = tr.children('td[data-field="'+ key +'"]');
data[key] = value;
that.eachCols(function(i, item2){
if(item2.field == key && item2.templet){
templet = item2.templet;
}
});
td.children(ELEM_CELL).html(function(){
return templet ? function(){
return typeof templet === 'function'
? templet(data)
: laytpl($(templet).html() || value).render(data)
}() : value;
}());
td.data('content', value);
}
});
}
}, sets);
};
// 复选框选择
that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){ // 替代元素的 click 事件
var checkbox = $(this).prev()
,childs = that.layBody.find('input[name="layTableCheckbox"]')
,index = checkbox.parents('tr').eq(0).data('index')
,checked = checkbox[0].checked
,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
// 全选
if(isAll){
childs.each(function(i, item){
item.checked = checked;
that.setCheckData(i, checked);
});
that.syncCheckAll();
that.renderForm('checkbox');
} else {
that.setCheckData(index, checked);
that.syncCheckAll();
}
layui.event.call(checkbox[0], MOD_NAME, 'checkbox('+ filter +')', commonMember.call(checkbox[0], {
checked: checked
,type: isAll ? 'all' : 'one'
}));
});
// 单选框选择
that.elem.on('click', 'input[lay-type="layTableRadio"]+', function(){
var radio = $(this).prev()
,checked = radio[0].checked
,thisData = table.cache[that.key]
,index = radio.parents('tr').eq(0).data('index');
// 重置数据单选属性
layui.each(thisData, function(i, item){
if(index === i){
item.LAY_CHECKED = true;
} else {
delete item.LAY_CHECKED;
}
});
that.setThisRowChecked(index);
layui.event.call(this, MOD_NAME, 'radio('+ filter +')', commonMember.call(this, {
checked: checked
}));
});
// 行事件
that.layBody.on('mouseenter', 'tr', function(){ // 鼠标移入行
var othis = $(this)
,index = othis.index();
that.layBody.find('tr:eq('+ index +')').addClass(ELEM_HOVER)
}).on('mouseleave', 'tr', function(){ // 鼠标移出行
var othis = $(this)
,index = othis.index();
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
}).on('click', 'tr', function(){ // 单击行
setRowEvent.call(this, 'row');
}).on('dblclick', 'tr', function(){ // 双击行
setRowEvent.call(this, 'rowDouble');
});
// 创建行单击、双击事件监听
var setRowEvent = function(eventType){
var othis = $(this);
layui.event.call(this,
MOD_NAME, eventType + '('+ filter +')'
,commonMember.call(othis.children('td')[0])
);
};
// 单元格编辑
that.layBody.on('change', '.'+ELEM_EDIT, function(){
var othis = $(this)
,value = this.value
,field = othis.parent().data('field')
,index = othis.parents('tr').eq(0).data('index')
,data = table.cache[that.key][index];
data[field] = value; // 更新缓存中的值
layui.event.call(this, MOD_NAME, 'edit('+ filter +')', commonMember.call(this, {
value: value
,field: field
}));
}).on('blur', '.'+ELEM_EDIT, function(){
var templet
,othis = $(this)
,field = othis.parent().data('field')
,index = othis.parents('tr').eq(0).data('index')
,data = table.cache[that.key][index];
that.eachCols(function(i, item){
if(item.field == field && item.templet){
templet = item.templet;
}
});
othis.siblings(ELEM_CELL).html(function(value){
return templet ? function(){
return typeof templet === 'function'
? templet(data)
: laytpl($(templet).html() || this.value).render(data)
}() : value;
}(this.value));
othis.parent().data('content', this.value);
othis.remove();
});
// 单元格单击事件
that.layBody.on('click', 'td', function(e){
var othis = $(this)
,field = othis.data('field')
,editType = othis.data('edit')
,elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; // 不触发事件
// 显示编辑表单
if(editType){
var input = $('<input class="layui-input '+ ELEM_EDIT +'">');
input[0].value = othis.data('content') || elemCell.text();
othis.find('.'+ELEM_EDIT)[0] || othis.append(input);
input.focus();
layui.stope(e);
return;
}
}).on('mouseenter', 'td', function(){
gridExpand.call(this)
}).on('mouseleave', 'td', function(){
gridExpand.call(this, 'hide');
});
// 单元格展开图标
var ELEM_GRID = 'layui-table-grid', ELEM_GRID_DOWN = 'layui-table-grid-down', ELEM_GRID_PANEL = 'layui-table-grid-panel'
,gridExpand = function(hide){
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
if(hide){
othis.find('.layui-table-grid-down').remove();
} else if(elemCell.prop('scrollWidth') > elemCell.outerWidth()){
if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;
othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
}
};
// 单元格展开事件
that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
var othis = $(this)
,td = othis.parent()
,elemCell = td.children(ELEM_CELL);
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 16) +'px;'+ function(){
if(options.size === 'sm'){
return 'padding: 4px 15px; font-size: 12px;';
}
if(options.size === 'lg'){
return 'padding: 14px 15px;';
}
return '';
}() +'">'
,elemCell.html()
,'</div>'
,'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
].join(''), elemCell[0], {
tips: [3, '']
,time: -1
,anim: -1
,maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2
,isOutAnim: false
,skin: 'layui-table-tips'
,success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
}
});
layui.stope(e);
});
// 行工具条操作事件
that.layBody.on('click', '*[lay-event]', function(){
var othis = $(this)
,index = othis.parents('tr').eq(0).data('index');
layui.event.call(this, MOD_NAME, 'tool('+ filter +')', commonMember.call(this, {
event: othis.attr('lay-event')
}));
that.setThisRowChecked(index);
});
// 同步滚动条
that.layMain.on('scroll', function(){
var othis = $(this)
,scrollLeft = othis.scrollLeft()
,scrollTop = othis.scrollTop();
that.layHeader.scrollLeft(scrollLeft);
that.layTotal.scrollLeft(scrollLeft);
that.layFixed.find(ELEM_BODY).scrollTop(scrollTop);
layer.close(that.tipsIndex);
});
// 全局点击
_DOC.on('click', function(){
_DOC.trigger('table.remove.tool.panel');
});
// 工具面板移除事件
_DOC.on('table.remove.tool.panel', function(){
$('.layui-table-tool-panel').remove();
});
// 自适应
_WIN.on('resize', function(){
that.resize();
});
};
// 初始化
table.init = function(filter, settings){
settings = settings || {};
var that = this
,elemTable = filter ? $('table[lay-filter="'+ filter +'"]') : $(ELEM + '[lay-data]')
,errorTips = 'Table element property lay-data configuration item has a syntax error: ';
// 遍历数据表格
elemTable.each(function(){
var othis = $(this), tableData = othis.attr('lay-data');
try{
tableData = new Function('return '+ tableData)();
} catch(e){
hint.error(errorTips + tableData)
}
var cols = [], options = $.extend({
elem: this
,cols: []
,data: []
,skin: othis.attr('lay-skin') // 风格
,size: othis.attr('lay-size') // 尺寸
,even: typeof othis.attr('lay-even') === 'string' // 偶数行背景
}, table.config, settings, tableData);
filter && othis.hide();
// 获取表头数据
othis.find('thead>tr').each(function(i){
options.cols[i] = [];
$(this).children().each(function(ii){
var th = $(this), itemData = th.attr('lay-data');
try{
itemData = new Function('return '+ itemData)();
} catch(e){
return hint.error(errorTips + itemData)
}
var row = $.extend({
title: th.text()
,colspan: th.attr('colspan') || 0 // 列单元格
,rowspan: th.attr('rowspan') || 0 // 行单元格
}, itemData);
if(row.colspan < 2) cols.push(row);
options.cols[i].push(row);
});
});
// 获取表体数据
othis.find('tbody>tr').each(function(i1){
var tr = $(this), row = {};
// 如果定义了字段名
tr.children('td').each(function(i2, item2){
var td = $(this)
,field = td.data('field');
if(field){
return row[field] = td.html();
}
});
// 如果未定义字段名
layui.each(cols, function(i3, item3){
var td = tr.children('td').eq(i3);
row[item3.field] = td.html();
});
options.data[i1] = row;
});
table.render(options);
});
return that;
};
// 记录所有实例
thisTable.that = {}; // 记录所有实例对象
thisTable.config = {}; // 记录所有实例配置项
// 遍历表头
table.eachCols = function(id, callback, cols){
var config = thisTable.config[id] || {}
,arrs = [], index = 0;
cols = $.extend(true, [], cols || config.cols);
// 重新整理表头结构
layui.each(cols, function(i1, item1){
layui.each(item1, function(i2, item2){
// 如果是组合列，则捕获对应的子列
if(item2.colGroup){
var childIndex = 0;
index++
item2.CHILD_COLS = [];
layui.each(cols[i1 + 1], function(i22, item22){
// 如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
if(item22.PARENT_COL_INDEX || (childIndex > 1 && childIndex == item2.colspan)) return;
item22.PARENT_COL_INDEX = index;
item2.CHILD_COLS.push(item22);
childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
});
}
if(item2.PARENT_COL_INDEX) return; // 如果是子列，则不进行追加，因为已经存储在父列中
arrs.push(item2)
});
});
// 重新遍历列，如果有子列，则进入递归
var eachArrs = function(obj){
layui.each(obj || arrs, function(i, item){
if(item.CHILD_COLS) return eachArrs(item.CHILD_COLS);
typeof callback === 'function' && callback(i, item);
});
};
eachArrs();
};
// 表格选中状态
table.checkStatus = function(id){
var nums = 0
,invalidNum = 0
,arr = []
,data = table.cache[id] || [];
// 计算全选个数
layui.each(data, function(i, item){
if(item.constructor === Array){
invalidNum++; // 无效数据，或已删除的
return;
}
if(item[table.config.checkName]){
nums++;
arr.push(table.clearCacheKey(item));
}
});
return {
data: arr // 选中的数据
,isAll: data.length ? (nums === (data.length - invalidNum)) : false // 是否全选
};
};
// 表格导出
table.exportFile = function(id, data, type){
data = data || table.clearCacheKey(table.cache[id]);
type = type || 'csv';
var config = thisTable.config[id] || {}
,textType = ({
csv: 'text/csv'
,xls: 'application/vnd.ms-excel'
})[type]
,alink = document.createElement("a");
if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
var dataTitle = [], dataMain = [];
layui.each(data, function(i1, item1){
var vals = [];
if(typeof id === 'object'){ // ID直接为表头数据
layui.each(id, function(i, item){
i1 == 0 && dataTitle.push(item || '');
});
layui.each(table.clearCacheKey(item1), function(i2, item2){
vals.push(item2);
});
} else {
table.eachCols(id, function(i3, item3){
if(item3.field && item3.type == 'normal' && !item3.hide){
i1 == 0 && dataTitle.push(item3.title || '');
vals.push(item1[item3.field]);
}
});
}
dataMain.push(vals.join(','))
});
return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n');
}());
alink.download = (config.title || 'table_'+ (config.index || '')) + '.' + type;
document.body.appendChild(alink);
alink.click();
document.body.removeChild(alink);
};
// 重置表格尺寸结构
table.resize = function(id){
// 如果指定表格唯一 id，则只执行该 id 对应的表格实例
if(id){
var config = getThisTableConfig(id); // 获取当前实例配置项
if(!config) return;
thisTable.that[id].resize();
} else { // 否则重置所有表格实例尺寸
layui.each(thisTable.that, function(){
this.resize();
});
}
};
// 表格重载
table.reload = function(id, options){
options = options || {};
var config = getThisTableConfig(id); // 获取当前实例配置项
if(!config) return;
if(options.data && options.data.constructor === Array) delete config.data;
return table.render($.extend(true, {}, config, options));
};
// 核心入口
table.render = function(options){
var inst = new Class(options);
return thisTable.call(inst);
};
// 清除临时Key
table.clearCacheKey = function(data){
data = $.extend({}, data);
delete data[table.config.checkName];
delete data[table.config.indexName];
return data;
};
// 自动完成渲染
table.init();
exports(MOD_NAME, table);
});
tree.js
/**
@Name：layui.tree 树组件
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint();
var enterSkin = 'layui-tree-enter', Tree = function(options){
this.options = options;
};
// 图标
var icon = {
arrow: ['', ''] // 箭头
,checkbox: ['', ''] // 复选框
,radio: ['', ''] // 单选框
,branch: ['', ''] // 父节点
,leaf: '' // 叶节点
};
// 初始化
Tree.prototype.init = function(elem){
var that = this;
elem.addClass('layui-box layui-tree'); // 添加tree样式
if(that.options.skin){
elem.addClass('layui-tree-skin-'+ that.options.skin);
}
that.tree(elem);
that.on(elem);
};
// 树节点解析
Tree.prototype.tree = function(elem, children){
var that = this, options = that.options
var nodes = children || options.nodes;
layui.each(nodes, function(index, item){
var hasChild = item.children && item.children.length > 0;
var ul = $('<ul class="'+ (item.spread ? "layui-show" : "") +'"></ul>');
var li = $(['<li '+ (item.spread ? 'data-spread="'+ item.spread +'"' : '') +'>'
// 展开箭头
,function(){
return hasChild ? '<i class="layui-icon layui-tree-spread">'+ (
item.spread ? icon.arrow[1] : icon.arrow[0]
) +'</i>' : '';
}()
// 复选框/单选框
,function(){
return options.check ? (
'<i class="layui-icon layui-tree-check">'+ (
options.check === 'checkbox' ? icon.checkbox[0] : (
options.check === 'radio' ? icon.radio[0] : ''
)
) +'</i>'
) : '';
}()
// 节点
,function(){
return '<a href="'+ (item.href || 'javascript:;') +'" '+ (
options.target && item.href ? 'target=\"'+ options.target +'\"' : ''
) +'>'
+ ('<i class="layui-icon layui-tree-'+ (hasChild ? "branch" : "leaf") +'">'+ (
hasChild ? (
item.spread ? icon.branch[1] : icon.branch[0]
) : icon.leaf
) +'</i>') // 节点图标
+ ('<cite>'+ (item.name||'未命名') +'</cite></a>');
}()
,'</li>'].join(''));
// 如果有子节点，则递归继续生成树
if(hasChild){
li.append(ul);
that.tree(ul, item.children);
}
elem.append(li);
// 触发点击节点回调
typeof options.click === 'function' && that.click(li, item);
// 伸展节点
that.spread(li, item);
// 拖拽节点
options.drag && that.drag(li, item);
});
};
// 点击节点回调
Tree.prototype.click = function(elem, item){
var that = this, options = that.options;
elem.children('a').on('click', function(e){
layui.stope(e);
options.click(item)
});
};
// 伸展节点
Tree.prototype.spread = function(elem, item){
var that = this, options = that.options;
var arrow = elem.children('.layui-tree-spread')
var ul = elem.children('ul'), a = elem.children('a');
// 执行伸展
var open = function(){
if(elem.data('spread')){
elem.data('spread', null)
ul.removeClass('layui-show');
arrow.html(icon.arrow[0]);
a.find('.layui-icon').html(icon.branch[0]);
} else {
elem.data('spread', true);
ul.addClass('layui-show');
arrow.html(icon.arrow[1]);
a.find('.layui-icon').html(icon.branch[1]);
}
};
// 如果没有子节点，则不执行
if(!ul[0]) return;
arrow.on('click', open);
a.on('dblclick', open);
}
// 通用事件
Tree.prototype.on = function(elem){
var that = this, options = that.options;
var dragStr = 'layui-tree-drag';
// 屏蔽选中文字
elem.find('i').on('selectstart', function(e){
return false
});
// 拖拽
if(options.drag){
$(document).on('mousemove', function(e){
var move = that.move;
if(move.from){
var to = move.to, treeMove = $('<div class="layui-box '+ dragStr +'"></div>');
e.preventDefault();
$('.' + dragStr)[0] || $('body').append(treeMove);
var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;
(dragElem).addClass('layui-show').html(move.from.elem.children('a').html());
dragElem.css({
left: e.pageX + 10
,top: e.pageY + 10
})
}
}).on('mouseup', function(){
var move = that.move;
if(move.from){
move.from.elem.children('a').removeClass(enterSkin);
move.to && move.to.elem.children('a').removeClass(enterSkin);
that.move = {};
$('.' + dragStr).remove();
}
});
}
};
// 拖拽节点
Tree.prototype.move = {};
Tree.prototype.drag = function(elem, item){
var that = this, options = that.options;
var a = elem.children('a'), mouseenter = function(){
var othis = $(this), move = that.move;
if(move.from){
move.to = {
item: item
,elem: elem
};
othis.addClass(enterSkin);
}
};
a.on('mousedown', function(){
var move = that.move
move.from = {
item: item
,elem: elem
};
});
a.on('mouseenter', mouseenter).on('mousemove', mouseenter)
.on('mouseleave', function(){
var othis = $(this), move = that.move;
if(move.from){
delete move.to;
othis.removeClass(enterSkin);
}
});
};
// 暴露接口
exports('tree', function(options){
var tree = new Tree(options = options || {});
var elem = $(options.elem);
if(!elem[0]){
return hint.error('layui.tree 没有找到'+ options.elem +'元素');
}
tree.init(elem);
});
});
upload.js
/**
@Title: layui.upload 文件上传
@Author: 贤心
@License：MIT
*/
layui.define('layer' , function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,hint = layui.hint()
,device = layui.device()
// 外部接口
,upload = {
config: {} // 全局配置项
// 设置全局项
,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);
}
}
// 操作当前实例
,thisUpload = function(){
var that = this;
return {
upload: function(files){
that.upload.call(that, files);
}
,config: that.config
}
}
// 字符常量
,MOD_NAME = 'upload', ELEM = '.layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag'
// 构造器
,Class = function(options){
var that = this;
that.config = $.extend({}, that.config, upload.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
accept: 'images' // 允许上传的文件类型：images/file/video/audio
,exts: '' // 允许上传的文件后缀名
,auto: true // 是否选完文件后自动上传
,bindAction: '' // 手动上传触发的元素
,url: '' // 上传地址
,field: 'file' // 文件字段名
,method: 'post' // 请求上传的 http 类型
,data: {} // 请求上传的额外参数
,drag: true // 是否允许拖拽上传
,size: 0 // 文件限制大小，默认不限制
,number: 0 // 允许同时上传的文件数，默认不限制
,multiple: false // 是否允许多文件上传，不支持ie8-9
};
// 初始渲染
Class.prototype.render = function(options){
var that = this
,options = that.config;
options.elem = $(options.elem);
options.bindAction = $(options.bindAction);
that.file();
that.events();
};
// 追加文件域
Class.prototype.file = function(){
var that = this
,options = that.config
,elemFile = that.elemFile = $([
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"'
,(options.multiple ? ' multiple' : '')
,'>'
].join(''))
,next = options.elem.next();
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){
next.remove();
}
// 包裹ie8/9容器
if(device.ie && device.ie < 10){
options.elem.wrap('<div class="layui-upload-wrap"></div>');
}
that.isFile() ? (
that.elemFile = options.elem
,options.field = options.elem[0].name
) : options.elem.after(elemFile);
// 初始化ie8/9的Form域
if(device.ie && device.ie < 10){
that.initIE();
}
};
// ie8-9初始化
Class.prototype.initIE = function(){
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="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
,'</form>'].join(''));
// 插入iframe
$('#'+ ELEM_IFRAME)[0] || $('body').append(iframe);
// 包裹文件域
if(!options.elem.next().hasClass(ELEM_FORM)){
that.elemFile.wrap(elemForm);
// 追加额外的参数
options.elem.next('.'+ ELEM_FORM).append(function(){
var arr = [];
layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value;
arr.push('<input type="hidden" name="'+ key +'" value="'+ value +'">')
});
return arr.join('');
}());
}
};
// 异常提示
Class.prototype.msg = function(content){
return layer.msg(content, {
icon: 2
,shift: 6
});
};
// 判断绑定元素是否为文件域本身
Class.prototype.isFile = function(){
var elem = this.config.elem[0];
if(!elem) return;
return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file'
}
// 预读图片信息
Class.prototype.preview = function(callback){
var that = this;
if(window.FileReader){
layui.each(that.chooseFiles, function(index, file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
callback && callback(index, file, this.result);
}
});
}
};
// 执行上传
Class.prototype.upload = function(files, type){
var that = this
,options = that.config
,elemFile = that.elemFile[0]
// 高级浏览器处理方式，支持跨域
,ajaxSend = function(){
var successful = 0, aborted = 0
,items = files || that.files || that.chooseFiles || elemFile.files
,allDone = function(){ // 多文件全部上传完毕的回调
if(options.multiple && successful + aborted === that.fileLength){
typeof options.allDone === 'function' && options.allDone({
total: that.fileLength
,successful: successful
,aborted: aborted
});
}
};
layui.each(items, function(index, file){
var formData = new FormData();
formData.append(options.field, file);
// 追加额外的参数
layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value;
formData.append(key, value);
});
// 提交文件
$.ajax({
url: options.url
,type: 'post'
,data: formData
,contentType: false
,processData: false
,dataType: 'json'
,headers: options.headers || {}
,success: function(res){
successful++;
done(index, res);
allDone();
}
,error: function(){
aborted++;
that.msg('请求上传接口出现异常');
error(index);
allDone();
}
});
});
}
// 低版本IE处理方式，不支持跨域
,iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME);
that.elemFile.parent().submit();
// 获取响应信息
clearInterval(Class.timer);
Class.timer = setInterval(function() {
var res, iframeBody = iframe.contents().find('body');
try {
res = iframeBody.text();
} catch(e) {
that.msg('获取上传后的响应信息出现异常');
clearInterval(Class.timer);
error();
}
if(res){
clearInterval(Class.timer);
iframeBody.html('');
done(0, res);
}
}, 30);
}
// 统一回调
,done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = '';
if(typeof res !== 'object'){
try {
res = JSON.parse(res);
} catch(e){
res = {};
return that.msg('请对上传接口返回有效JSON');
}
}
typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files);
});
}
// 统一网络异常回调
,error = function(index){
if(options.auto){
elemFile.value = '';
}
typeof options.error === 'function' && options.error(index || 0, function(files){
that.upload(files);
});
}
,exts = options.exts
,check ,value = function(){
var arr = [];
layui.each(files || that.chooseFiles, function(i, item){
arr.push(item.name);
});
return arr;
}()
// 回调返回的参数
,args = {
// 预览
preview: function(callback){
that.preview(callback);
}
// 上传
,upload: function(index, file){
var thisFile = {};
thisFile[index] = file;
that.upload(thisFile);
}
// 追加文件到队列
,pushFile: function(){
that.files = that.files || {};
layui.each(that.chooseFiles, function(index, item){
that.files[index] = item;
});
return that.files;
}
// 重置文件
,resetFile: function(index, file, filename){
var newFile = new File([file], filename);
that.files = that.files || {};
that.files[index] = newFile;
}
}
// 提交上传
,send = function(){
// 选择文件的回调
if(type === 'choose' || options.auto){
options.choose && options.choose(args);
if(type === 'choose'){
return;
}
}
// 上传前的回调
options.before && options.before(args);
// IE兼容处理
if(device.ie){
return device.ie > 9 ? ajaxSend() : iframeSend();
}
ajaxSend();
}
// 校验文件格式
value = value.length === 0
? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '')
: value;
if(value.length === 0) return;
switch(options.accept){
case 'file': // 一般文件
if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){
that.msg('选择的文件中包含不支持的格式');
return elemFile.value = '';
}
break;
case 'video': // 视频文件
if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){
that.msg('选择的视频中包含不支持的格式');
return elemFile.value = '';
}
break;
case 'audio': // 音频文件
if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){
that.msg('选择的音频中包含不支持的格式');
return elemFile.value = '';
}
break;
default: // 图片文件
layui.each(value, function(i, item){
if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){
check = true;
}
});
if(check){
that.msg('选择的图片中包含不支持的格式');
return elemFile.value = '';
}
break;
}
// 检验文件数量
that.fileLength = function(){
var length = 0
,items = files || that.files || that.chooseFiles || elemFile.files;
layui.each(items, function(){
length++;
});
return length;
}();
if(options.number && that.fileLength > options.number){
return that.msg('同时最多只能上传的数量为：'+ options.number);
}
// 检验文件大小
if(options.size > 0 && !(device.ie && device.ie < 10)){
var limitSize;
layui.each(that.chooseFiles, function(index, file){
if(file.size > 1024*options.size){
var size = options.size/1024;
size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB'
elemFile.value = '';
limitSize = size;
}
});
if(limitSize) return that.msg('文件不能超过'+ limitSize);
}
send();
};
// 事件处理
Class.prototype.events = function(){
var that = this
,options = that.config
// 设置当前选择的文件队列
,setChooseFile = function(files){
that.chooseFiles = {};
layui.each(files, function(i, item){
var time = new Date().getTime();
that.chooseFiles[time + '-' + i] = item;
});
}
// 设置选择的文本
,setChooseText = function(files, filename){
var elemFile = that.elemFile
,value = files.length > 1
? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
if(elemFile.next().hasClass(ELEM_CHOOSE)){
elemFile.next().remove();
}
that.upload(null, 'choose');
if(that.isFile() || options.choose) return;
elemFile.after('<span class="layui-inline '+ ELEM_CHOOSE +'">'+ value +'</span>');
};
// 点击上传容器
options.elem.off('upload.start').on('upload.start', function(){
var othis = $(this), data = othis.attr('lay-data');
if(data){
try{
data = new Function('return '+ data)();
that.config = $.extend({}, options, data);
} catch(e){
hint.error('Upload element property lay-data configuration item has a syntax error: ' + data)
}
}
that.config.item = othis;
that.elemFile[0].click();
});
// 拖拽上传
if(!(device.ie && device.ie < 10)){
options.elem.off('upload.over').on('upload.over', function(){
var othis = $(this)
othis.attr('lay-over', '');
})
.off('upload.leave').on('upload.leave', function(){
var othis = $(this)
othis.removeAttr('lay-over');
})
.off('upload.drop').on('upload.drop', function(e, param){
var othis = $(this), files = param.originalEvent.dataTransfer.files || [];
othis.removeAttr('lay-over');
setChooseFile(files);
if(options.auto){
that.upload(files);
} else {
setChooseText(files);
}
});
}
// 文件选择
that.elemFile.off('upload.change').on('upload.change', function(){
var files = this.files || [];
setChooseFile(files);
options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
});
// 手动触发上传
options.bindAction.off('upload.action').on('upload.action', function(){
that.upload();
});
// 防止事件重复绑定
if(options.elem.data('haveEvents')) return;
that.elemFile.on('change', function(){
$(this).trigger('upload.change');
});
options.elem.on('click', function(){
if(that.isFile()) return;
$(this).trigger('upload.start');
});
if(options.drag){
options.elem.on('dragover', function(e){
e.preventDefault();
$(this).trigger('upload.over');
}).on('dragleave', function(e){
$(this).trigger('upload.leave');
}).on('drop', function(e){
e.preventDefault();
$(this).trigger('upload.drop', e);
});
}
options.bindAction.on('click', function(){
$(this).trigger('upload.action');
});
options.elem.data('haveEvents', true);
};
// 核心入口
upload.render = function(options){
var inst = new Class(options);
return thisUpload.call(inst);
};
exports(MOD_NAME, upload);
});
util.js
/**
@Name：layui.util 工具集
@Author：贤心
@License：MIT
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
// 外部接口
,util = {
// 固定块
fixbar: function(options){
var ELEM = 'layui-fixbar', TOP_BAR = 'layui-fixbar-top'
,dom = $(document), body = $('body')
,is, timer;
options = $.extend({
showHeight: 200 // 出现TOP的滚动条高度临界值
}, options);
options.bar1 = options.bar1 === true ? '' : options.bar1;
options.bar2 = options.bar2 === true ? '' : options.bar2;
options.bgcolor = options.bgcolor ? ('background-color:' + options.bgcolor) : '';
var icon = [options.bar1, options.bar2, ''] // 图标：信息、问号、TOP
,elem = $(['<ul class="'+ ELEM +'">'
,options.bar1 ? '<li class="layui-icon" lay-type="bar1" style="'+ options.bgcolor +'">'+ icon[0] +'</li>' : ''
,options.bar2 ? '<li class="layui-icon" lay-type="bar2" style="'+ options.bgcolor +'">'+ icon[1] +'</li>' : ''
,'<li class="layui-icon '+ TOP_BAR +'" lay-type="top" style="'+ options.bgcolor +'">'+ icon[2] +'</li>'
,'</ul>'].join(''))
,topBar = elem.find('.'+TOP_BAR)
,scroll = function(){
var stop = dom.scrollTop();
if(stop >= (options.showHeight)){
is || (topBar.show(), is = 1);
} else {
is && (topBar.hide(), is = 0);
}
};
if($('.'+ ELEM)[0]) return;
typeof options.css === 'object' && elem.css(options.css);
body.append(elem), scroll();
// bar点击事件
elem.find('li').on('click', function(){
var othis = $(this), type = othis.attr('lay-type');
if(type === 'top'){
$('html,body').animate({
scrollTop : 0
}, 200);
}
options.click && options.click.call(this, type);
});
// Top显示控制
dom.on('scroll', function(){
clearTimeout(timer);
timer = setTimeout(function(){
scroll();
}, 100);
});
}
// 倒计时
,countdown: function(endTime, serverTime, callback){
var that = this
,type = typeof serverTime === 'function'
,end = new Date(endTime).getTime()
,now = new Date((!serverTime || type) ? new Date().getTime() : serverTime).getTime()
,count = end - now
,time = [
Math.floor(count/(1000*60*60*24)) // 天
,Math.floor(count/(1000*60*60)) % 24 // 时
,Math.floor(count/(1000*60)) % 60 // 分
,Math.floor(count/1000) % 60 // 秒
];
if(type) callback = serverTime;
var timer = setTimeout(function(){
that.countdown(endTime, now + 1000, callback);
}, 1000);
callback && callback(count > 0 ? time : [0,0,0,0], serverTime, timer);
if(count <= 0) clearTimeout(timer);
return timer;
}
// 某个时间在当前时间的多久前
,timeAgo: function(time, onlyDate){
var that = this
,arr = [[], []]
,stamp = new Date().getTime() - new Date(time).getTime();
// 返回具体日期
if(stamp > 1000*60*60*24*8){
stamp = new Date(time);
arr[0][0] = that.digit(stamp.getFullYear(), 4);
arr[0][1] = that.digit(stamp.getMonth() + 1);
arr[0][2] = that.digit(stamp.getDate());
// 是否输出时间
if(!onlyDate){
arr[1][0] = that.digit(stamp.getHours());
arr[1][1] = that.digit(stamp.getMinutes());
arr[1][2] = that.digit(stamp.getSeconds());
}
return arr[0].join('-') + ' ' + arr[1].join(':');
}
// 30天以内，返回“多久前”
if(stamp >= 1000*60*60*24){
return ((stamp/1000/60/60/24)|0) + '天前';
} else if(stamp >= 1000*60*60){
return ((stamp/1000/60/60)|0) + '小时前';
} else if(stamp >= 1000*60*2){ // 2分钟以内为：刚刚
return ((stamp/1000/60)|0) + '分钟前';
} else if(stamp < 0){
return '未来';
} else {
return '刚刚';
}
}
// 数字前置补零
,digit: function(num, length){
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
}
// 转化为日期格式字符
,toDateString: function(time, format){
var that = this
,date = new Date(time || new Date())
,ymd = [
that.digit(date.getFullYear(), 4)
,that.digit(date.getMonth() + 1)
,that.digit(date.getDate())
]
,hms = [
that.digit(date.getHours())
,that.digit(date.getMinutes())
,that.digit(date.getSeconds())
];
format = format || 'yyyy-MM-dd HH:mm:ss';
return format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
.replace(/HH/g, hms[0])
.replace(/mm/g, hms[1])
.replace(/ss/g, hms[2]);
}
// 防 xss 攻击
,escape: function(html){
return String(html || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
.replace(/</g, '<').replace(/>/g, '>')
.replace(/'/g, ''').replace(/"/g, '"');
}
};
// 监听 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);
});文件目录
└── lay
├── all.js
└── modules
├── carousel.js
├── code.js
├── colorpicker.js
├── element.js
├── flow.js
├── form.js
├── laydate.js
├── layedit.js
├── layer.js
├── laypage.js
├── laytpl.js
├── mobile.js
├── rate.js
├── slider.js
├── table.js
├── tree.js
├── upload.js
├── util.js 
评论已关闭