自写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之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
随机推荐
- C# install-package:"xx"已拥有为“xxx”定义的依赖项
可能 nuget自身的版本落后于适配程序包的版本 Visual Studio 2013 更新 NuGet 包管理器 Ø 前言 使用 Visual Studio 中的 NuGet 包管理器下载程序时, ...
- testrem
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 【1】vue/cli 3.0 脚手架 及cube-ui 安装
安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...
- 利用SparkLauncher 类以JAVA API 编程的方式提交Spark job
一.环境说明和使用软件的版本说明: hadoop-version:hadoop-2.9.0.tar.gz spark-version:spark-2.2.0-bin-hadoop2.7.tgz jav ...
- unicode gbk utf-8的差异
GB2312(1980年)定义,包含6763个汉字,682个字符 GBK1.0 定义了21003个汉字,21886个字符 ASCII->GB2312->GBK 编码方式向后兼容,即同一个字 ...
- url传输编码
首先:协议规范,RFC 1738,定义url地址中不能包含除:0-9,a-zA-Z,- 之外的字符,即,如URL中包含特殊字符,如$-_.+!*’(), 都要编码. 关于为什么如此定义,有如下几个原因 ...
- fullpage插件在移动端弹出键盘页面特殊处理
fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错 ...
- cocos2d JS-(JavaScript) JavaScript 中的简单继承关系
JavaScript 语言本身没有提供类,没有其他语言的类继承机制,它的继承时通过对象的原型实现的,但这不能满足我们对 Cocos2d-JS 引擎的要求,所有类都直接或间接继承实现的. var Per ...
- C Alyona and Spreadsheet Codeforces Round #401(Div. 2)(思维)
Alyona and Spreadsheet 这就是一道思维的题,谈不上算法什么的,但我当时就是不会,直到别人告诉了我,我才懂了的.唉 为什么总是这么弱呢? [题目链接]Alyona and Spre ...
- [转]js刷新父窗体
浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法 <script language=JavaScript> parent.location.reload(); ...