mirror of https://github.com/layui/layui
优化 lay 的 `.find()` 元素操作，并优化大量代码排版，统一风格
贤心
parent
50e077537e
commit
cd2b504610
|
|
@ -4,51 +4,52 @@
|
|||
;!function(window){ // gulp build: lay-header
|
||||
"use strict";
|
||||
|
||||
var MOD_NAME = 'lay' //模块名
|
||||
,document = window.document
|
||||
var MOD_NAME = 'lay'; // 模块名
|
||||
var document = window.document;
|
||||
|
||||
//DOM查找
|
||||
,lay = function(selector){
|
||||
return new LAY(selector);
|
||||
}
|
||||
// 元素查找
|
||||
var lay = function(selector){
|
||||
return new Class(selector);
|
||||
};
|
||||
|
||||
// DOM 构造器
|
||||
,LAY = function(selector){
|
||||
var index = 0;
|
||||
var nativeDOM = typeof selector === 'object' ? function(){
|
||||
// 构造器
|
||||
var Class = function(selector){
|
||||
var that = this;
|
||||
var elem = typeof selector === 'object' ? function(){
|
||||
// 仅适配简单元素对象
|
||||
return layui.isArray(selector) ? selector : [selector];
|
||||
}() : (
|
||||
this.selector = selector,
|
||||
document.querySelectorAll(selector || null)
|
||||
);
|
||||
for(; index < nativeDOM.length; index++){
|
||||
this.push(nativeDOM[index]);
|
||||
}
|
||||
|
||||
lay.each(elem, function(index, item){
|
||||
that.push(elem[index]);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
lay 对象操作
|
||||
*/
|
||||
|
||||
LAY.prototype = [];
|
||||
LAY.prototype.constructor = LAY;
|
||||
Class.fn = Class.prototype = [];
|
||||
Class.fn.constructor = Class;
|
||||
|
||||
//普通对象深度扩展
|
||||
// 普通对象深度扩展
|
||||
lay.extend = function(){
|
||||
var ai = 1
|
||||
,length
|
||||
,args = arguments
|
||||
,clone = function(target, obj){
|
||||
target = target || (layui.type(obj) === 'array' ? [] : {}); //目标对象
|
||||
var ai = 1;
|
||||
var length;
|
||||
var args = arguments;
|
||||
var clone = function(target, obj){
|
||||
target = target || (layui.type(obj) === '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] : {};
|
||||
length = args.length
|
||||
|
|
@ -61,39 +62,29 @@
|
|||
return args[0];
|
||||
};
|
||||
|
||||
//lay 模块版本
|
||||
lay.v = '1.0.8';
|
||||
|
||||
//ie版本
|
||||
// ie 版本
|
||||
lay.ie = function(){
|
||||
var agent = navigator.userAgent.toLowerCase();
|
||||
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
||||
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于 ie11 并没有 msie 的标识
|
||||
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于 ie11 并没有 msie 的标识
|
||||
) : false;
|
||||
}();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取 layui 常见方法，以便用于组件单独版
|
||||
*/
|
||||
|
||||
lay.layui = layui || {};
|
||||
lay.getPath = layui.cache.dir; //获取当前 JS 所在目录
|
||||
lay.stope = layui.stope; //中止冒泡
|
||||
lay.each = function(){ //遍历
|
||||
lay.getPath = layui.cache.dir; // 获取当前 JS 所在目录
|
||||
lay.stope = layui.stope; // 中止冒泡
|
||||
lay.each = function(){ // 遍历
|
||||
layui.each.apply(layui, arguments);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//数字前置补零
|
||||
// 数字前置补零
|
||||
lay.digit = function(num, length){
|
||||
if(!(typeof num === 'string' || typeof num === 'number')) return '';
|
||||
|
||||
|
|
@ -106,7 +97,7 @@
|
|||
return num < Math.pow(10, length) ? str + num : num;
|
||||
};
|
||||
|
||||
//创建元素
|
||||
// 创建元素
|
||||
lay.elem = function(elemName, attr){
|
||||
var elem = document.createElement(elemName);
|
||||
lay.each(attr || {}, function(key, value){
|
||||
|
|
@ -115,22 +106,22 @@
|
|||
return elem;
|
||||
};
|
||||
|
||||
//当前页面是否存在滚动条
|
||||
// 当前页面是否存在滚动条
|
||||
lay.hasScrollbar = function(){
|
||||
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
|
||||
};
|
||||
|
||||
//元素定位
|
||||
// 元素定位
|
||||
lay.position = function(elem, elemView, obj){
|
||||
if(!elemView) return;
|
||||
obj = obj || {};
|
||||
|
||||
//如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
|
||||
// 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
|
||||
if(elem === document || elem === lay('body')[0]){
|
||||
obj.clickType = 'right';
|
||||
}
|
||||
|
||||
//绑定绑定元素的坐标
|
||||
// 绑定绑定元素的坐标
|
||||
var rect = obj.clickType === 'right' ? function(){
|
||||
var e = obj.e || window.event || {};
|
||||
return {
|
||||
|
|
@ -140,62 +131,62 @@
|
|||
,bottom: e.clientY
|
||||
}
|
||||
}() : elem.getBoundingClientRect()
|
||||
,elemWidth = elemView.offsetWidth //控件的宽度
|
||||
,elemHeight = elemView.offsetHeight //控件的高度
|
||||
,elemWidth = elemView.offsetWidth // 控件的宽度
|
||||
,elemHeight = elemView.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(obj.align === 'center'){
|
||||
left = left - (elemWidth - elem.offsetWidth)/2;
|
||||
} else if(obj.align === 'right'){
|
||||
left = left - elemWidth + elem.offsetWidth;
|
||||
}
|
||||
|
||||
//判断右侧是否超出边界
|
||||
// 判断右侧是否超出边界
|
||||
if(left + elemWidth + margin > winArea('width')){
|
||||
left = winArea('width') - elemWidth - margin; //如果超出右侧，则将面板向右靠齐
|
||||
left = winArea('width') - elemWidth - margin; // 如果超出右侧，则将面板向右靠齐
|
||||
}
|
||||
//左侧是否超出边界
|
||||
// 左侧是否超出边界
|
||||
if(left < margin) left = margin;
|
||||
|
||||
//判断底部和顶部是否超出边界
|
||||
// 判断底部和顶部是否超出边界
|
||||
if(top + elemHeight + margin > winArea()){
|
||||
//优先顶部是否有足够区域显示完全
|
||||
// 优先顶部是否有足够区域显示完全
|
||||
if(rect.top > elemHeight + margin){
|
||||
top = rect.top - elemHeight - margin*2; //顶部有足够的区域显示
|
||||
top = rect.top - elemHeight - margin*2; // 顶部有足够的区域显示
|
||||
} else {
|
||||
//如果面板是鼠标右键弹出，且顶部没有足够区域显示，则将面板向底部靠齐
|
||||
// 如果面板是鼠标右键弹出，且顶部没有足够区域显示，则将面板向底部靠齐
|
||||
if(obj.clickType === 'right'){
|
||||
top = winArea() - elemHeight - margin*2;
|
||||
if(top < 0) top = 0; //不能溢出窗口顶部
|
||||
if(top < 0) top = 0; // 不能溢出窗口顶部
|
||||
} else {
|
||||
top = margin; // 位置计算逻辑完备性处理
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//定位类型
|
||||
// 定位类型
|
||||
var position = obj.position;
|
||||
if(position) elemView.style.position = position;
|
||||
|
||||
//设置坐标
|
||||
// 设置坐标
|
||||
elemView.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
|
||||
elemView.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
|
||||
|
||||
//防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
|
||||
// 防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
|
||||
if(!lay.hasScrollbar()){
|
||||
var rect1 = elemView.getBoundingClientRect();
|
||||
//如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
|
||||
// 如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
|
||||
if(!obj.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){
|
||||
obj.SYSTEM_RELOAD = true;
|
||||
setTimeout(function(){
|
||||
|
|
@ -226,7 +217,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
//元素是否属于顶级元素（document 或 body）
|
||||
// 元素是否属于顶级元素（document 或 body）
|
||||
lay.isTopElem = function(elem){
|
||||
var topElems = [document, lay('body')[0]]
|
||||
,matched = false;
|
||||
|
|
@ -237,9 +228,15 @@
|
|||
});
|
||||
return matched;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* lay 元素操作
|
||||
*/
|
||||
|
||||
//追加字符
|
||||
LAY.addStr = function(str, new_str){
|
||||
|
||||
// 追加字符
|
||||
Class.addStr = function(str, new_str){
|
||||
str = str.replace(/\s+/, ' ');
|
||||
new_str = new_str.replace(/\s+/, ' ').split(' ');
|
||||
lay.each(new_str, function(ii, item){
|
||||
|
|
@ -250,8 +247,8 @@
|
|||
return str.replace(/^\s|\s$/, '');
|
||||
};
|
||||
|
||||
//移除值
|
||||
LAY.removeStr = function(str, new_str){
|
||||
// 移除值
|
||||
Class.removeStr = function(str, new_str){
|
||||
str = str.replace(/\s+/, ' ');
|
||||
new_str = new_str.replace(/\s+/, ' ').split(' ');
|
||||
lay.each(new_str, function(ii, item){
|
||||
|
|
@ -263,50 +260,44 @@
|
|||
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
|
||||
};
|
||||
|
||||
//查找子元素
|
||||
LAY.prototype.find = function(selector){
|
||||
// 查找子元素
|
||||
Class.fn.find = function(selector){
|
||||
var that = this;
|
||||
var index = 0, arr = []
|
||||
,isObject = typeof selector === 'object';
|
||||
|
||||
var elem = [];
|
||||
var isObject = typeof selector === 'object';
|
||||
|
||||
this.each(function(i, item){
|
||||
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null);
|
||||
for(; index < nativeDOM.length; index++){
|
||||
arr.push(nativeDOM[index]);
|
||||
}
|
||||
that.shift();
|
||||
var children = isObject && item.contains(selector)
|
||||
? selector
|
||||
: item.querySelectorAll(selector || null);
|
||||
|
||||
lay.each(children, function(index, child){
|
||||
elem.push(child);
|
||||
});
|
||||
});
|
||||
|
||||
if(!isObject){
|
||||
that.selector = (that.selector ? that.selector + ' ' : '') + selector
|
||||
}
|
||||
|
||||
lay.each(arr, function(i, item){
|
||||
that.push(item);
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
return lay(elem);
|
||||
};
|
||||
|
||||
//DOM遍历
|
||||
LAY.prototype.each = function(fn){
|
||||
// 元素遍历
|
||||
Class.fn.each = function(fn){
|
||||
return lay.each.call(this, this, fn);
|
||||
};
|
||||
|
||||
//添加css类
|
||||
LAY.prototype.addClass = function(className, type){
|
||||
// 添加 className
|
||||
Class.fn.addClass = function(className, type){
|
||||
return this.each(function(index, item){
|
||||
item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)
|
||||
item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
|
||||
});
|
||||
};
|
||||
|
||||
//移除 css 类
|
||||
LAY.prototype.removeClass = function(className){
|
||||
// 移除 className
|
||||
Class.fn.removeClass = function(className){
|
||||
return this.addClass(className, true);
|
||||
};
|
||||
|
||||
//是否包含 css 类
|
||||
LAY.prototype.hasClass = function(className){
|
||||
// 是否包含 css 类
|
||||
Class.fn.hasClass = function(className){
|
||||
var has = false;
|
||||
this.each(function(index, item){
|
||||
if(new RegExp('\\b'+ className +'\\b').test(item.className)){
|
||||
|
|
@ -316,10 +307,10 @@
|
|||
return has;
|
||||
};
|
||||
|
||||
//添加或获取 css style
|
||||
LAY.prototype.css = function(key, value){
|
||||
var that = this
|
||||
,parseValue = function(v){
|
||||
// 添加或获取 css style
|
||||
Class.fn.css = function(key, value){
|
||||
var that = this;
|
||||
var parseValue = function(v){
|
||||
return isNaN(v) ? v : (v +'px');
|
||||
};
|
||||
return (typeof key === 'string' && value === undefined) ? function(){
|
||||
|
|
@ -331,28 +322,28 @@
|
|||
});
|
||||
};
|
||||
|
||||
//添加或获取宽度
|
||||
LAY.prototype.width = function(value){
|
||||
// 添加或获取宽度
|
||||
Class.fn.width = function(value){
|
||||
var that = this;
|
||||
return value === undefined ? function(){
|
||||
if(that.length > 0) return that[0].offsetWidth; //此处还需做兼容
|
||||
if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
|
||||
}() : that.each(function(index, item){
|
||||
that.css('width', value);
|
||||
});
|
||||
};
|
||||
|
||||
//添加或获取高度
|
||||
LAY.prototype.height = function(value){
|
||||
// 添加或获取高度
|
||||
Class.fn.height = function(value){
|
||||
var that = this;
|
||||
return value === undefined ? function(){
|
||||
if(that.length > 0) return that[0].offsetHeight; //此处还需做兼容
|
||||
if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
|
||||
}() : that.each(function(index, item){
|
||||
that.css('height', value);
|
||||
});
|
||||
};
|
||||
|
||||
//添加或获取属性
|
||||
LAY.prototype.attr = function(key, value){
|
||||
// 添加或获取属性
|
||||
Class.fn.attr = function(key, value){
|
||||
var that = this;
|
||||
return value === undefined ? function(){
|
||||
if(that.length > 0) return that[0].getAttribute(key);
|
||||
|
|
@ -361,15 +352,15 @@
|
|||
});
|
||||
};
|
||||
|
||||
//移除属性
|
||||
LAY.prototype.removeAttr = function(key){
|
||||
// 移除属性
|
||||
Class.fn.removeAttr = function(key){
|
||||
return this.each(function(index, item){
|
||||
item.removeAttribute(key);
|
||||
});
|
||||
};
|
||||
|
||||
//设置或获取 HTML 内容
|
||||
LAY.prototype.html = function(html){
|
||||
// 设置或获取 HTML 内容
|
||||
Class.fn.html = function(html){
|
||||
var that = this;
|
||||
return html === undefined ? function(){
|
||||
if(that.length > 0) return that[0].innerHTML;
|
||||
|
|
@ -378,8 +369,8 @@
|
|||
});
|
||||
};
|
||||
|
||||
//设置或获取值
|
||||
LAY.prototype.val = function(value){
|
||||
// 设置或获取值
|
||||
Class.fn.val = function(value){
|
||||
var that = this;
|
||||
return value === undefined ? function(){
|
||||
if(that.length > 0) return that[0].value;
|
||||
|
|
@ -388,8 +379,8 @@
|
|||
});
|
||||
};
|
||||
|
||||
//追加内容
|
||||
LAY.prototype.append = function(elem){
|
||||
// 追加内容
|
||||
Class.fn.append = function(elem){
|
||||
return this.each(function(index, item){
|
||||
typeof elem === 'object'
|
||||
? item.appendChild(elem)
|
||||
|
|
@ -397,15 +388,15 @@
|
|||
});
|
||||
};
|
||||
|
||||
//移除内容
|
||||
LAY.prototype.remove = function(elem){
|
||||
// 移除内容
|
||||
Class.fn.remove = function(elem){
|
||||
return this.each(function(index, item){
|
||||
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
|
||||
});
|
||||
};
|
||||
|
||||
//事件绑定
|
||||
LAY.prototype.on = function(eventName, fn){
|
||||
// 事件绑定
|
||||
Class.fn.on = function(eventName, fn){
|
||||
return this.each(function(index, item){
|
||||
item.attachEvent ? item.attachEvent('on' + eventName, function(e){
|
||||
e.target = e.srcElement;
|
||||
|
|
@ -414,8 +405,8 @@
|
|||
});
|
||||
};
|
||||
|
||||
//解除事件
|
||||
LAY.prototype.off = function(eventName, fn){
|
||||
// 解除事件
|
||||
Class.fn.off = function(eventName, fn){
|
||||
return this.each(function(index, item){
|
||||
item.detachEvent
|
||||
? item.detachEvent('on'+ eventName, fn)
|
||||
|
|
@ -423,12 +414,12 @@
|
|||
});
|
||||
};
|
||||
|
||||
//暴露 lay 到全局作用域
|
||||
// export
|
||||
window.lay = lay;
|
||||
|
||||
//如果在 layui 体系中
|
||||
// 输出为 layui 模块
|
||||
if(window.layui && layui.define){
|
||||
layui.define(function(exports){ //layui 加载
|
||||
layui.define(function(exports){
|
||||
exports(MOD_NAME, lay);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue