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

优化 nav 代码书写规范

pull/1407/head
贤心 2023-10-25 09:15:58 +08:00
parent 1a4a68a1d2
commit 0e233970e7
1 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/modules/element.js
View File

@ -357,56 +357,65 @@ layui.define('jquery', function(exports){
call.tabAuto.call({}); call.tabAuto.call({});
} }
//导航菜单 // 导航菜单
,nav: function(){ ,nav: function(){
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, NAV_TITLE = 'layui-nav-title' var TIME = 200;
var timer = {};
var timerMore = {};
var timeEnd = {};
var NAV_TITLE = 'layui-nav-title';
//滑块跟随 // 滑块跟随
,follow = function(bar, nav, index){ var follow = function(bar, nav, index) {
var othis = $(this), child = othis.find('.'+NAV_CHILD); var othis = $(this);
if(nav.hasClass(NAV_TREE)){ var child = othis.find('.'+NAV_CHILD);
//无子菜单时跟随
if(!child[0]){ // 是否垂直导航菜单
if (nav.hasClass(NAV_TREE)) {
// 无子菜单时跟随
if (!child[0]) {
var thisA = othis.children('.'+ NAV_TITLE); var thisA = othis.children('.'+ NAV_TITLE);
bar.css({ bar.css({
top: othis.offset().top - nav.offset().top top: othis.offset().top - nav.offset().top,
,height: (thisA[0] ? thisA : othis).outerHeight() height: (thisA[0] ? thisA : othis).outerHeight(),
,opacity: 1 opacity: 1
}); });
} }
} else { } else {
child.addClass(NAV_ANIM); child.addClass(NAV_ANIM);
//若居中对齐 // 若居中对齐
if(child.hasClass(NAV_CHILD_C)) child.css({ if (child.hasClass(NAV_CHILD_C)) {
left: -(child.outerWidth() - othis.width())/2 child.css({
}); left: -(child.outerWidth() - othis.width()) / 2
//滑块定位
if(child[0]){ //若有子菜单，则滑块消失
bar.css({
left: bar.position().left + bar.width()/2
,width: 0
,opacity: 0
});
} else { //bar 跟随
bar.css({
left: othis.position().left + parseFloat(othis.css('marginLeft'))
,top: othis.position().top + othis.height() - bar.height()
}); });
} }
//渐显滑块并适配宽度 // 滑块定位
timer[index] = setTimeout(function(){ if (child[0]) { // 若有子菜单，则滑块消失
bar.css({ bar.css({
width: child[0] ? 0 : othis.width() left: bar.position().left + bar.width() / 2,
,opacity: child[0] ? 0 : 1 width: 0,
opacity: 0
});
} else { // bar 跟随
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: child[0] ? 0 : othis.width(),
opacity: child[0] ? 0 : 1
}); });
}, device.ie && device.ie < 10 ? 0 : TIME); }, device.ie && device.ie < 10 ? 0 : TIME);
//显示子菜单 // 显示子菜单
clearTimeout(timeEnd[index]); clearTimeout(timeEnd[index]);
if(child.css('display') === 'block'){ if (child.css('display') === 'block') {
clearTimeout(timerMore[index]); clearTimeout(timerMore[index]);
} }
timerMore[index] = setTimeout(function(){ timerMore[index] = setTimeout(function(){
@ -416,61 +425,64 @@ layui.define('jquery', function(exports){
} }
}; };
//遍历导航 // 遍历导航
$(NAV_ELEM + elemFilter).each(function(index){ $(NAV_ELEM + elemFilter).each(function(index) {
var othis = $(this) var othis = $(this);
,bar = $('<span class="'+ NAV_BAR +'"></span>') var bar = $('<span class="'+ NAV_BAR +'"></span>');
,itemElem = othis.find('.'+NAV_ITEM); var itemElem = othis.find('.'+NAV_ITEM);
//hover 滑动效果 // hover 滑动效果
if(!othis.find('.'+NAV_BAR)[0]){ if (!othis.find('.'+NAV_BAR)[0]) {
othis.append(bar); othis.append(bar);
(othis.hasClass(NAV_TREE) ( othis.hasClass(NAV_TREE)
? itemElem.find('dd,>.'+ NAV_TITLE) ? itemElem.find('dd,>.'+ NAV_TITLE)
: itemElem).on('mouseenter', function(){ : itemElem
).on('mouseenter', function() {
follow.call(this, bar, othis, index); follow.call(this, bar, othis, index);
}).on('mouseleave', function(){ //鼠标移出 }).on('mouseleave', function() { // 鼠标移出
//是否为垂直导航 // 是否为垂直导航
if(othis.hasClass(NAV_TREE)){ if (othis.hasClass(NAV_TREE)) {
bar.css({ bar.css({
height: 0 height: 0,
,opacity: 0 opacity: 0
}); });
} else { } else {
//隐藏子菜单 // 隐藏子菜单
clearTimeout(timerMore[index]); clearTimeout(timerMore[index]);
timerMore[index] = setTimeout(function(){ timerMore[index] = setTimeout(function(){
othis.find('.'+NAV_CHILD).removeClass(SHOW); othis.find('.'+ NAV_CHILD).removeClass(SHOW);
othis.find('.'+NAV_MORE).removeClass(NAV_MORE+'d'); othis.find('.'+ NAV_MORE).removeClass(NAV_MORE +'d');
}, 300); }, 300);
} }
}); });
othis.on('mouseleave', function(){
// 鼠标离开当前菜单时
othis.on('mouseleave', function() {
clearTimeout(timer[index]) clearTimeout(timer[index])
timeEnd[index] = setTimeout(function(){ timeEnd[index] = setTimeout(function() {
if(!othis.hasClass(NAV_TREE)){ if (!othis.hasClass(NAV_TREE)) {
bar.css({ bar.css({
width: 0 width: 0,
,left: bar.position().left + bar.width()/2 left: bar.position().left + bar.width() / 2,
,opacity: 0 opacity: 0
}); });
} }
}, TIME); }, TIME);
}); });
} }
//展开子菜单 // 展开子菜单
itemElem.find('a').each(function(){ itemElem.find('a').each(function() {
var thisA = $(this) var thisA = $(this);
,parent = thisA.parent() var parent = thisA.parent();
,child = thisA.siblings('.'+NAV_CHILD); var child = thisA.siblings('.'+ NAV_CHILD);
//输出小箭头 // 输出小箭头
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){ if (child[0] && !thisA.children('.'+ NAV_MORE)[0]) {
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>'); thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
} }
thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单 thisA.off('click', call.clickThis).on('click', call.clickThis); // 点击菜单
}); });
}); });
} }