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

1.0.4

Browse Source
This commit is contained in:
sentsin
2016-11-18 06:52:55 +08:00
parent 303fc4dcf4
commit bb6f99343f
29 changed files with 258 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/css/layui.css
View File

@@ -74,8 +74,8 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-side-scroll{width: 220px; height: 100%; overflow-x: hidden;}
.layui-body{position: absolute; left: 200px; right: 0; top: 0; bottom: 0; z-index: 998; width: auto; overflow: hidden; overflow-y: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* 后台布局风格 */.layui-layout-admin .layui-header{border-bottom: 5px solid #5FB878;}
.layui-layout-admin .layui-side{top: 65px; width: 200px; overflow-x: hidden;}
/* 后台布局风格 */.layui-layout-admin .layui-header{border-bottom: 5px solid #1AA094;}
.layui-layout-admin .layui-side{top: 70px; width: 200px; overflow-x: hidden;}
.layui-layout-admin .layui-body{top: 70px; bottom: 44px;}
.layui-layout-admin .layui-main{width: auto; margin: 0 15px;}
.layui-layout-admin .layui-footer{position: fixed; left: 200px; right: 0; bottom: 0; height: 44px; background-color: #eee;}
@@ -158,11 +158,15 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-select dl dd:hover{background-color: #f2f2f2;}
.layui-form-select .layui-select-group dd{padding-left: 20px;}
.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
.layui-form-select dl dd.layui-disabled{background-color: #fff;}
.layui-form-selected dl{display: block;}
.layui-form-selected .layui-edge{margin-top: -9px; -webkit-transform:rotate(180deg); transform: rotate(180deg);}
.layui-form-selected .layui-edge{margin-top: -3px\0; }
:root .layui-form-selected .layui-edge{margin-top: -9px\0/IE9;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2}
/* 复选框 */.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 28px; margin: 4px 10px 0 0; padding-right: 30px; border: 1px solid #d2d2d2; background-color: #fff; cursor: pointer; font-size: 0; border-radius: 2px; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box !important;}
.layui-form-checkbox:hover{border: 1px solid #c2c2c2;}
.layui-form-checkbox *{display: inline-block; vertical-align: middle;}
@@ -180,12 +184,17 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-onswitch:before{content: 'ON'; color: #fff;}
.layui-form-onswitch i{left: 30px; background-color: #fff;}
.layui-checkbox-disbaled{border-color: #e2e2e2 !important;}
.layui-checkbox-disbaled span{background-color: #e2e2e2 !important;}
.layui-checkbox-disbaled:hover i{color: #fff !important;}
/* 单选框 */
.layui-form-radio{display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0;}
.layui-form-radio *{display: inline-block; vertical-align: middle;}
.layui-form-radio i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
.layui-form-radio span{font-size: 14px;}
.layui-form-radioed i,.layui-form-radio i:hover{color: #5FB878;}
.layui-radio-disbaled i{color: #e2e2e2 !important;}
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 80px; padding: 8px 15px; line-height: 20px; border: 1px solid #e6e6e6; border-radius: 2px 0 0 2px; text-align: center; background-color: #FBFBFB; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layui-form-pane .layui-input-inline{margin-left: -1px;}
@@ -261,13 +270,13 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-flow-more a i{font-size: 30px; color: #737383;}
/** 分页 **/
.layui-laypage{display: inline-block; vertical-align: middle; margin: 10px 0; background-color: #fff; font-size: 0;}
.layui-laypage{display: inline-block; *display: block; *zoom: 1; vertical-align: middle; margin: 10px 0; background-color: #fff; font-size: 0;}
.layui-laypage>*:first-child,
.layui-laypage>*:first-child em{border-radius: 2px 0 0 2px;}
.layui-laypage>*:last-child,
.layui-laypage>*:last-child em{border-radius: 0 2px 2px 0;}
.layui-laypage span,
.layui-laypage a{display: inline-block; vertical-align: middle; padding: 0 15px; border: 1px solid #e2e2e2; height: 28px; line-height: 28px; margin: 0 -1px -1px 0; color: #333; font-size: 12px;}
.layui-laypage a{display: inline-block; *display: block; *zoom: 1; vertical-align: middle; padding: 0 15px; border: 1px solid #e2e2e2; height: 28px; line-height: 28px; margin: 0 -1px 5px 0; color: #333; font-size: 12px;}
.layui-laypage em{font-style: normal;}
.layui-laypage span{color:#999; font-weight: 700;}
.layui-laypage a{ text-decoration: none;}

215
src/lay/modules/element.js
View File

@@ -31,104 +31,124 @@ layui.define('jquery', function(exports){
return layui.onevent(MOD_NAME, events, callback);
};
//初始化元素操作
Element.prototype.init = function(type){
var that = this, call = {
//Tab点击
tabClick: function(e, index){
var othis = $(this)
,index = index || othis.index()
,parents = othis.parents('.layui-tab')
,item = parents.children('.layui-tab-content').children('.layui-tab-item')
,filter = parents.attr('lay-filter');
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自适应
,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">&#xe61a;</i></span>');
if(that === window && device.ie != 8){
call.hideTabMore(true)
}
//允许关闭
if(othis.attr('lay-allowClose')){
if(!title.find('li').find('.'+CLOSE)[0]){
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
close.on('click', function(){
var li = $(this).parent(), index = li.index();
var parents = li.parents('.layui-tab');
var item = parents.children('.layui-tab-content').children('.layui-tab-item')
if(li.hasClass(THIS)){
if(li.next()[0]){
call.tabClick.call(li.next()[0], {}, index + 1);
} else if(li.prev()[0]){
call.tabClick.call(li.prev()[0], {}, index - 1);
}
}
li.remove();
item.eq(index).remove();
});
title.find('li').append(close);
}
}
if(title.prop('scrollWidth') > title.outerWidth()+1){
if(title.find('.'+BAR)[0]) return;
title.append(span);
span.on('click', function(e){
title[this.title ? 'removeClass' : 'addClass'](MORE);
this.title = this.title ? '' : '收缩';
});
} else {
title.find('.'+BAR).remove();
}
});
}
//隐藏更多Tab
,hideTabMore: function(e){
var tsbTitle = $('.layui-tab-title');
if(e === true || e.target.getAttribute('lay-stope') !== 'tabmore'){
tsbTitle.removeClass('layui-tab-more');
tsbTitle.find('.layui-tab-bar').attr('title','');
//外部Tab新增
Element.prototype.tabAdd = function(filter, options){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children('.layui-tab-title')
,contElem = tabElem.children('.layui-tab-content');
titElem.append('<li>'+ (options.title||'unnaming') +'</li>');
contElem.append('<div class="layui-tab-item">'+ (options.content||'') +'</div>');
return this.init();
};
//外部Tab删除
Element.prototype.tabDelete = function(filter, index){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,liElem = tabElem.children('.layui-tab-title').find('>li').eq(index);
call.tabDelete(null, liElem);
return this;
};
//外部Tab切换
Element.prototype.tabChange = function(filter, index){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,liElem = tabElem.children('.layui-tab-title').find('>li').eq(index);
call.tabClick(null, index, liElem);
return this;
};
//基础事件体
var call = {
//Tab点击
tabClick: function(e, index, liElem){
var othis = liElem || $(this)
,index = index || othis.index()
,parents = othis.parents('.layui-tab')
,item = parents.children('.layui-tab-content').children('.layui-tab-item')
,filter = parents.attr('lay-filter');
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();
var parents = li.parents('.layui-tab');
var item = parents.children('.layui-tab-content').children('.layui-tab-item')
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();
}
,items = {
//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">&#xe61a;</i></span>');
if(that === window && device.ie != 8){
call.hideTabMore(true)
}
//允许关闭
if(othis.attr('lay-allowClose')){
if(!title.find('li').find('.'+CLOSE)[0]){
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
close.on('click', call.tabDelete);
title.find('li').append(close);
}
}
if(title.prop('scrollWidth') > title.outerWidth()+1){
if(title.find('.'+BAR)[0]) return;
title.append(span);
span.on('click', function(e){
title[this.title ? 'removeClass' : 'addClass'](MORE);
this.title = this.title ? '' : '收缩';
});
} else {
title.find('.'+BAR).remove();
}
});
}
//隐藏更多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','');
}
}
};
//初始化元素操作
Element.prototype.init = function(type){
var that = this, items = {
//Tab选项卡
tab: function(){
var TITLE = '.layui-tab-title li';
call.tabAuto.call({});
//Tab切换
dom.off('click', TITLE, call.tabClick)
.on('click', TITLE, call.tabClick);
//自适应
$(window).off('resize', call.tabAuto)
.on('resize', call.tabAuto);
//隐藏展开的Tab
dom.off('click', call.hideTabMore)
.on('click', call.hideTabMore);
}
//导航菜单
,nav: function(){
var ELEM = '.layui-nav', ITEM = 'layui-nav-item', BAR = 'layui-nav-bar'
@@ -154,7 +174,7 @@ layui.define('jquery', function(exports){
width: othis.width()
,opacity: 1
});
}, TIME);
}, device.ie && device.ie < 10 ? 0 : TIME);
clearTimeout(timeEnd);
if(child.css('display') === 'block'){
@@ -173,7 +193,7 @@ layui.define('jquery', function(exports){
,itemElem = othis.find('.'+ITEM);
//Hover滑动效果
if(!othis.find('.'+BAR)[0] && !(device.ie && device.ie < 10)){
if(!othis.find('.'+BAR)[0]){
othis.append(bar);
itemElem.on('mouseenter', function(){
follow.call(this, bar, othis);
@@ -233,9 +253,10 @@ layui.define('jquery', function(exports){
var othis = $(this)
,separator = othis.attr('lay-separator') || '>'
,aNode = othis.find('a');
if(aNode.find('.layui-box')[0]) return;
aNode.each(function(index){
if(index === aNode.length - 1) return;
$(this).append('<span>'+ separator +'</span>');
$(this).append('<span class="layui-box">'+ separator +'</span>');
});
othis.css('visibility', 'visible');
});
@@ -247,10 +268,14 @@ layui.define('jquery', function(exports){
});
};
var element = new Element(), dom = $(document);
element.init();
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, function(options){
return element.set(options);
});

37
src/lay/modules/form.js
View File

@@ -14,7 +14,7 @@ layui.define('layer', function(exports){
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show'
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show', DISABLED = 'layui-disabled'
,Form = function(){
this.config = {
@@ -83,9 +83,11 @@ layui.define('layer', function(exports){
}
}
,events = function(reElem){
,events = function(reElem, disabled){
var select = $(this), title = reElem.find('.' + TITLE);
if(disabled) return;
//展开下拉
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? reElem.removeClass(CLASS+'ed') : (
@@ -98,6 +100,8 @@ layui.define('layer', function(exports){
reElem.find('dl>dd').on('click', function(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器
if(othis.hasClass(DISABLED)) return false;
select.val(value).removeClass('layui-form-danger'), title.find('input').val(othis.text());
othis.addClass(THIS).siblings().removeClass(THIS);
@@ -108,7 +112,7 @@ layui.define('layer', function(exports){
});
reElem.find('dl>dt').on('click', function(e){
layui.stope(e);
return false;
});
//关闭下拉
@@ -116,12 +120,12 @@ layui.define('layer', function(exports){
}
selects.each(function(index, select){
var othis = $(this), hasRender = othis.next('.'+CLASS);
var othis = $(this), hasRender = othis.next('.'+CLASS), disabled = this.disabled;
var value = select.value, selected = $(select.options[select.selectedIndex]); //获取当前选中项
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS +'">'
,'<div class="'+ TITLE +'"><input type="text" placeholder="'+ (select.options[0].innerHTML ? select.options[0].innerHTML : TIPS) +'" value="'+ (value ? selected.html() : '') +'" readonly class="layui-input layui-unselect">'
var reElem = $(['<div class="layui-unselect '+ CLASS + (disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'"><input type="text" placeholder="'+ (select.options[0].innerHTML ? select.options[0].innerHTML : TIPS) +'" value="'+ (value ? selected.html() : '') +'" readonly class="layui-input 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 = [];
@@ -130,9 +134,7 @@ layui.define('layer', function(exports){
if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>');
} else {
arr.push('<dd lay-value="'+ item.value +'" '+ (value === item.value
? 'class="'+ THIS +'"'
: '')+'>'+ item.innerHTML +'</dd>');
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ item.innerHTML +'</dd>');
}
});
return arr.join('');
@@ -141,7 +143,7 @@ layui.define('layer', function(exports){
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
othis.after(reElem);
events.call(this, reElem);
events.call(this, reElem, disabled);
});
}
//复选框/开关
@@ -158,6 +160,9 @@ layui.define('layer', function(exports){
//勾选
reElem.on('click', function(){
var filter = check.attr('lay-filter'); //获取过滤器
if(check[0].disabled) return;
check[0].checked ? (
check[0].checked = false
,reElem.removeClass(RE_CLASS[1])
@@ -173,14 +178,14 @@ layui.define('layer', function(exports){
}
checks.each(function(index, check){
var othis = $(this), skin = othis.attr('lay-skin');
var othis = $(this), skin = othis.attr('lay-skin'), disabled = this.disabled;
if(skin === 'switch') skin = '_'+skin;
var RE_CLASS = CLASS[skin] || CLASS.checkbox;
//替代元素
var hasRender = othis.next('.' + RE_CLASS[0]);
var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] + (
check.checked ? (' '+RE_CLASS[1]) : '') +'">'
check.checked ? (' '+RE_CLASS[1]) : '') + (disabled ? ' layui-checkbox-disbaled '+DISABLED : '') +'">'
,{
_switch: '<i></i>'
}[skin] || ('<span>'+ (check.title || '勾选') +'</span><i class="layui-icon">&#xe618;</i>')
@@ -202,7 +207,9 @@ layui.define('layer', function(exports){
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 +']'); //找到相同name的兄弟
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);
@@ -223,10 +230,10 @@ layui.define('layer', function(exports){
};
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS);
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS + (radio.checked ? (' '+CLASS+'ed') : '') +'">'
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>'
,'<span>'+ (radio.title||'未命名') +'</span>'
,'</div>'].join(''));

2
src/layui.js
View File

@@ -13,7 +13,7 @@
"use strict";
var Lay = function(){
this.v = '1.0.3'; //版本号
this.v = '1.0.4'; //版本号
};
Lay.fn = Lay.prototype;