自写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之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
随机推荐
- 安装与破解PyCharm专业版
安装与破解PyCharm专业版(有两种方法) 一.安装与破解PyCharm专业版 1.安装pycharm(建议安装python3) 这是网址:(https://www.jetbrains.com/py ...
- 安全易用的云许可-VirboxLM许可管理平台
Virbox LM是深思推出的基于云许可管理的开放平台,旨在为开发者提供低成本.高强度.操作便捷的一站式软件保护方案. Virbox LM包括用户许可管理工具.加壳工具.API帮助工具.开发商管理工具 ...
- Python基础-编码与解码
一.什么是编码 编码是指信息从一种形式或格式转换为另一种形式或格式的过程. 在计算机中,编码,简而言之,就是将人能够读懂的信息(通常称为明文)转换为计算机能够读懂的信息.众所周知,计算机能够读懂的 ...
- openssl生成RSA公钥和私钥对
在ubuntu上要使用openssl的话需要先进行安装,命令如下: sudo apt-get install openssl 安装完成就可以使用openssl了. 首先需要进入openssl的交互界面 ...
- http协议下载文件
通过在 URL 上调用 openConnection 方法创建连接对象.(HttpURLConnection conn = (HttpURLConnection)new URL("网址&qu ...
- Solutions_issues in pip
pip fails ssl verification Solution: $ python -m pip <command> --trusted-host files.pythonhost ...
- max_execution_time with sleep
Under Linux, sleeping time is ignored, but under Windows, it counts as execution time. Note The set_ ...
- MySQL--5子查询与连接小结
子查询:出现在其他sql语句中的 SELECT,必须出现在小括号内,子查询外层可以是常见的SELECT语句,INSERT语句 UPDATE语句 DELETE语句,在子查询中可以包含多个关键字和条件 ( ...
- svn回复历史版本的操作方法
svn恢复历史版本的操作方法svn update 保证最新svn log login.php 获得版本号svn diff -r 11026:11027 login.php 发现11027出问题svn ...
- 再次 WebAssembly 技术探讨
上次说到你可以将C代码编译成web调用的js文件,当时,很兴奋.哈哈,我也误以为是系统级别的C编程呢! 哎,今天,告诉你一个残酷的事实是,只是C语言级别,不是系统级别.因为WebAssembly目标是 ...