自写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之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
随机推荐
- python类型错误：can only concatenate list (not "str") to list
TypeError:can only concatenate list (not "str") to list: 类型错误:只能将list类型和list类型联系起来,而不是str类 ...
- 并发编程---Process对象的其他属性或方法
Process对象的其他属性或方法 #join方法 from multiprocessing import Process import time,os ''' 需求:让主进程等着子进程运行完毕,才能 ...
- 001-mock.js安装使用
一.基础 1.1.安装 //安装 npm install mockjs --save 1.2.使用 // 使用 Mock var Mock = require('mockjs') Mock.mock( ...
- Oracle(2)之多表查询&子查询&集合运算
多表查询 笛卡尔积 同时查询多张表时,每张表的每条数据都要和其它表的每条数据做组合.如下栗子,我们发现产生的总记录数是 56 条,还发现 emp 表是 14 条,dept 表是 4 条,56 条正是 ...
- 小程序篇- data 数据绑定
使用wepy框架写小程序, data赋值这里不需要使用this.setData({}),例如: data:{ x:'' }, 在你为data里面的数据进行绑定的时候,是需要的. 比如data里面你定义 ...
- sap gui 配置
1: sap gui 安全配置 ,在左下角搜索sap gui configuration.
- Mac charles 抓取https请求，安装证书后还是显示unknown
https://blog.csdn.net/qq_23114525/article/details/81460840 1. 配置证书 2. 设置钥匙串信任 3. 设置手机代理 端口号需要对应设置的端口 ...
- PHP三种访问控制模式（public、protected、private）解析
参考:https://www.cnblogs.com/chbyl/p/7116591.html public:公有类型 在子类中可以通过self::var调用方法或属性,可以使用parent::met ...
- Linux下samba服务搭建
参考: https://www.cnblogs.com/lxyqwer/p/7271369.html https://www.cnblogs.com/liulipeng/p/3406352.html ...
- 【LeetCode每天一题】Group Anagrams(变位词组)
Given an array of strings, group anagrams together. Example: Input: ["eat", "tea" ...