自写Jquery插件 Menu
原创文章，转载请注明出处，谢谢！https://www.cnblogs.com/GaoAnLee/p/9067543.html
可以结合我自写的Jquery插件Tab 一起使用哦
上一个整体效果
直接撸代码：
html：
<body>
<div id='menu' class='west'></div>
</body>
css:
@CHARSET "UTF-8";
/******************* start west ***********************/
.sidebar-toggle {
height: 30px;
line-height: 30px;
color: #aeb9c2;
background-color: #4A5064;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.sidebar-toggle .fa {
margin-top: 10px;
}
.main-menu {
font-size: 13px;
}
.main-menu ul {
background-color: #42485b;
color: #ffffff;
width: 225px;
}
.main-menu ul, .main-menu li {
position: relative;
list-style: none;
border:;
cursor: pointer;
}
.main-menu li>a {
height: 20px;
display: block;
text-decoration: none;
padding: 15px 15px;
}
.main-menu li>a>span {
margin-left: 5px;
}
.main-menu a:hover{
background-color: #00C1DE;
}
.two-level li a{
padding: 15px 35px;
}
.three-level li a{
padding: 15px 55px;
}
/*菜单第一级*/
.main-menu .two-level {
/*关闭第二级*/
display: none;
}
/*菜单第二级*/
.main-menu .open .two-level {
display: block;
/*打开第二级*/
}
.main-menu .open .two-level .three-level {
/*关闭第三级*/
display: none;
}
/*菜单第三级*/
.main-menu .three-level {
/*关闭第三级*/
display: none;
}
.main-menu .open .two-level .open .three-level {
/*打开第三级*/
display: block;
}
/*右侧小图标*/
.menu-arrow {
position: absolute;
top: 16.5px;
right: 10px;
}
.menu-arrow:after, .main-menu .one-level .open .two-level .menu-arrow:after {
content: "\f104";
}
.main-menu .one-level .open .menu-arrow:after, .main-menu .one-level .open .two-level .open .menu-arrow:after {
content: "\f106";
}
/*隐藏url*/
.url {
display: none;
}
/******************* end west ***********************/
jquery.menu.js:
/**
* menu
* auther GaoAnLee
* <div id='menu' class='west'>
* //js-data
* </div>
*/
;
(function($, window, document, undefined) {
//初始化
function _init(menu, b) {
var _this = menu.element;
var options = $.data(_this, 'menu').options;
if (b) {
_this.html('<div class=\"sidebar-toggle\"><i class=\"fa fa-fw fa-dedent\"></i></div><div class=\"main-menu\"></div>');
}
openOrCloseMenu(options);
selectTab();
}
//ajax加载数据 url
function loadData(parm) {
//loadMenu
$.ajax({
type: 'get',
url: parm,
dataType: 'text',
success: function(data) {
var menu = eval('(' + data + ')');
warpMenu(menu);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if (textStatus == 'error') {
console.log('ajax error ! value of textStatus is error ! menu.js:line 34');
}
}
});
}
//warpMenu
function warpMenu(menu) {
if (menu.code == 200) {
var buffer1 = '<ul class=\"one-level\">';
var buffer2 = '';
var buffer3 = '';
for (var i = 0, len1 = menu.data.length; i < len1; i++) {
buffer1 += '<li class=\"has-children\">';
var idOne = menu.data[i].id;
var nameOne = menu.data[i].name;
var iconOne = menu.data[i].icon;
var urlOne = menu.data[i].url;
var childrenOne = menu.data[i].children;
buffer1 += '<a id=\"' + idOne + '\"><i class=\"fa fa ' + iconOne + '\"></i><span>' + nameOne + '</span><span class=\"menu-arrow fa\"></span><p class=\"url\">' + urlOne + '</p></a>';
buffer2 += '<ul class=\"menu-submenu two-level\">';
for (var j = 0, len2 = childrenOne.length; j < len2; j++) {
buffer2 += '<li class=\"has-children\">';
var idTwo = childrenOne[j].id;
var nameTwo = childrenOne[j].name;
var iconTwo = childrenOne[j].icon;
var urlTwo = childrenOne[j].url;
var childrenTwo = childrenOne[j].children;
buffer2 += '<a id=\"' + idTwo + '\"><i class=\"fa fa ' + iconTwo + '\"></i><span>' + nameTwo + '</span>';
if (!(typeof(childrenTwo) == 'undefined')) {
buffer2 += '<span class=\"menu-arrow fa\"></span>';
}
buffer2 += '<p class=\"url\">' + urlTwo + '</p></a>';
if (!(typeof(childrenTwo) == 'undefined')) {
buffer3 += '<ul class=\"menu-submenu three-level\">';
for (var k = 0, len3 = childrenTwo.length; k < len3; k++) {
buffer3 += '<li class=\"\">';
var idThree = childrenTwo[k].id;
var nameThree = childrenTwo[k].name;
var iconThree = childrenTwo[k].icon;
var urlThree = childrenTwo[k].url;
buffer3 += '<a id=\"' + idThree + '\"><i class=\"fa fa ' + iconThree + '\"></i><span>' + nameThree + '</span><p class=\"url\">' + urlThree + '</p></a>';
buffer3 += '</li>';
}
buffer3 += '</ul>';
buffer2 += buffer3;
buffer3 = '';
}
buffer2 += '</li>';
}
buffer2 += '</ul>';
buffer1 += buffer2;
buffer2 = '';
}
buffer1 += '</ul>';
$('.main-menu').html(buffer1);
} else {
alert(menu.message);
}
}
//打开和关闭菜单
function openOrCloseMenu(options) {
//打开关闭菜单
$('body').on('click', '.has-children', function(event) {
var obj = $(this);
obj.toggleClass('open');
event.stopPropagation(); //关键在于阻止冒泡
return false;
});
$('body').on('click', '.menu-submenu li', function(event) {
event.stopPropagation(); //关键在于阻止冒泡
return false;
});
}
//menu click to select tab
function selectTab() {
//菜单切换tabs
$('body').on('click', '.main-menu li', function() {
var obj = $(this).children('a').children('span:last');
//判断是否有子菜单
if (!obj.hasClass('menu-arrow')) {
var title = $(this).children('a').children('span').html();
var id = $(this).children('a').attr('id');
var url = $(this).children('a').children('p').html();
var icon = $(this).children('a').children('i').attr('class');
var tabContent = '<iframe id=\"mainiframe\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"auto\" src=\"' + url + '\"></iframe>';
$('#tab').tab('selectTab', {
icon: icon,
title: title,
hasClose: true,
tabContent: tabContent
});
}
return false;
});
}
var Menu = function(e, options) {
this.element = e,
this.defaults = {
menu: '#menu',
loadUrl: 'data/menu.txt'
},
this.options = $.extend({}, this.defaults, options);
};
Menu.prototype = {
//通过url重新加载
loadUrl: function(options) {
$('.main-menu').html('');
loadData(options.loadUrl);
},
//通过数据重新加载
loadData: function(options) {
$('.main-menu').html('');
warpMenu(options.data);
}
};
$.fn.menu = function(target, parm) {
var menu = new Menu(this, target);
if (typeof target == 'string' && typeof parm == 'string') {
return menu[target](parm);
}
if (typeof target == 'string' && typeof parm == 'object') {
var options = $.extend({}, menu.defaults, parm);
return menu[target](options);
}
var state = $.data(this, 'menu');
if (state) {
var dataOptions = state.options;
var newOptions = $.extend({}, dataOptions, target);
$.data(this, 'menu', {
options: newOptions,
e: this
});
} else {
$.data(this, 'menu', {
options: $.extend({}, menu.options, target),
e: this
});
}
return this.each(function(){
_init(menu,true)
});
};
})(jQuery, window, document); $(function() {
$('#menu').menu(); //加载menu
//加载数据 url
$('#menu').menu('loadUrl', {
loadUrl: 'data/menu.txt'
});
});
自写Jquery插件 Menu的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- 写JQuery插件的基本知识
普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- 写jQuery插件时，一种更好的合并参数的方法
看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...
- 写JQuery 插件
什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
- 第一次写jquery插件，来个countdown计时器吧
之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
随机推荐
- Fast-R-CNN
基于R-CNN和SPP-Net思想,RBG提出了Fast-R-CNN算法.如果选用VGG16网络进行特征提取,在训练阶段,Fast-R-CNN的速度相比RCNN和SPP-Net可以分别提升9倍和3倍: ...
- HP1020打印机“传递给系统调用的数据区域太小” 如何处理？
如果电脑上曾经安装过 HP LaserJet 激光打印机的驱动程序,重新安装驱动程序之前,需要完全卸载以前安装的驱动程序,否则可能会出现无法找到设备或者安装不上驱动程序的现象. 安装网站下载的即插即用 ...
- 银联卡中关于CVN/CVN2/ICVN的区别
银联China Union Pay,是中国唯一合法的卡组织机构,同时也是EMVCo成员.关于银联卡中CVN/CVN2/ICVN的区别,刚开始我自己不了解,但经过查找资料和请教其他人,对它们的概念也渐渐 ...
- SSM基础整合
1.表现层: 依赖jar包:spring+JSP+文件上传组件+dubbo+fastdfs web.xml配置:乱码过滤器+DispatcherServlet前端控制器 <!-- 配置post乱 ...
- 用python 替换文件中的git地址
有个需求要替换文件中git地址,要替换成的git地址是一个变量 本来想用sed替换但是git地址中有斜杠符号 需要转义,提前知道还好弄,如果是变量就不好处理了 #!/usr/bin/python3 # ...
- CentOS系统 cd命令的使用
直接输入 cd 命令 ,它将切换到你的 home 目录下,不管你当前所在的目录是什么: [ec2-user@ip-*** /]$ cd [ec2-user@ip-*** ~]$ cd /var/www ...
- redhat vim编辑器永久添加行号及搜索
设置行号: 跳转到home $ cd ~ 编辑.vimrc,没有的话自动创建 $ vim .vimrc 第一行加入: set nu :wq 保存退出,即可 如果想取消设置,同理删除set nu即可 v ...
- node.js连接本地数据库及json返回数据
新建一个文件夹node.js,目录下打开命令初始化一下 cnpm init 然后下载express框架 cnpm install express --save 接着下载数据库的依赖 cnpm inst ...
- echo 内容显示颜色
一,字体显示颜色 #字体颜色:30m-37m 黑.红.绿.黄.蓝.紫.青.白str=”要显示的字体“echo -e "\033[30m ${str}\033[0m" ## ...
- MyBatis基础入门《十五》ResultMap子元素(collection)
MyBatis基础入门<十五>ResultMap子元素(collection) 描述: 见<MyBatis基础入门<十四>ResultMap子元素(association ...