github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

优化 dropdown 代码书写规范

pull/1307/head
贤心 2023-07-11 15:20:08 +08:00
parent f5eb949b32
commit c323af0d8a
1 changed files with 140 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/modules/dropdown.js
View File

@ -6,36 +6,36 @@
layui.define(['jquery', 'laytpl', 'lay'], function(exports){
"use strict";
var $ = layui.$
,laytpl = layui.laytpl
,hint = layui.hint()
,device = layui.device()
,clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown')
var $ = layui.$;
var laytpl = layui.laytpl;
var hint = layui.hint();
var device = layui.device();
var clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown');
// 模块名
,MOD_NAME = 'dropdown'
,MOD_INDEX = 'layui_'+ MOD_NAME +'_index' //模块索引名
var MOD_NAME = 'dropdown';
var MOD_INDEX = 'layui_'+ MOD_NAME +'_index'; // 模块索引名
// 外部接口
,dropdown = {
config: {}
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
var dropdown = {
config: {},
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
// 设置全局项
,set: function(options){
set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
},
// 事件
,on: function(events, callback){
on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
};
// 操作当前实例
,thisModule = function(){
var thisModule = function(){
var that = this;
var options = that.config;
var id = options.id;
@ -43,28 +43,41 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
thisModule.that[id] = that; // 记录当前实例对象
return {
config: options
config: options,
// 重置实例
,reload: function(options){
reload: function(options){
that.reload.call(that, options);
}
,reloadData: function(options){
},
reloadData: function(options){
dropdown.reloadData(id, options);
}
,close: function () {
},
close: function () {
that.remove()
}
}
}
};
// 字符常量
,STR_ELEM = 'layui-dropdown', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled', STR_NONE = 'layui-none'
,STR_ITEM_UP = 'layui-menu-item-up', STR_ITEM_DOWN = 'layui-menu-item-down', STR_MENU_TITLE = 'layui-menu-body-title', STR_ITEM_GROUP = 'layui-menu-item-group', STR_ITEM_PARENT = 'layui-menu-item-parent', STR_ITEM_DIV = 'layui-menu-item-divider', STR_ITEM_CHECKED = 'layui-menu-item-checked', STR_ITEM_CHECKED2 = 'layui-menu-item-checked2', STR_MENU_PANEL = 'layui-menu-body-panel', STR_MENU_PANEL_L = 'layui-menu-body-panel-left', STR_ELEM_SHADE = 'layui-dropdown-shade'
var STR_ELEM = 'layui-dropdown';
var STR_HIDE = 'layui-hide';
var STR_DISABLED = 'layui-disabled';
var STR_NONE = 'layui-none';
var STR_ITEM_UP = 'layui-menu-item-up';
var STR_ITEM_DOWN = 'layui-menu-item-down';
var STR_MENU_TITLE = 'layui-menu-body-title';
var STR_ITEM_GROUP = 'layui-menu-item-group';
var STR_ITEM_PARENT = 'layui-menu-item-parent';
var STR_ITEM_DIV = 'layui-menu-item-divider';
var STR_ITEM_CHECKED = 'layui-menu-item-checked';
var STR_ITEM_CHECKED2 = 'layui-menu-item-checked2';
var STR_MENU_PANEL = 'layui-menu-body-panel';
var STR_MENU_PANEL_L = 'layui-menu-body-panel-left';
var STR_ELEM_SHADE = 'layui-dropdown-shade';
,STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE
var STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE;
// 构造器
,Class = function(options){
var Class = function(options){
var that = this;
that.index = ++dropdown.index;
that.config = $.extend({}, that.config, dropdown.config, options);
@ -73,16 +86,16 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 默认配置
Class.prototype.config = {
trigger: 'click' //事件类型
,content: '' //自定义菜单内容
,className: '' //自定义样式类名
,style: '' //设置面板 style 属性
,show: false //是否初始即显示菜单面板
,isAllowSpread: true //是否允许菜单组展开收缩
,isSpreadItem: true //是否初始展开子菜单
,data: [] //菜单数据结构
,delay: 300 //延迟关闭的毫秒数，若 trigger 为 hover 时才生效
,shade: 0 // 遮罩
trigger: 'click', // 事件类型
content: '', // 自定义菜单内容
className: '', // 自定义样式类名
style: '', // 设置面板 style 属性
show: false, // 是否初始即显示菜单面板
isAllowSpread: true, // 是否允许菜单组展开收缩
isSpreadItem: true, // 是否初始展开子菜单
data: [], // 菜单数据结构
delay: 300, // 延迟关闭的毫秒数，若 trigger 为 hover 时才生效
shade: 0 // 遮罩
};
// 重载实例
@ -240,10 +253,10 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
views.append(viewLi);
});
return views;
}
};
// 主模板
,TPL_MAIN = ['<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit" lay-id="' + options.id + '">'
var TPL_MAIN = ['<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit" lay-id="' + options.id + '">'
,'</div>'].join('');
// 如果是右键事件，则每次触发事件时，将允许重新渲染
@ -336,22 +349,22 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 位置定位
Class.prototype.position = function(obj){
var that = this
,options = that.config;
var that = this;
var options = that.config;
lay.position(options.elem[0], that.elemView[0], {
position: options.position
,e: that.e
,clickType: options.trigger === 'contextmenu' ? 'right' : null
,align: options.align || null
position: options.position,
e: that.e,
clickType: options.trigger === 'contextmenu' ? 'right' : null,
align: options.align || null
});
};
// 删除视图
Class.prototype.remove = function(){
var that = this
,options = that.config
,elemPrev = thisModule.prevElem;
var that = this;
var options = that.config;
var elemPrev = thisModule.prevElem;
// 若存在已打开的面板元素，则移除
if(elemPrev){
@ -365,8 +378,8 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 延迟删除视图
Class.prototype.delayRemove = function(){
var that = this
,options = that.config;
var that = this;
var options = that.config;
clearTimeout(thisModule.timer);
thisModule.timer = setTimeout(function(){
@ -376,10 +389,10 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 事件
Class.prototype.events = function(){
var that = this
,options = that.config;
var that = this;
var options = that.config;
//如果传入 hover，则解析为 mouseenter
// 若传入 hover，则解析为 mouseenter
if(options.trigger === 'hover') options.trigger = 'mouseenter';
// 解除上一个事件
@ -431,9 +444,9 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
};
// 全局事件
;!function(){
var _WIN = $(window)
,_DOC = $(document);
(function(){
var _WIN = $(window);
var _DOC = $(document);
// 自适应定位
_WIN.on('resize', function(){
@ -464,7 +477,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
var options = that.config;
//如果触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭
// 若触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭
// 满足条件：当前绑定的元素不是 body document，或者不是鼠标右键事件
if(!(lay.isTopElem(options.elem[0]) || options.trigger === 'contextmenu')){
if(
@ -481,11 +494,11 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 基础菜单的静态元素事件
var ELEM_LI = '.layui-menu:not(.layui-dropdown-menu) li';
_DOC.on('click', ELEM_LI, function(e){
var othis = $(this)
,parent = othis.parents('.layui-menu').eq(0)
,isChild = othis.hasClass(STR_ITEM_GROUP) || othis.hasClass(STR_ITEM_PARENT)
,filter = parent.attr('lay-filter') || parent.attr('id')
,options = lay.options(this);
var othis = $(this);
var parent = othis.parents('.layui-menu').eq(0);
var isChild = othis.hasClass(STR_ITEM_GROUP) || othis.hasClass(STR_ITEM_PARENT);
var filter = parent.attr('lay-filter') || parent.attr('id');
var options = lay.options(this);
// 非触发元素
if(othis.hasClass(STR_ITEM_DIV)) return;
@ -507,9 +520,9 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 基础菜单的展开收缩事件
_DOC.on('click', (ELEM_LI + STR_GROUP_TITLE), function(e){
var othis = $(this)
,elemGroup = othis.parents('.'+ STR_ITEM_GROUP +':eq(0)')
,options = lay.options(elemGroup[0]);
var othis = $(this);
var elemGroup = othis.parents('.'+ STR_ITEM_GROUP +':eq(0)');
var options = lay.options(elemGroup[0]);
if(('isAllowSpread' in options) ? options.isAllowSpread : true){
thisModule.spread(elemGroup);
@ -519,8 +532,8 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
// 判断子级菜单是否超出屏幕
var ELEM_LI_PAR = '.layui-menu .'+ STR_ITEM_PARENT
_DOC.on('mouseenter', ELEM_LI_PAR, function(e){
var othis = $(this)
,elemPanel = othis.find('.'+ STR_MENU_PANEL);
var othis = $(this);
var elemPanel = othis.find('.'+ STR_MENU_PANEL);
if(!elemPanel[0]) return;
var rect = elemPanel[0].getBoundingClientRect();
@ -541,13 +554,13 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
}
}).on('mouseleave', ELEM_LI_PAR, function(e){
var othis = $(this)
,elemPanel = othis.children('.'+ STR_MENU_PANEL);
var elemPanel = othis.children('.'+ STR_MENU_PANEL);
elemPanel.removeClass(STR_MENU_PANEL_L);
elemPanel.css('margin-top', 0);
});
}();
})();
// 关闭面板
dropdown.close = function(id){