mirror of https://github.com/layui/layui
优化 nav 代码书写规范
贤心
parent
1a4a68a1d2
commit
0e233970e7
|
|
@ -359,48 +359,57 @@ layui.define('jquery', function(exports){
|
||||||
|
|
||||||
// 导航菜单
|
// 导航菜单
|
||||||
,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);
|
||||||
|
var child = othis.find('.'+NAV_CHILD);
|
||||||
|
|
||||||
|
// 是否垂直导航菜单
|
||||||
if (nav.hasClass(NAV_TREE)) {
|
if (nav.hasClass(NAV_TREE)) {
|
||||||
// 无子菜单时跟随
|
// 无子菜单时跟随
|
||||||
if (!child[0]) {
|
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)) {
|
||||||
|
child.css({
|
||||||
left: -(child.outerWidth() - othis.width()) / 2
|
left: -(child.outerWidth() - othis.width()) / 2
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 滑块定位
|
// 滑块定位
|
||||||
if (child[0]) { // 若有子菜单，则滑块消失
|
if (child[0]) { // 若有子菜单，则滑块消失
|
||||||
bar.css({
|
bar.css({
|
||||||
left: bar.position().left + bar.width()/2
|
left: bar.position().left + bar.width() / 2,
|
||||||
,width: 0
|
width: 0,
|
||||||
,opacity: 0
|
opacity: 0
|
||||||
});
|
});
|
||||||
} else { // bar 跟随
|
} else { // bar 跟随
|
||||||
bar.css({
|
bar.css({
|
||||||
left: othis.position().left + parseFloat(othis.css('marginLeft'))
|
left: othis.position().left + parseFloat(othis.css('marginLeft')),
|
||||||
,top: othis.position().top + othis.height() - bar.height()
|
top: othis.position().top + othis.height() - bar.height()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渐显滑块并适配宽度
|
// 渐显滑块并适配宽度
|
||||||
timer[index] = setTimeout(function() {
|
timer[index] = setTimeout(function() {
|
||||||
bar.css({
|
bar.css({
|
||||||
width: child[0] ? 0 : othis.width()
|
width: child[0] ? 0 : othis.width(),
|
||||||
,opacity: child[0] ? 0 : 1
|
opacity: child[0] ? 0 : 1
|
||||||
});
|
});
|
||||||
}, device.ie && device.ie < 10 ? 0 : TIME);
|
}, device.ie && device.ie < 10 ? 0 : TIME);
|
||||||
|
|
||||||
|
|
@ -418,23 +427,24 @@ 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 {
|
||||||
// 隐藏子菜单
|
// 隐藏子菜单
|
||||||
|
|
@ -445,14 +455,16 @@ layui.define('jquery', function(exports){
|
||||||
}, 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);
|
||||||
|
|
@ -461,9 +473,9 @@ layui.define('jquery', function(exports){
|
||||||
|
|
||||||
// 展开子菜单
|
// 展开子菜单
|
||||||
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]) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue