theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
贤心
2018-08-29 01:55:17 +08:00
parent 58f523204b
commit 5d85d6f4bc
35 changed files with 139 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/layui.css
View File

@@ -804,7 +804,7 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
/* 数据表格 */
.layui-table[lay-data]{display: none;}
.layui-table-view,
.layui-table-view{min-height: 248px;}
.layui-table-box{position: relative; overflow: hidden;}
.layui-table-view{margin: 10px 0;}
.layui-table-view .layui-table{position: relative; width: auto; margin: 0;}
@@ -1171,12 +1171,12 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;}
.layui-colorpicker-trigger-i.layui-icon-close{color: #999;}
.layui-colorpicker-main{position: absolute; z-index: 4999; width: 280px; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main{position: absolute; z-index: 66666666; width: 280px; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main-wrapper{height: 180px; position: relative;}
.layui-colorpicker-basis{width: 260px; height: 100%; position: relative;}
.layui-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
.layui-colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
.layui-colorpicker-basis-cursor{width: 5px; height: 5px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px;}
.layui-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer;}
.layui-colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
.layui-colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
.layui-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}

53
src/lay/modules/colorpicker.js
View File

@@ -132,7 +132,7 @@ layui.define('jquery', function(exports){
//转化成所需rgb格式
,RGBSTo = function(rgbs){
var regexp = /[0-9]{1,3}/g;
var re = rgbs.match(regexp);
var re = rgbs.match(regexp) || [];
return {r:re[0], g:re[1], b:re[2]};
}
@@ -177,7 +177,7 @@ layui.define('jquery', function(exports){
if(options.color){
bgstr = options.color;
if(options.color.match(/[0-9]{1,3}/g).length > 3){ //啥意思?
if((options.color.match(/[0-9]{1,3}/g) || []).length > 3){ //需要优化
if(!(options.alpha && options.format == 'rgb')){
bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color)))
}
@@ -243,7 +243,7 @@ layui.define('jquery', function(exports){
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
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>'
@@ -367,7 +367,7 @@ layui.define('jquery', function(exports){
var rgb = RGBSTo(bgcolor);
//如果开启透明度而没有设置，则给默认值
if(bgcolor.match(/[0-9]{1,3}/g).length == 3){
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 {
@@ -556,7 +556,7 @@ layui.define('jquery', function(exports){
_h = hsb.h;
_s = hsb.s;
_b = hsb.b;
if(color.match(/[0-9]{1,3}/g).length == 3) a = 1;
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);
@@ -565,7 +565,7 @@ layui.define('jquery', function(exports){
};
//颜色选择器hsb转换
Class.prototype.select = function(h,s,b){
Class.prototype.select = function(h, s, b, type){
var that = this
,options = that.config
,hex = HSBToHEX({h:h, s:100, b:100})
@@ -574,12 +574,17 @@ layui.define('jquery', function(exports){
,top = 180 - b/100*180 - 3
,left = s/100*260 - 3;
//滑块的top
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop);
//颜色选择器的背景
that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex;
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).find('.' + PICKER_BASIS_CUR).css({"top": top, "left": 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);
};
@@ -589,7 +594,7 @@ layui.define('jquery', function(exports){
,options = that.config
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT) //颜色选择器表单
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' input') //颜色选择器表单
,pickerEvents = {
//清空
@@ -603,28 +608,33 @@ layui.define('jquery', function(exports){
}
//确认
,confirm: function(othis){
var value = elemPickerInput.find('input').val()
,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);
elemPickerInput.find('input').val(value);
elemColorBoxSpan[0].style.background = '#' + HSBToHEX(hsb);
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
if(value.match(/[0-9]{1,3}/g).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){
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);
that.select(hsb.h, hsb.s, hsb.b);
elemColorBoxSpan[0].style.background = '#' + HSBToHEX(hsb);
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);
@@ -639,6 +649,11 @@ layui.define('jquery', function(exports){
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');
});
}
//颜色选择器输入

80
src/lay/modules/table.js
View File

@@ -127,16 +127,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,'{{# if(d.data.toolbar){ }}'
,'<div class="layui-table-tool">'
,'<div class="layui-table-tool-temp">'
,'<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>'
,'</div>'
,'<div class="layui-table-tool-self">'
,'<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i class="layui-icon layui-icon-cols"></i></div>'
,'<div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i class="layui-icon layui-icon-export"></i></div>'
,'<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>'
,'</div>'
,'<div class="layui-table-tool-temp"></div>'
,'<div class="layui-table-tool-self"></div>'
,'</div>'
,'{{# } }}'
@@ -221,6 +213,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
limit: 10 //每页显示的数量
,loading: true //请求数据时，是否显示loading
,cellMinWidth: 60 //所有单元格默认最小宽度
,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
,text: {
none: '无数据'
}
@@ -267,6 +260,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
options.height = _WIN.height() - that.fullHeightGap;
}
//高度不能低于最小值
if(options.height && options.height < 248) options.height = 248;
//初始化一些参数
that.setInit();
@@ -299,13 +295,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.layTotal = reElem.find(ELEM_TOTAL);
that.layPage = reElem.find(ELEM_PAGE);
//添加工具栏模板
var toolbarHtml = $(options.toolbar).html() || '';
if(options.toolbar && toolbarHtml){
that.layTool.find('.layui-table-tool-temp').html(
laytpl(toolbarHtml).render(options)
);
}
//初始化工具栏
that.renderToolbar();
//让表格平铺
that.fullSize();
@@ -380,6 +371,60 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
});
};
//初始工具栏
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(options.toolbar){
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.setColsWidth = function(){
var that = this
@@ -984,7 +1029,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//减去工具栏的高度
if(options.toolbar){
bodyHeight = bodyHeight - (that.layTool.outerHeight() || 50);
}

2
src/layui.js
View File

@@ -19,7 +19,7 @@
}
,Layui = function(){
this.v = '2.4.0'; //版本号
this.v = '2.4.1'; //版本号
}
//获取layui所在目录