自写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之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
随机推荐
- SSH高级服务
SSH端口转发 SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的 加密及解密服务.这 ...
- 前端框架之Vue(5)-条件渲染
v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...
- 万恶之源 - Python装饰器及内置函数
装饰器 听名字应该知道这是一个装饰的东西,我们今天就来讲解一下装饰器,有的铁子们应该听说,有的没有听说过.没有关系我告诉你们这是一个很神奇的东西 这个有多神奇呢? 我们先来复习一下闭包 def fun ...
- Python中常用的模块
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...
- （转）Thread的中断机制(interrupt)
先看收集了别人的文章,全面的了解下java的中断: 中断线程 线程的thread.interrupt()方法是中断线程,将会设置该线程的中断状态位,即设置为true,中断的结果线程是死亡.还是等待新的 ...
- cocos 简便斗地主发牌动画
niuniuSend : function (int) { switch(int) { case 0: for(var i=0;i<5;i++){ var sp = new ccui.Image ...
- Oracle如何查询当前的crs/has自启动状态
我们知道在某些停机测试场景,是需要人为禁用crs/has的自启动的,防止过程中主机反复重启对数据库集群造成影响. 使用crsctl disable/enable crs命令可以禁用/启用crs的自启动 ...
- gitlab4.0备份还原
一,备份 备份默认路径查看: gitlab/config/gitlab.yml 中的backup: 默认tmp/backups ====>这个是gitlab/tmp/backups/ 可不是系 ...
- ****************VS编码操作实践******************
下面是今天主要练习的内容: 运用到的内容有 {运算符.强制转换.数据类型的运用.转义字符.变量与常量.基本类型的转换等} 1) 首先我们来看 下列的编码是由三大类组成的 ① 定制变量与常量 蓝色部 ...
- not value specified for parameter问题解决方案
前段时间遇到这个问题找了半天没有找到,今天又调试了突然发现出现这个问题的根本原因是sql语句中的参数没有赋值或者参数类型与数据库字段类型不匹配所导致的. 例如: String sql = " ...