动态菜单(三)
同学们看了菜单一菜单二有没有什么特殊的感觉。是不是太简单了。
现在我们结合第一篇文章来做个练习。
没事的时候会经常找一些好看的UI，留着自己以后做项目的时候用。 比如easyui、EXT JS啊这些。无意中发现了一个国产的框架。那么今天咱也支持国产一把。
传送门 DWZ框架。感觉还不错 上个图大家看看。
效果还不错吧？呵呵 这节课我们就抄袭了。。
先去官方网站下载源代码。 传送门解压源码打开index.html 页面。HTML的。果断查看源文件。
这里就不贴代码了。上面是一堆JS根据第一节的“功力”我们可以观察以下代码是菜单
<div id="leftside">
<div id="sidebar_s">
<div class="collapse">
<div class="toggleCollapse"><div></div></div>
</div>
</div>
<div id="sidebar">
<div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>
<div class="accordion" fillSpace="sidebar">
<div class="accordionHeader">
<h2><span>Folder</span>界面组件</h2>
</div>
<div class="accordionContent">
<ul class="tree treeFolder">
<li><a href="tabsPage.html" target="navTab">主框架面板</a>
<ul>
<li><a href="main.html" target="navTab" rel="main">我的主页</a></li>
<li><a href="http://www.baidu.com" target="navTab" rel="page1">页面一(外部页面)</a></li>
<li><a href="demo_page1.html" target="navTab" rel="page1" fresh="false">替换页面一</a></li>
<li><a href="demo_page2.html" target="navTab" rel="page2">页面二</a></li>
<li><a href="demo_page4.html" target="navTab" rel="page3" title="页面三（自定义标签名）">页面三</a></li>
<li><a href="demo_page4.html" target="navTab" rel="page4" fresh="false">测试页面（fresh="false"）</a></li>
</ul>
</li>
<li><a>常用组件</a>
<ul>
<li><a href="w_panel.html" target="navTab" rel="w_panel">面板</a></li>
<li><a href="w_tabs.html" target="navTab" rel="w_tabs">选项卡面板</a></li>
<li><a href="w_dialog.html" target="navTab" rel="w_dialog">弹出窗口</a></li>
<li><a href="w_alert.html" target="navTab" rel="w_alert">提示窗口</a></li>
<li><a href="w_list.html" target="navTab" rel="w_list">CSS表格容器</a></li>
<li><a href="demo_page1.html" target="navTab" rel="w_table">表格容器</a></li>
<li><a href="w_removeSelected.html" target="navTab" rel="w_table">表格数据库排序+批量删除</a></li>
<li><a href="w_tree.html" target="navTab" rel="w_tree">树形菜单</a></li>
<li><a href="w_accordion.html" target="navTab" rel="w_accordion">滑动菜单</a></li>
<li><a href="w_editor.html" target="navTab" rel="w_editor">编辑器</a></li>
<li><a href="w_datepicker.html" target="navTab" rel="w_datepicker">日期控件</a></li>
</ul>
</li>
<li><a>表单组件</a>
<ul>
<li><a href="w_validation.html" target="navTab" rel="w_validation">表单验证</a></li>
<li><a href="w_button.html" target="navTab" rel="w_button">按钮</a></li>
<li><a href="w_textInput.html" target="navTab" rel="w_textInput">文本框/文本域</a></li>
<li><a href="w_combox.html" target="navTab" rel="w_combox">下拉菜单</a></li>
<li><a href="w_checkbox.html" target="navTab" rel="w_checkbox">多选框/单选框</a></li>
<li><a href="demo_upload.html" target="navTab" rel="demo_upload">iframeCallback表单提交</a></li>
<li><a href="w_uploadify.html" target="navTab" rel="w_uploadify">uploadify多文件上传</a></li>
</ul>
</li>
<li><a href="dwz.frag.xml" target="_blank">dwz.frag.xml</a></li>
</ul>
</div>
<div class="accordionHeader">
<h2><span>Folder</span>典型页面</h2>
</div>
<div class="accordionContent">
<ul class="tree treeFolder treeCheck">
<li><a href="demo_page1.html" target="navTab" rel="demo_page1">查询我的客户</a></li>
<li><a href="demo_page1.html" target="navTab" rel="demo_page2">表单查询页面</a></li>
<li><a href="demo_page4.html" target="navTab" rel="demo_page4">表单录入页面</a></li>
<li><a href="demo_page5.html" target="navTab" rel="demo_page5">有文本输入的表单</a></li>
<li><a href="javascript:void(0)">有提示的表单输入页面</a>
<ul>
<li><a href="javascript:void(0)">页面一</a></li>
<li><a href="javascript:void(0)">页面二</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">选项卡和图形的页面</a>
<ul>
<li><a href="javascript:void(0)">页面一</a></li>
<li><a href="javascript:void(0)">页面二</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">选项卡和图形切换的页面</a></li>
<li><a href="javascript:void(0)">左右两个互动的页面</a></li>
<li><a href="javascript:void(0)">列表输入的页面</a></li>
<li><a href="javascript:void(0)">双层栏目列表的页面</a></li>
</ul>
</div>
<div class="accordionHeader">
<h2><span>Folder</span>流程演示</h2>
</div>
<div class="accordionContent">
<ul class="tree">
<li><a href="newPage1.html" target="dialog" rel="dlg_page">列表</a></li>
<li><a href="newPage1.html" target="dialog" rel="dlg_page">列表</a></li>
<li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>
<li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>
<li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>
</ul>
</div>
</div>
</div>
</div>
至于它的点击效果 应该就是页面的JS起的作用。
接下来新建工程
把下载的文件夹里的JS文件啊CSS文件啊 都抄到文件夹里包括主题。
看到JS中有这么一段代码
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml", {
// loginUrl:"loginsub.html", loginTitle:"登录", // 弹出登录对话框
loginUrl:"login.html", // 跳到登录页面
statusCode:{ok:200, error:300, timeout:301}, //【可选】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
debug:false, // 调试模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
});
</script>
init这个单词应该就是初始化的缩写。哈哈。。
那我们就去下载的包里找到
dwz.frag.xml
拷贝到根目录下。
包括图片这些。然后在页面上把响应的JS和CSS文件引用上（注意路径）
接下来直接把源码copy到工程里。把那些没用的去掉。。。you know。。。（在这里感谢DWZ所有工作人员为我们提供了这么好的框架。支持国产!）
在把我们上面看出来的菜单抽取出来用来后台加载 输出html字符串的形式改写之后差不多就下面这样。。。
<body>
<form id="form1" runat="server">
<body scroll="no">
<div id="layout">
<div id="header">
<div class="headerNav">
<a class="logo" href="javascript:void(0)">标志</a>
<ul class="nav">
<li><a href="#" target="dialog">设置</a></li>
<!--<li><a href="javascript:void(0)">反馈</a></li>-->
<li><a href="#" target="_blank">论坛</a></li>
<li><a href="#">退出</a></li>
</ul>
<ul class="themeList" id="themeList">
<li theme="default">
<div class="selected">
蓝色</div>
</li>
<li theme="green">
<div>
绿色</div>
</li>
<!--<li theme="red"><div>红色</div></li>-->
<li theme="purple">
<div>
紫色</div>
</li>
<li theme="silver">
<div>
银色</div>
</li>
</ul>
</div>
</div>
<div id="leftside">
<div id="sidebar_s" style="display: none;">
<div class="collapse">
<div class="toggleCollapse">
<div>
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="toggleCollapse">
<h2>
主菜单</h2>
<div>
收缩</div>
</div>
<div class="accordion" fillSpace="sidebar">
<%=GetLeftMenu()%>
</div>
</div>
</div>
<div id="container">
<div id="navTab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent">
<!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->
<ul class="navTab-tab">
<li tabid="main" class="main"><a href="javascript:void(0)"><span><span class="home_icon">
我的主页</span></span></a></li>
</ul>
</div>
<div class="tabsLeft">
left</div>
<!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->
<div class="tabsRight">
right</div>
<!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->
<div class="tabsMore">
more</div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:void(0)">我的主页</a></li>
</ul>
<div class="navTab-panel tabsPageContent">
<div class="page">
<div class="accountInfo">
<div class="alertInfo">
<h2>
<a href="#" target="_blank"></a>
</h2>
<a href="#" target="_blank"></a>
</div>
<p>
<span></span>
</p>
<p>
<a href="http://hi.csdn.net/wxr0323" target="dialog">子夜抄袭DWZ</a></p>
</div>
<div class="pageFormContent" layouth="80">
</div>
</div>
</div>
</div>
</div>
<div id="taskbar" style="left: 0px; display: none;">
<div class="taskbarContent">
<ul>
</ul>
</div>
<div class="taskbarLeft taskbarLeftDisabled" style="display: none;">
taskbarLeft</div>
<div class="taskbarRight" style="display: none;">
taskbarRight</div>
</div>
<div id="splitBar">
</div>
<div id="splitBarProxy">
</div>
</div>
<div id="footer">
Copyright © 2010 <a href="demo_page2.html" target="dialog">DWZ研发组</a></div>
<!--拖动效果-->
<div class="resizable">
</div>
<!--阴影-->
<div class="shadow" style="width: 508px; top: 148px; left: 296px;">
<div class="shadow_h">
<div class="shadow_h_l">
</div>
<div class="shadow_h_r">
</div>
<div class="shadow_h_c">
</div>
</div>
<div class="shadow_c">
<div class="shadow_c_l" style="height: 296px;">
</div>
<div class="shadow_c_r" style="height: 296px;">
</div>
<div class="shadow_c_c" style="height: 296px;">
</div>
</div>
<div class="shadow_f">
<div class="shadow_f_l">
</div>
<div class="shadow_f_r">
</div>
<div class="shadow_f_c">
</div>
</div>
</div>
<!--遮盖屏幕-->
<div id="alertBackground" class="alertBackground">
</div>
<div id="dialogBackground" class="dialogBackground">
</div>
<div id='background' class='background'>
</div>
<div id='progressBar' class='progressBar'>
数据加载中，请稍等...</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16716654-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? ' https://ssl' : ' http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
只贴了body里面的
接下来我们就要实现绑定的那个方法了。。
数据库跟第一篇的数据库一样。
/// <summary>
/// 获取左侧便拦组
/// </summary>
protected string GetLeftMenu()
{
StringBuilder LeftList = new StringBuilder();
try
{
//获取菜单中的所有数据
DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable("select * from Ziye_Menu", CommandType.Text);
//取出所有父节点 因为父节点的Menu_Fid=0
DataRow[] drMenu = Dt_TotleMenu.Select("Menu_Fid=0 and Menu_able=1");
//构建父节点的table
DataTable LeftMenuTable = new DataTable();
//克隆一下解构
LeftMenuTable = drMenu[0].Table.Clone();
//导入数据
foreach (DataRow dr in drMenu)
{
LeftMenuTable.ImportRow(dr);
}
//如果存在父节点
if (LeftMenuTable.Rows.Count != 0)
{
//遍历拼接html 根据第一篇观察和抽取HTML的功夫
for (int i = 0; i < LeftMenuTable.Rows.Count; i++)
{
LeftList.Append("<div class=/"accordionHeader/">");
LeftList.Append("<h2><span>Folder</span>" + LeftMenuTable.Rows[i]["Menu_Name"].ToString() + "</h2>");
LeftList.Append("</div>");
LeftList.Append("<div class=/"accordionContent/" style=/"display:block;/">");
LeftList.Append("<ul class=/"tree treeFolder/">");
//获取当前父节点的所有子节点
DataRow[] drSencondMenu = Dt_TotleMenu.Select("Menu_Fid='" + LeftMenuTable.Rows[i]["Menu_ID"] + "' and Menu_able=1");
DataTable SecondTable = new DataTable();
SecondTable = drSencondMenu[0].Table.Clone();
foreach (DataRow dr in drSencondMenu)
{
SecondTable.ImportRow(dr);
}
//如果子存在子节点
if (SecondTable.Rows.Count != 0)
{
//遍历拼接子节点的HTML
for (int j = 0; j < SecondTable.Rows.Count; j++)
{
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>");
}
}
//结束符
LeftList.Append("</ul>");
LeftList.Append("</div>");
}
}
return LeftList.ToString();
}
catch (Exception err)
{
return "没菜单";
}
}
这个代码应该比第一篇的简单一些。同学们也可以改成递归的形式。
其实原理跟第一篇的差不多。
OK F5。
最后的效果了。
其实这篇文章上周写的好详细。但是一不小心浏览器死了。
博客园没有自动保存功能。只能前功尽弃了。人还是有惰性。主要是感冒了。哎，明天还继续上班。上班悲剧啊！给不上力啊。
下次有机会在给大家介绍一种新型的菜单。这里的技术都是比较过时的了。大家可以用跟得上步伐的代码改造一下。
到这里菜单已经完成了，下次得去坛子抓一抓问菜单的。
洗洗睡了。
忘记贴源码了。
源码请点击
洗洗睡了。