easyui,jquery动态生成menubutton

初学jquery,easyui！

想实现仿windows的动态加载菜单功能,研究了三四天，终于做出来了，特记录。

有很多不正确的或者不规范地方，过一段时间再来看，也许会觉得现在好幼稚。

先上图:

演示json格式为自定义，实际应用可从数据库中取出。

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " MenuButton.aspx.cs "  Inherits = " WebApplication1.MenuButton "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
     < link  href ="css/icon.css"  rel ="stylesheet"  type ="text/css"   />
     < link  href ="Scripts/easyui/themes/default/easyui.css"  rel ="stylesheet"  type ="text/css"   />
     < script  type ="text/javascript"  src ="Scripts/jquery-1.7.2.min.js" ></ script >
     < script  src ="Scripts/easyui/jquery.easyui.min.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript"  src ="Scripts/easyui/locale/easyui-lang-zh_CN.js" ></ script >
     < script  src ="Scripts/easyui/easyui-window-extend.1.2.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
         var  menuJson  =  { " menus " :[{ " title " : " 系统设置 " , " menus " :[{ " title " : " 演示1 " },{ " title " : " 演示2 " }]},{ " title " : " 人事管理 " , " menus " :[{ " title " : " 人事1 " },{ " title " : " 人事2 " }]}]};
        $( function  () {
             var  childmenu  =   "" ;
             var  menulist  =   "" ;
            $.each(menuJson.menus,  function  (i, sm) {
                childmenu  =   " <div id='mc "   +  i  +   " ' style='width: 120px;'> " ;
                $.each(sm.menus,  function  (j, o) {
                    childmenu  +=   " <div id='mcm "   +  i  +  j  +   " '><a class='divA' rel=' "   +  o.title  +   " ' > "   +  o.title
                     +   " </a></div>  " ;
                });
                childmenu  +=   " </div> " ;
                menulist  =   " <a href='javascript:void(0)' id='mb "   +  i  +   " ' class='easyui-menubutton' menu='#mc "   +  i  +   " '> "   +  sm.title  +   " </a> " ;
                 // 创建一级菜单
                $( " #body1 " ).append($(childmenu));
                $( " #dMenu " ).append($(menulist));
                $( ' #mb '   +  i).menubutton();
            });
             // 注册事件，使用类选择器来定位子菜单  
            $( ' .divA ' ).click( function  () {
                alert($( this ).attr( " rel " ));
            });
        });  
     </ script >
</ head >
< body  id ="body1" >
     < form  id ="form1"  runat ="server" >
     < div  id ="dMenu"  style ="background: #C9EDCC; padding: 5px; width: 600px;" >
     </ div >
     </ form >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/wwtop/archive/2012/06/29/2570467.html