原创文章，转载请注明出处，谢谢！https://www.cnblogs.com/GaoAnLee/p/9067543.html

可以结合我自写的Jquery插件Tab 一起使用哦

上一个整体效果

直接撸代码：

html：

  1. <body>
  2.     <div id='menu' class='west'></div>
  3. </body>

css:

  1. @CHARSET "UTF-8";
  2.  
  3. /******************* start west ***********************/
  4.  
  5. .sidebar-toggle {
  6.     height: 30px;
  7.     line-height: 30px;
  8.     color: #aeb9c2;
  9.     background-color: #4A5064;
  10.     font-size: 14px;
  11.     text-align: center;
  12.     cursor: pointer;
  13. }
  14.  
  15. .sidebar-toggle .fa {
  16.     margin-top: 10px;
  17. }
  18.  
  19. .main-menu {
  20.     font-size: 13px;
  21. }
  22.  
  23. .main-menu ul {
  24.     background-color: #42485b;
  25.     color: #ffffff;
  26.     width: 225px;
  27. }
  28.  
  29. .main-menu ul, .main-menu li {
  30.     position: relative;
  31.     list-style: none;
  32.     border:;
  33.     cursor: pointer;
  34. }
  35.  
  36. .main-menu li>a {
  37.     height: 20px;
  38.     display: block;
  39.     text-decoration: none;
  40.     padding: 15px 15px;
  41. }
  42.  
  43. .main-menu li>a>span {
  44.     margin-left: 5px;
  45. }
  46.  
  47. .main-menu a:hover{
  48.     background-color: #00C1DE;
  49. }
  50.  
  51. .two-level li a{
  52.   padding: 15px 35px;
  53. }
  54.  
  55. .three-level li a{
  56.   padding: 15px 55px;
  57. }
  58.  
  59. /*菜单第一级*/
  60. .main-menu .two-level {
  61.     /*关闭第二级*/
  62.     display: none;
  63. }
  64.  
  65. /*菜单第二级*/
  66. .main-menu .open .two-level {
  67.     display: block;
  68.     /*打开第二级*/
  69. }
  70.  
  71. .main-menu .open .two-level .three-level {
  72.     /*关闭第三级*/
  73.     display: none;
  74. }
  75.  
  76. /*菜单第三级*/
  77. .main-menu .three-level {
  78.     /*关闭第三级*/
  79.     display: none;
  80. }
  81.  
  82. .main-menu .open .two-level .open .three-level {
  83.     /*打开第三级*/
  84.     display: block;
  85. }
  86.  
  87. /*右侧小图标*/
  88. .menu-arrow {
  89.     position: absolute;
  90.     top: 16.5px;
  91.     right: 10px;
  92. }
  93.  
  94. .menu-arrow:after, .main-menu .one-level .open .two-level .menu-arrow:after {
  95.     content: "\f104";
  96. }
  97.  
  98. .main-menu .one-level .open .menu-arrow:after, .main-menu .one-level .open .two-level .open .menu-arrow:after {
  99.     content: "\f106";
  100. }
  101. /*隐藏url*/
  102. .url {
  103.     display: none;
  104. }
  105.  
  106. /******************* end west ***********************/

