同窗们看鸟菜单一菜单二有不什么特别得感觉.是不是太简略鸟.
当初俺们联合第一篇文章来做个训练.
没事哒时候会常常找一些难看得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 =" 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)" > 选项卡and图形切换哒页面 </ 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中有这么一段代码
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 ,
1.80战神英雄合击, 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 " });
15 </ 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 =" 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 ' : ' google-analytics.com/ga.js ' ;
var s = document.getElementsByTagName( ' script ' )[ 0 ]; s.parentNode.insertBefore(ga, s);
</ script >
</ body >
只贴得body里面哒
接下来大家就要实现绑定哒那个方式得.....
