补充文件
This commit is contained in:
251
public/static/system/js/navbar.js
Normal file
251
public/static/system/js/navbar.js
Normal file
@@ -0,0 +1,251 @@
|
||||
/** navbar.js By Beginner Emain:zheng_jinfan@126.com HomePage:http://www.zhengjinfan.cn */
|
||||
layui.define(['element', 'common'], function(exports) {
|
||||
"use strict";
|
||||
var $ = layui.jquery,
|
||||
layer = parent.layer === undefined ? layui.layer : parent.layer,
|
||||
element = layui.element(),
|
||||
common = layui.common,
|
||||
cacheName = 'tb_navbar';
|
||||
|
||||
var Navbar = function() {
|
||||
/**
|
||||
* 默认配置
|
||||
*/
|
||||
this.config = {
|
||||
elem: undefined, //容器
|
||||
data: undefined, //数据源
|
||||
url: undefined, //数据源地址
|
||||
type: 'GET', //读取方式
|
||||
cached: false, //是否使用缓存
|
||||
spreadOne:false //设置是否只展开一个二级菜单
|
||||
};
|
||||
this.v = '0.0.1';
|
||||
};
|
||||
Navbar.prototype.render = function() {
|
||||
var _that = this;
|
||||
var _config = _that.config;
|
||||
if(typeof(_config.elem) !== 'string' && typeof(_config.elem) !== 'object') {
|
||||
common.throwError('Navbar error: elem参数未定义或设置出错，具体设置格式请参考文档API.');
|
||||
}
|
||||
var $container;
|
||||
if(typeof(_config.elem) === 'string') {
|
||||
$container = $('' + _config.elem + '');
|
||||
}
|
||||
if(typeof(_config.elem) === 'object') {
|
||||
$container = _config.elem;
|
||||
}
|
||||
if($container.length === 0) {
|
||||
common.throwError('Navbar error:找不到elem参数配置的容器，请检查.');
|
||||
}
|
||||
if(_config.data === undefined && _config.url === undefined) {
|
||||
common.throwError('Navbar error:请为Navbar配置数据源.')
|
||||
}
|
||||
if(_config.data !== undefined && typeof(_config.data) === 'object') {
|
||||
var html = getHtml(_config.data);
|
||||
$container.html(html);
|
||||
element.init();
|
||||
_that.config.elem = $container;
|
||||
} else {
|
||||
if(_config.cached) {
|
||||
var cacheNavbar = layui.data(cacheName);
|
||||
if(cacheNavbar.navbar === undefined) {
|
||||
$.ajax({
|
||||
type: _config.type,
|
||||
url: _config.url,
|
||||
async: false, //_config.async,
|
||||
dataType: 'json',
|
||||
success: function(result, status, xhr) {
|
||||
//添加缓存
|
||||
layui.data(cacheName, {
|
||||
key: 'navbar',
|
||||
value: result
|
||||
});
|
||||
var html = getHtml(result);
|
||||
$container.html(html);
|
||||
element.init();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
common.msgError('Navbar error:' + error);
|
||||
},
|
||||
complete: function(xhr, status) {
|
||||
_that.config.elem = $container;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var html = getHtml(cacheNavbar.navbar);
|
||||
$container.html(html);
|
||||
element.init();
|
||||
_that.config.elem = $container;
|
||||
}
|
||||
} else {
|
||||
//清空缓存
|
||||
layui.data(cacheName, null);
|
||||
$.ajax({
|
||||
type: _config.type,
|
||||
url: _config.url,
|
||||
async: false, //_config.async,
|
||||
dataType: 'json',
|
||||
success: function(result, status, xhr) {
|
||||
var html = getHtml(result);
|
||||
$container.html(html);
|
||||
element.init();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
common.msgError('Navbar error:' + error);
|
||||
},
|
||||
complete: function(xhr, status) {
|
||||
_that.config.elem = $container;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//只展开一个二级菜单
|
||||
if(_config.spreadOne){
|
||||
var $ul = $container.children('ul');
|
||||
$ul.find('li.layui-nav-item').each(function(){
|
||||
$(this).on('click',function(){
|
||||
$(this).siblings().removeClass('layui-nav-itemed');
|
||||
});
|
||||
});
|
||||
}
|
||||
return _that;
|
||||
};
|
||||
/**
|
||||
* 配置Navbar
|
||||
* @param {Object} options
|
||||
*/
|
||||
Navbar.prototype.set = function(options) {
|
||||
var that = this;
|
||||
that.config.data = undefined;
|
||||
$.extend(true, that.config, options);
|
||||
return that;
|
||||
};
|
||||
/**
|
||||
* 绑定事件
|
||||
* @param {String} events
|
||||
* @param {Function} callback
|
||||
*/
|
||||
Navbar.prototype.on = function(events, callback) {
|
||||
var that = this;
|
||||
var _con = that.config.elem;
|
||||
if(typeof(events) !== 'string') {
|
||||
common.throwError('Navbar error:事件名配置出错，请参考API文档.');
|
||||
}
|
||||
var lIndex = events.indexOf('(');
|
||||
var eventName = events.substr(0, lIndex);
|
||||
var filter = events.substring(lIndex + 1, events.indexOf(')'));
|
||||
if(eventName === 'click') {
|
||||
if(_con.attr('lay-filter') !== undefined) {
|
||||
_con.children('ul').find('li').each(function() {
|
||||
var $this = $(this);
|
||||
if($this.find('dl').length > 0) {
|
||||
var $dd = $this.find('dd').each(function() {
|
||||
$(this).on('click', function() {
|
||||
var $a = $(this).children('a');
|
||||
var href = $a.data('url');
|
||||
var icon = $a.children('i:first').data('icon');
|
||||
var title = $a.children('cite').text();
|
||||
var data = {
|
||||
elem: $a,
|
||||
field: {
|
||||
href: href,
|
||||
icon: icon,
|
||||
title: title
|
||||
}
|
||||
}
|
||||
callback(data);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$this.on('click', function() {
|
||||
var $a = $this.children('a');
|
||||
var href = $a.data('url');
|
||||
var icon = $a.children('i:first').data('icon');
|
||||
var title = $a.children('cite').text();
|
||||
var data = {
|
||||
elem: $a,
|
||||
field: {
|
||||
href: href,
|
||||
icon: icon,
|
||||
title: title
|
||||
}
|
||||
}
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 清除缓存
|
||||
*/
|
||||
Navbar.prototype.cleanCached = function(){
|
||||
layui.data(cacheName,null);
|
||||
};
|
||||
/**
|
||||
* 获取html字符串
|
||||
* @param {Object} data
|
||||
*/
|
||||
function getHtml(data) {
|
||||
var ulHtml = '<ul class="layui-nav layui-nav-tree beg-navbar">';
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
if(data[i].spread) {
|
||||
ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
|
||||
} else {
|
||||
ulHtml += '<li class="layui-nav-item">';
|
||||
}
|
||||
if(data[i].children !== undefined && data[i].children.length > 0) {
|
||||
ulHtml += '<a href="javascript:;">';
|
||||
if(data[i].icon !== undefined && data[i].icon !== '') {
|
||||
if(data[i].icon.indexOf('fa-') !== -1) {
|
||||
ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
|
||||
} else {
|
||||
ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
|
||||
}
|
||||
}
|
||||
ulHtml += '<cite>' + data[i].title + '</cite>'
|
||||
ulHtml += '</a>';
|
||||
ulHtml += '<dl class="layui-nav-child">'
|
||||
for(var j = 0; j < data[i].children.length; j++) {
|
||||
ulHtml += '<dd title="'+data[i].children[j].title+'">';
|
||||
ulHtml += '<a href="javascript:;" data-url="' + data[i].children[j].href + '">';
|
||||
if(data[i].children[j].icon !== undefined && data[i].children[j].icon !== '') {
|
||||
if(data[i].children[j].icon.indexOf('fa-') !== -1) {
|
||||
ulHtml += '<i class="fa ' + data[i].children[j].icon + '" data-icon="' + data[i].children[j].icon + '" aria-hidden="true"></i>';
|
||||
} else {
|
||||
ulHtml += '<i class="layui-icon" data-icon="' + data[i].children[j].icon + '">' + data[i].children[j].icon + '</i>';
|
||||
}
|
||||
}
|
||||
ulHtml += '<cite>' + data[i].children[j].title + '</cite>';
|
||||
ulHtml += '</a>';
|
||||
ulHtml += '</dd>';
|
||||
}
|
||||
ulHtml += '</dl>';
|
||||
} else {
|
||||
var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
|
||||
ulHtml += '<a href="javascript:;" ' + dataUrl + '>';
|
||||
if(data[i].icon !== undefined && data[i].icon !== '') {
|
||||
if(data[i].icon.indexOf('fa-') !== -1) {
|
||||
ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
|
||||
} else {
|
||||
ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
|
||||
}
|
||||
}
|
||||
ulHtml += '<cite>' + data[i].title + '</cite>'
|
||||
ulHtml += '</a>';
|
||||
}
|
||||
ulHtml += '</li>';
|
||||
}
|
||||
ulHtml += '</ul>';
|
||||
|
||||
return ulHtml;
|
||||
}
|
||||
|
||||
var navbar = new Navbar();
|
||||
|
||||
exports('navbar', function(options) {
|
||||
return navbar.set(options);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user