jquery.menu.js:

  1. /**
  2.  * menu
  3.  * auther GaoAnLee
  4.  * <div id='menu' class='west'>
  5.  *     //js-data
  6.  * </div>
  7.  */
  8. ;
  9. (function($, window, document, undefined) {
  10.     //初始化
  11.     function _init(menu, b) {
  12.         var _this = menu.element;
  13.         var options = $.data(_this, 'menu').options;
  14.         if (b) {
  15.             _this.html('<div class=\"sidebar-toggle\"><i class=\"fa fa-fw fa-dedent\"></i></div><div class=\"main-menu\"></div>');
  16.         }
  17.         openOrCloseMenu(options);
  18.         selectTab();
  19.     }
  20.     //ajax加载数据 url
  21.     function loadData(parm) {
  22.         //loadMenu
  23.         $.ajax({
  24.             type: 'get',
  25.             url: parm,
  26.             dataType: 'text',
  27.             success: function(data) {
  28.                 var menu = eval('(' + data + ')');
  29.                 warpMenu(menu);
  30.             },
  31.             error: function(XMLHttpRequest, textStatus, errorThrown) {
  32.                 if (textStatus == 'error') {
  33.                     console.log('ajax error ! value of textStatus is error ! menu.js:line 34');
  34.                 }
  35.             }
  36.         });
  37.     }
  38.     //warpMenu
  39.     function warpMenu(menu) {
  40.         if (menu.code == 200) {
  41.             var buffer1 = '<ul class=\"one-level\">';
  42.             var buffer2 = '';
  43.             var buffer3 = '';
  44.             for (var i = 0, len1 = menu.data.length; i < len1; i++) {
  45.                 buffer1 += '<li class=\"has-children\">';
  46.                 var idOne = menu.data[i].id;
  47.                 var nameOne = menu.data[i].name;
  48.                 var iconOne = menu.data[i].icon;
  49.                 var urlOne = menu.data[i].url;
  50.                 var childrenOne = menu.data[i].children;
  51.                 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>';
  52.                 buffer2 += '<ul class=\"menu-submenu two-level\">';
  53.                 for (var j = 0, len2 = childrenOne.length; j < len2; j++) {
  54.                     buffer2 += '<li class=\"has-children\">';
  55.                     var idTwo = childrenOne[j].id;
  56.                     var nameTwo = childrenOne[j].name;
  57.                     var iconTwo = childrenOne[j].icon;
  58.                     var urlTwo = childrenOne[j].url;
  59.                     var childrenTwo = childrenOne[j].children;
  60.                     buffer2 += '<a id=\"' + idTwo + '\"><i class=\"fa fa ' + iconTwo + '\"></i><span>' + nameTwo + '</span>';
  61.                     if (!(typeof(childrenTwo) == 'undefined')) {
  62.                         buffer2 += '<span class=\"menu-arrow fa\"></span>';
  63.                     }
  64.                     buffer2 += '<p class=\"url\">' + urlTwo + '</p></a>';
  65.                     if (!(typeof(childrenTwo) == 'undefined')) {
  66.                         buffer3 += '<ul class=\"menu-submenu three-level\">';
  67.                         for (var k = 0, len3 = childrenTwo.length; k < len3; k++) {
  68.                             buffer3 += '<li class=\"\">';
  69.                             var idThree = childrenTwo[k].id;
  70.                             var nameThree = childrenTwo[k].name;
  71.                             var iconThree = childrenTwo[k].icon;
  72.                             var urlThree = childrenTwo[k].url;
  73.                             buffer3 += '<a id=\"' + idThree + '\"><i class=\"fa fa ' + iconThree + '\"></i><span>' + nameThree + '</span><p class=\"url\">' + urlThree + '</p></a>';
  74.                             buffer3 += '</li>';
  75.                         }
  76.                         buffer3 += '</ul>';
  77.                         buffer2 += buffer3;
  78.                         buffer3 = '';
  79.                     }
  80.                     buffer2 += '</li>';
  81.                 }
  82.                 buffer2 += '</ul>';
  83.                 buffer1 += buffer2;
  84.                 buffer2 = '';
  85.             }
  86.             buffer1 += '</ul>';
  87.             $('.main-menu').html(buffer1);
  88.         } else {
  89.             alert(menu.message);
  90.         }
  91.     }
  92.     //打开和关闭菜单
  93.     function openOrCloseMenu(options) {
  94.         //打开关闭菜单
  95.         $('body').on('click', '.has-children', function(event) {
  96.             var obj = $(this);
  97.             obj.toggleClass('open');
  98.             event.stopPropagation(); //关键在于阻止冒泡
  99.             return false;
  100.         });
  101.         $('body').on('click', '.menu-submenu li', function(event) {
  102.             event.stopPropagation(); //关键在于阻止冒泡
  103.             return false;
  104.         });
  105.     }
  106.     //menu click to select tab
  107.     function selectTab() {
  108.         //菜单切换tabs
  109.         $('body').on('click', '.main-menu li', function() {
  110.             var obj = $(this).children('a').children('span:last');
  111.             //判断是否有子菜单
  112.             if (!obj.hasClass('menu-arrow')) {
  113.                 var title = $(this).children('a').children('span').html();
  114.                 var id = $(this).children('a').attr('id');
  115.                 var url = $(this).children('a').children('p').html();
  116.                 var icon = $(this).children('a').children('i').attr('class');
  117.                 var tabContent = '<iframe id=\"mainiframe\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"auto\" src=\"' + url + '\"></iframe>';
  118.                 $('#tab').tab('selectTab', {
  119.                     icon: icon,
  120.                     title: title,
  121.                     hasClose: true,
  122.                     tabContent: tabContent
  123.                 });
  124.             }
  125.             return false;
  126.         });
  127.     }
  128.     var Menu = function(e, options) {
  129.         this.element = e,
  130.             this.defaults = {
  131.                 menu: '#menu',
  132.                 loadUrl: 'data/menu.txt'
  133.             },
  134.             this.options = $.extend({}, this.defaults, options);
  135.     };
  136.     Menu.prototype = {
  137.         //通过url重新加载
  138.         loadUrl: function(options) {
  139.             $('.main-menu').html('');
  140.             loadData(options.loadUrl);
  141.         },
  142.         //通过数据重新加载
  143.         loadData: function(options) {
  144.             $('.main-menu').html('');
  145.             warpMenu(options.data);
  146.         }
  147.     };
  148.     $.fn.menu = function(target, parm) {
  149.         var menu = new Menu(this, target);
  150.         if (typeof target == 'string' && typeof parm == 'string') {
  151.             return menu[target](parm);
  152.         }
  153.         if (typeof target == 'string' && typeof parm == 'object') {
  154.             var options = $.extend({}, menu.defaults, parm);
  155.             return menu[target](options);
  156.         }
  157.         var state = $.data(this, 'menu');
  158.         if (state) {
  159.             var dataOptions = state.options;
  160.             var newOptions = $.extend({}, dataOptions, target);
  161.             $.data(this, 'menu', {
  162.                 options: newOptions,
  163.                 e: this
  164.             });
  165.         } else {
  166.             $.data(this, 'menu', {
  167.                 options: $.extend({}, menu.options, target),
  168.                 e: this
  169.             });
  170.         }
  171.         return this.each(function(){
    　　　　　　_init(menu,true)
    　　　　　});
  172.     };
  173. })(jQuery, window, document);
  174.  
  175. $(function() {
  176.     $('#menu').menu(); //加载menu
  177.     //加载数据 url
  178.     $('#menu').menu('loadUrl', {
  179.         loadUrl: 'data/menu.txt'
  180.     });
  181. });

