动态菜单(三)

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

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

      没事的时候会经常找一些好看的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="width: 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。

 最后的效果了。

 

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

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

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

 

 

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

洗洗睡了。

 

忘记贴源码了。

 源码请点击

洗洗睡了。

posted @ 2012-11-27 10:47  盛开的雨季  阅读(398)  评论(0)  编辑  收藏  举报