• 动态菜单(三)

    同学们看了菜单一菜单二有没有什么特殊的感觉。是不是太简单了。

          现在我们结合第一篇文章来做个练习。

          没事的时候会经常找一些好看的UI，留着自己以后做项目的时候用。 比如easyui、EXT JS啊这些。无意中发现了一个国产的框架。那么今天咱也支持国产一把。

          传送门 DWZ框架。感觉还不错 上个图大家看看。

          

     

          效果还不错吧？呵呵 这节课我们就抄袭了。。

          先去官方网站下载源代码。传送门

          解压源码打开index.html 页面。HTML的。果断查看源文件。

          这里就不贴代码了。上面是一堆JS根据第一节的“功力”我们可以观察以下代码是菜单

         
    [html] view plaincopy
    1. <div id="leftside">  
    2.             <div id="sidebar_s">  
    3.                 <div class="collapse">  
    4.                     <div class="toggleCollapse"><div></div></div>  
    5.                 </div>  
    6.             </div>  
    7.             <div id="sidebar">  
    8.   
    9.                 <div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>  
    10.   
    11.                 <div class="accordion" fillSpace="sidebar">  
    12.                     <div class="accordionHeader">  
    13.                         <h2><span>Folder</span>界面组件</h2>  
    14.                     </div>  
    15.                     <div class="accordionContent">  
    16.   
    17.                         <ul class="tree treeFolder">  
    18.                             <li><a href="tabsPage.html" target="navTab">主框架面板</a>  
    19.                                 <ul>  
    20.                                     <li><a href="main.html" target="navTab" rel="main">我的主页</a></li>  
    21.                                     <li><a href="http://www.baidu.com" target="navTab" rel="page1">页面一(外部页面)</a></li>  
    22.                                     <li><a href="demo_page1.html" target="navTab" rel="page1" fresh="false">替换页面一</a></li>  
    23.                                     <li><a href="demo_page2.html" target="navTab" rel="page2">页面二</a></li>  
    24.   
    25.                                     <li><a href="demo_page4.html" target="navTab" rel="page3" title="页面三（自定义标签名）">页面三</a></li>  
    26.                                     <li><a href="demo_page4.html" target="navTab" rel="page4" fresh="false">测试页面（fresh="false"）</a></li>  
    27.                                 </ul>  
    28.                             </li>  
    29.                               
    30.                             <li><a>常用组件</a>  
    31.                                 <ul>  
    32.                                     <li><a href="w_panel.html" target="navTab" rel="w_panel">面板</a></li>  
    33.   
    34.                                     <li><a href="w_tabs.html" target="navTab" rel="w_tabs">选项卡面板</a></li>  
    35.                                     <li><a href="w_dialog.html" target="navTab" rel="w_dialog">弹出窗口</a></li>  
    36.                                     <li><a href="w_alert.html" target="navTab" rel="w_alert">提示窗口</a></li>  
    37.                                     <li><a href="w_list.html" target="navTab" rel="w_list">CSS表格容器</a></li>  
    38.                                     <li><a href="demo_page1.html" target="navTab" rel="w_table">表格容器</a></li>  
    39.                                     <li><a href="w_removeSelected.html" target="navTab" rel="w_table">表格数据库排序+批量删除</a></li>  
    40.   
    41.                                     <li><a href="w_tree.html" target="navTab" rel="w_tree">树形菜单</a></li>  
    42.                                     <li><a href="w_accordion.html" target="navTab" rel="w_accordion">滑动菜单</a></li>  
    43.                                     <li><a href="w_editor.html" target="navTab" rel="w_editor">编辑器</a></li>  
    44.                                     <li><a href="w_datepicker.html" target="navTab" rel="w_datepicker">日期控件</a></li>  
    45.                                 </ul>  
    46.                             </li>  
    47.                                       
    48.                             <li><a>表单组件</a>  
    49.   
    50.                                 <ul>  
    51.                                     <li><a href="w_validation.html" target="navTab" rel="w_validation">表单验证</a></li>  
    52.                                     <li><a href="w_button.html" target="navTab" rel="w_button">按钮</a></li>  
    53.                                     <li><a href="w_textInput.html" target="navTab" rel="w_textInput">文本框/文本域</a></li>  
    54.                                     <li><a href="w_combox.html" target="navTab" rel="w_combox">下拉菜单</a></li>  
    55.                                     <li><a href="w_checkbox.html" target="navTab" rel="w_checkbox">多选框/单选框</a></li>  
    56.   
    57.                                     <li><a href="demo_upload.html" target="navTab" rel="demo_upload">iframeCallback表单提交</a></li>  
    58.                                     <li><a href="w_uploadify.html" target="navTab" rel="w_uploadify">uploadify多文件上传</a></li>  
    59.                                 </ul>  
    60.                             </li>  
    61.                             <li><a href="dwz.frag.xml" target="_blank">dwz.frag.xml</a></li>  
    62.                         </ul>  
    63.                     </div>  
    64.   
    65.                     <div class="accordionHeader">  
    66.                         <h2><span>Folder</span>典型页面</h2>  
    67.                     </div>  
    68.                     <div class="accordionContent">  
    69.                         <ul class="tree treeFolder treeCheck">  
    70.                             <li><a href="demo_page1.html" target="navTab" rel="demo_page1">查询我的客户</a></li>  
    71.                             <li><a href="demo_page1.html" target="navTab" rel="demo_page2">表单查询页面</a></li>  
    72.   
    73.                             <li><a href="demo_page4.html" target="navTab" rel="demo_page4">表单录入页面</a></li>  
    74.                             <li><a href="demo_page5.html" target="navTab" rel="demo_page5">有文本输入的表单</a></li>  
    75.                             <li><a href="javascript:void(0)">有提示的表单输入页面</a>  
    76.                                 <ul>  
    77.                                     <li><a href="javascript:void(0)">页面一</a></li>  
    78.                                     <li><a href="javascript:void(0)">页面二</a></li>  
    79.   
    80.                                 </ul>  
    81.                             </li>  
    82.                             <li><a href="javascript:void(0)">选项卡和图形的页面</a>  
    83.                                 <ul>  
    84.                                     <li><a href="javascript:void(0)">页面一</a></li>  
    85.                                     <li><a href="javascript:void(0)">页面二</a></li>  
    86.                                 </ul>  
    87.   
    88.                             </li>  
    89.                             <li><a href="javascript:void(0)">选项卡和图形切换的页面</a></li>  
    90.                             <li><a href="javascript:void(0)">左右两个互动的页面</a></li>  
    91.                             <li><a href="javascript:void(0)">列表输入的页面</a></li>  
    92.                             <li><a href="javascript:void(0)">双层栏目列表的页面</a></li>  
    93.                         </ul>  
    94.                     </div>  
    95.   
    96.                     <div class="accordionHeader">  
    97.                         <h2><span>Folder</span>流程演示</h2>  
    98.                     </div>  
    99.                     <div class="accordionContent">  
    100.                         <ul class="tree">  
    101.                             <li><a href="newPage1.html" target="dialog" rel="dlg_page">列表</a></li>  
    102.                             <li><a href="newPage1.html" target="dialog" rel="dlg_page">列表</a></li>  
    103.   
    104.                             <li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>  
    105.                             <li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>  
    106.                             <li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>  
    107.                         </ul>  
    108.                     </div>  
    109.                 </div>  
    110.             </div>  
    111.         </div>  

           至于它的点击效果 应该就是页面的JS起的作用。

     接下来新建工程

     

    把下载的文件夹里的JS文件啊CSS文件啊 都抄到文件夹里包括主题。

    看到JS中有这么一段代码

      
    [javascript] view plaincopy
    1. <script type="text/javascript">  
    2.   $(function(){  
    3.       DWZ.init("dwz.frag.xml", {  
    4.   //        loginUrl:"loginsub.html", loginTitle:"登录",    // 弹出登录对话框  
    5.           loginUrl:"login.html",    // 跳到登录页面  
    6.           statusCode:{ok:200, error:300, timeout:301}, //【可选】  
    7.           pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】  
    8.           debug:false,    // 调试模式 【true|false】  
    9.           callback:function(){  
    10.              initEnv();  
    11.              $("#themeList").theme({themeBase:"themes"});  
    12.          }  
    13.      });  
    14.  });  
    15.  </script>  

     init这个单词应该就是初始化的缩写。哈哈。。

     那我们就去下载的包里找到

    dwz.frag.xml

    拷贝到根目录下。

    包括图片这些。然后在页面上把响应的JS和CSS文件引用上（注意路径）

    接下来直接把源码copy到工程里。把那些没用的去掉。。。you know。。。（在这里感谢DWZ所有工作人员为我们提供了这么好的框架。支持国产!）

    在把我们上面看出来的菜单抽取出来用来后台加载 输出html字符串的形式改写之后差不多就下面这样。。。

    [html] view plaincopy
    1. <body>  
    2.     <form id="form1" runat="server">  
    3.     <body scroll="no">  
    4.         <div id="layout">  
    5.             <div id="header">  
    6.                 <div class="headerNav">  
    7.                     <a class="logo" href="javascript:void(0)">标志</a>  
    8.                     <ul class="nav">  
    9.                         <li><a href="#" target="dialog">设置</a></li>  
    10.                         <!--<li><a href="javascript:void(0)">反馈</a></li>-->  
    11.                         <li><a href="#" target="_blank">论坛</a></li>  
    12.                         <li><a href="#">退出</a></li>  
    13.                     </ul>  
    14.                     <ul class="themeList" id="themeList">  
    15.                         <li theme="default">  
    16.                             <div class="selected">  
    17.                                 蓝色</div>  
    18.                         </li>  
    19.                         <li theme="green">  
    20.                             <div>  
    21.                                 绿色</div>  
    22.                         </li>  
    23.                         <!--<li theme="red"><div>红色</div></li>-->  
    24.                         <li theme="purple">  
    25.                             <div>  
    26.                                 紫色</div>  
    27.                         </li>  
    28.                         <li theme="silver">  
    29.                             <div>  
    30.                                 银色</div>  
    31.                         </li>  
    32.                     </ul>  
    33.                 </div>  
    34.             </div>  
    35.             <div id="leftside">  
    36.                 <div id="sidebar_s" style="display: none;">  
    37.                     <div class="collapse">  
    38.                         <div class="toggleCollapse">  
    39.                             <div>  
    40.                             </div>  
    41.                         </div>  
    42.                     </div>  
    43.                 </div>  
    44.                 <div id="sidebar">  
    45.                     <div class="toggleCollapse">  
    46.                         <h2>  
    47.                             主菜单</h2>  
    48.                         <div>  
    49.                             收缩</div>  
    50.                     </div>  
    51.                     <div class="accordion" fillSpace="sidebar">  
    52.                         <%=GetLeftMenu()%>  
    53.                     </div>  
    54.                 </div>  
    55.             </div>  
    56.             <div id="container">  
    57.                 <div id="navTab" class="tabsPage">  
    58.                     <div class="tabsPageHeader">  
    59.                         <div class="tabsPageHeaderContent">  
    60.                             <!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->  
    61.                             <ul class="navTab-tab">  
    62.                                 <li tabid="main" class="main"><a href="javascript:void(0)"><span><span class="home_icon">  
    63.                                     我的主页</span></span></a></li>  
    64.                             </ul>  
    65.                         </div>  
    66.                         <div class="tabsLeft">  
    67.                             left</div>  
    68.                         <!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->  
    69.                         <div class="tabsRight">  
    70.                             right</div>  
    71.                         <!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->  
    72.                         <div class="tabsMore">  
    73.                             more</div>  
    74.                     </div>  
    75.                     <ul class="tabsMoreList">  
    76.                         <li><a href="javascript:void(0)">我的主页</a></li>  
    77.                     </ul>  
    78.                     <div class="navTab-panel tabsPageContent">  
    79.                         <div class="page">  
    80.                             <div class="accountInfo">  
    81.                                 <div class="alertInfo">  
    82.                                     <h2>  
    83.                                         <a href="#" target="_blank"></a>  
    84.                                     </h2>  
    85.                                     <a href="#" target="_blank"></a>  
    86.                                 </div>  
    87.                                 <p>  
    88.                                     <span></span>  
    89.                                 </p>  
    90.                                 <p>  
    91.                                     <a href="http://hi.csdn.net/wxr0323" target="dialog">子夜抄袭DWZ</a></p>  
    92.                             </div>  
    93.                             <div class="pageFormContent" layouth="80">  
    94.                             </div>  
    95.                         </div>  
    96.                     </div>  
    97.                 </div>  
    98.             </div>  
    99.             <div id="taskbar" style="left: 0px; display: none;">  
    100.                 <div class="taskbarContent">  
    101.                     <ul>  
    102.                     </ul>  
    103.                 </div>  
    104.                 <div class="taskbarLeft taskbarLeftDisabled" style="display: none;">  
    105.                     taskbarLeft</div>  
    106.                 <div class="taskbarRight" style="display: none;">  
    107.                     taskbarRight</div>  
    108.             </div>  
    109.             <div id="splitBar">  
    110.             </div>  
    111.             <div id="splitBarProxy">  
    112.             </div>  
    113.         </div>  
    114.         <div id="footer">  
    115.             Copyright © 2010 <a href="demo_page2.html" target="dialog">DWZ研发组</a></div>  
    116.         <!--拖动效果-->  
    117.         <div class="resizable">  
    118.         </div>  
    119.         <!--阴影-->  
    120.         <div class="shadow" style=" 508px; top: 148px; left: 296px;">  
    121.             <div class="shadow_h">  
    122.                 <div class="shadow_h_l">  
    123.                 </div>  
    124.                 <div class="shadow_h_r">  
    125.                 </div>  
    126.                 <div class="shadow_h_c">  
    127.                 </div>  
    128.             </div>  
    129.             <div class="shadow_c">  
    130.                 <div class="shadow_c_l" style="height: 296px;">  
    131.                 </div>  
    132.                 <div class="shadow_c_r" style="height: 296px;">  
    133.                 </div>  
    134.                 <div class="shadow_c_c" style="height: 296px;">  
    135.                 </div>  
    136.             </div>  
    137.             <div class="shadow_f">  
    138.                 <div class="shadow_f_l">  
    139.                 </div>  
    140.                 <div class="shadow_f_r">  
    141.                 </div>  
    142.                 <div class="shadow_f_c">  
    143.                 </div>  
    144.             </div>  
    145.         </div>  
    146.         <!--遮盖屏幕-->  
    147.         <div id="alertBackground" class="alertBackground">  
    148.         </div>  
    149.         <div id="dialogBackground" class="dialogBackground">  
    150.         </div>  
    151.         <div id='background' class='background'>  
    152.         </div>  
    153.         <div id='progressBar' class='progressBar'>  
    154.             数据加载中，请稍等...</div>  
    155.   
    156.         <script type="text/javascript">  
    157.             var _gaq = _gaq || [];  
    158.             _gaq.push(['_setAccount', 'UA-16716654-1']);  
    159.             _gaq.push(['_trackPageview']);  
    160.   
    161.             (function() {  
    162.                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
    163.                 ga.src = ('https:' == document.location.protocol ? ' https://ssl' : ' http://www') + '.google-analytics.com/ga.js';  
    164.                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
    165.             })();  
    166.         </script>  
    167.   
    168.     </body>  


     只贴了body里面的

    接下来我们就要实现绑定的那个方法了。。

    数据库跟第一篇的数据库一样。

    [csharp] view plaincopy
    1. /// <summary>  
    2.         /// 获取左侧便拦组  
    3.         /// </summary>  
    4.         protected string GetLeftMenu()  
    5.         {  
    6.             StringBuilder LeftList = new StringBuilder();  
    7.             try  
    8.             {  
    9.                 //获取菜单中的所有数据  
    10.                 DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable("select * from Ziye_Menu", CommandType.Text);  
    11.                 //取出所有父节点 因为父节点的Menu_Fid=0  
    12.                 DataRow[] drMenu = Dt_TotleMenu.Select("Menu_Fid=0 and Menu_able=1");  
    13.                 //构建父节点的table  
    14.                 DataTable LeftMenuTable = new DataTable();  
    15.                 //克隆一下解构  
    16.                 LeftMenuTable = drMenu[0].Table.Clone();  
    17.                 //导入数据  
    18.                 foreach (DataRow dr in drMenu)  
    19.                 {  
    20.                     LeftMenuTable.ImportRow(dr);  
    21.                 }  
    22.                 //如果存在父节点  
    23.                 if (LeftMenuTable.Rows.Count != 0)  
    24.                 {  
    25.                     //遍历拼接html 根据第一篇观察和抽取HTML的功夫  
    26.                     for (int i = 0; i < LeftMenuTable.Rows.Count; i++)  
    27.                     {  
    28.                         LeftList.Append("<div class=/"accordionHeader/">");  
    29.                         LeftList.Append("<h2><span>Folder</span>" + LeftMenuTable.Rows[i]["Menu_Name"].ToString() + "</h2>");  
    30.                         LeftList.Append("</div>");  
    31.                         LeftList.Append("<div class=/"accordionContent/" style=/"display:block;/">");  
    32.   
    33.                         LeftList.Append("<ul class=/"tree treeFolder/">");  
    34.   
    35.                         //获取当前父节点的所有子节点  
    36.                         DataRow[] drSencondMenu = Dt_TotleMenu.Select("Menu_Fid='" + LeftMenuTable.Rows[i]["Menu_ID"] + "' and Menu_able=1");  
    37.                         DataTable SecondTable = new DataTable();  
    38.                         SecondTable = drSencondMenu[0].Table.Clone();  
    39.                         foreach (DataRow dr in drSencondMenu)  
    40.                         {  
    41.                             SecondTable.ImportRow(dr);  
    42.                         }  
    43.   
    44.                         //如果子存在子节点  
    45.                         if (SecondTable.Rows.Count != 0)  
    46.                         {  
    47.                             //遍历拼接子节点的HTML  
    48.                             for (int j = 0; j < SecondTable.Rows.Count; j++)  
    49.                             {  
    50.                                 LeftList.Append("<li><a href=/"" + SecondTable.Rows[j]["Menu_Url"] + "/" target=/"navTab/" rel=/"" + SecondTable.Rows[j]["Menu_Rel"] + "/">" + SecondTable.Rows[j]["Menu_Name"] + "</a></li>");  
    51.                             }  
    52.                         }  
    53.                         //结束符  
    54.                         LeftList.Append("</ul>");  
    55.                         LeftList.Append("</div>");  
    56.                     }  
    57.   
    58.                 }  
    59.                 return LeftList.ToString();  
    60.   
    61.             }  
    62.             catch (Exception err)  
    63.             {  
    64.                 return "没菜单";  
    65.             }  
    66.         }  

     这个代码应该比第一篇的简单一些。同学们也可以改成递归的形式。

    其实原理跟第一篇的差不多。

    OK F5。

     最后的效果了。

    其实这篇文章上周写的好详细。但是一不小心浏览器死了。

    博客园没有自动保存功能。只能前功尽弃了。人还是有惰性。主要是感冒了。哎，明天还继续上班。上班悲剧啊！给不上力啊。

    下次有机会在给大家介绍一种新型的菜单。这里的技术都是比较过时的了。大家可以用跟得上步伐的代码改造一下。

    到这里菜单已经完成了，下次得去坛子抓一抓问菜单的。

    洗洗睡了。

    忘记贴源码了。

     源码请点击

    洗洗睡了。

  • 相关阅读:
    【调试】关于F9
    【vue】vue变量定义的位置
    【js】MVVM模型
    RE最全面的正则表达式----数字篇
    Spider & CrawlSpider
    论小脚本的重要性
    论小脚本的简单性3
    论小脚本的简单性2
    论小脚本的简单性
    git的常用命令
  • 原文地址：https://www.cnblogs.com/weihengblogs/p/2790347.html
Copyright © 2020-2023  润新知