自写Jquery插件 Menu的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. 写JQuery插件的基本知识

    普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...

  3. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

  4. 写jQuery插件时，一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  5. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  6. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  7. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  8. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  9. 第一次写jquery插件，来个countdown计时器吧

    之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...

随机推荐

  1. 20165236 2017-2018-2 《Java程序设计》第九周学习总结

    20165236 2017-2018-2 <Java程序设计>第九周学习总结 一.第十三章教材内容总结 1.URL类 URL类是java.net包中的一个重要的类,使用URL创建对象的应用 ...

  2. mysql 解锁

    show OPEN TABLES where In_use > 0;show processlist;show status like 'Table%';show status like '%l ...

  3. 采用Extjs MVVM + ThinkPHP 架构开发的思考

    前后台号称都是MVC模式, 后台ThinkPHP框架实际上只提供web操作接口,直接返回json数据,因此只能算有Model和Controller两层, 前台ExtjsMVVM模式实际上就是分模块后的 ...

  4. 15个Node.js项目列表

    前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...

  5. 3-Python3 环境搭建

  6. [Java in NetBeans] Lesson 12. Arrays

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. Array: container that holds a fixed number of values of the sam ...

  7. [LeetCode] 566. Reshape the Matrix_Easy

    In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...

  8. [pat]1045 Favorite Color Stripe

    1.用一个数组里面存储喜爱数字的值来区分数字是不是喜爱,以及值的大小顺序,用vector循环删除a数组中不是喜爱的元素,这里it=erase()之后it自动指向下一个元素,由于循环每次还要自增1,所以 ...

  9. iOS 新浪微博-5.1 首页微博列表_时间/配图

    在上一篇中,我们已经把首页微博显示出来了,但还有很多细节,需要我们去调整的.这一章中,我们将处理好时间,配图,工具框及转发微博等小细节的功能. 时间处理 第一步:定义一个时间的类别,用于判断是昨天.今 ...

  10. Linux rz命令无效

    rz命令无效 我习惯使用SecureCRT工具,进行远程连接Linux服务器,在进行文件传输的时候,可以使用sftp (alt+p)方式进行传输文件,也经常使用rz命令进行图形化的方式传输文件. 当r ...