DWZ相关标签class

在这里感谢DWZ所有工作人员为我们提供了这么好的框架。支持国产!

<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   ><     href   ="tabsPage.html"    target   ="navTab"   >   主框架面板   </   a   >  
                                
  <   ul   >  
                                    
  <   li   ><     href   ="main.html"    target   ="navTab"    rel   ="main"   >   我的主页   </   a   ></   li   >  
                                    
  <   li   ><     href   ="http://www.baidu.com"    target   ="navTab"    rel   ="page1"   >   页面一(外部页面)   </   a   ></   li >  
                                    
  <   li   ><     href   ="demo_page1.html"    target   ="navTab"    rel   ="page1"    fresh   ="false"   >   替换页面一   </   a ></   li   >  
                                    
  <   li   ><     href   ="demo_page2.html"    target   ="navTab"    rel   ="page2"   >   页面二   </   a   ></   li   >  

                                    
  <   li   ><     href   ="demo_page4.html"    target   ="navTab"    rel   ="page3"    title   ="页面三(自定义标签名)"   > 页面三   </   a   ></   li   >  
                                    
  <   li   ><     href   ="demo_page4.html"    target   ="navTab"    rel   ="page4"    fresh   ="false"   >   测试页面(fresh="false")   </   a   ></   li   >  
                                
  </   ul   >  
                            
  </   li   >  
                            
                            
  <   li   ><   a   >   常用组件   </   a   >  
                                
  <   ul   >  
                                    
  <   li   ><     href   ="w_panel.html"    target   ="navTab"    rel   ="w_panel"   >   面板   </   a   ></   li   >  

                                    
  <   li   ><     href   ="w_tabs.html"    target   ="navTab"    rel   ="w_tabs"   >   选项卡面板   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_dialog.html"    target   ="navTab"    rel   ="w_dialog"   >   弹出窗口   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_alert.html"    target   ="navTab"    rel   ="w_alert"   >   提示窗口   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_list.html"    target   ="navTab"    rel   ="w_list"   >   CSS表格容器   </   a   ></   li   >  
                                    
  <   li   ><     href   ="demo_page1.html"    target   ="navTab"    rel   ="w_table"   >   表格容器   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_removeSelected.html"    target   ="navTab"    rel   ="w_table"   >   表格数据库排序+批量删除   </ a   ></   li   >  

                                    
  <   li   ><     href   ="w_tree.html"    target   ="navTab"    rel   ="w_tree"   >   树形菜单   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_accordion.html"    target   ="navTab"    rel   ="w_accordion"   >   滑动菜单   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_editor.html"    target   ="navTab"    rel   ="w_editor"   >   编辑器   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_datepicker.html"    target   ="navTab"    rel   ="w_datepicker"   >   日期控件   </   a   ></   li   >  
                                
  </   ul   >  
                            
  </   li   >  
                                    
                            
  <   li   ><   a   >   表单组件   </   a   >  

                                
  <   ul   >  
                                    
  <   li   ><     href   ="w_validation.html"    target   ="navTab"    rel   ="w_validation"   >   表单验证   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_button.html"    target   ="navTab"    rel   ="w_button"   >   按钮   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_textInput.html"    target   ="navTab"    rel   ="w_textInput"   >   文本框/文本域   </   a   ></   li >  
                                    
  <   li   ><     href   ="w_combox.html"    target   ="navTab"    rel   ="w_combox"   >   下拉菜单   </   a   ></   li   >  
                                    
  <   li   ><     href   ="w_checkbox.html"    target   ="navTab"    rel   ="w_checkbox"   >   多选框/单选框   </   a   ></   li   >

                                    
  <   li   ><     href   ="demo_upload.html"    target   ="navTab"    rel   ="demo_upload"   >   iframeCallback表单提交   </ a   ></   li   >  
                                    
  <   li   ><     href   ="w_uploadify.html"    target   ="navTab"    rel   ="w_uploadify"   >   uploadify多文件上传   </   a ></   li   >  
                                
  </   ul   >  
                            
  </   li   >  
                            
  <   li   ><     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   ><     href   ="demo_page1.html"    target   ="navTab"    rel   ="demo_page1"   >   查询我的客户   </   a   ></   li   >  
                            
  <   li   ><     href   ="demo_page1.html"    target   ="navTab"    rel   ="demo_page2"   >   表单查询页面   </   a   ></   li   >  

                            
  <   li   ><     href   ="demo_page4.html"    target   ="navTab"    rel   ="demo_page4"   >   表单录入页面   </   a   ></   li   >  
                            
  <   li   ><     href   ="demo_page5.html"    target   ="navTab"    rel   ="demo_page5"   >   有文本输入的表单   </   a   ></   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   有提示的表单输入页面   </   a   >  
                                
  <   ul   >  
                                    
  <   li   ><     href   ="javascript:void(0)"   >   页面一   </   a   ></   li   >  
                                    
  <   li   ><     href   ="javascript:void(0)"   >   页面二   </   a   ></   li   >  

                                
  </   ul   >  
                            
  </   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   选项卡和图形的页面   </   a   >  
                                
  <   ul   >  
                                    
  <   li   ><     href   ="javascript:void(0)"   >   页面一   </   a   ></   li   >  
                                    
  <   li   ><     href   ="javascript:void(0)"   >   页面二   </   a   ></   li   >  
                                
  </   ul   >  

                            
  </   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   选项卡和图形切换的页面   </   a   ></   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   左右两个互动的页面   </   a   ></   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   列表输入的页面   </   a   ></   li   >  
                            
  <   li   ><     href   ="javascript:void(0)"   >   双层栏目列表的页面   </   a   ></   li   >  
                        
  </   ul   >  
                    
  </   div   >  

                    
  <   div    class   ="accordionHeader"   >  
                        
  <   h2   ><   span   >   Folder   </   span   >   流程演示   </   h2   >  
                    
  </   div   >  
                    
  <   div    class   ="accordionContent"   >  
                        
  <   ul    class   ="tree"   >  
                            
  <   li   ><     href   ="newPage1.html"    target   ="dialog"    rel   ="dlg_page"   >   列表   </   a   ></   li   >  
                            
  <   li   ><     href   ="newPage1.html"    target   ="dialog"    rel   ="dlg_page"   >   列表   </   a   ></   li   >  

                            
  <   li   ><     href   ="newPage1.html"    target   ="dialog"    rel   ="dlg_page2"   >   列表   </   a   ></   li   >  
                            
  <   li   ><     href   ="newPage1.html"    target   ="dialog"    rel   ="dlg_page2"   >   列表   </   a   ></   li   >  
                            
  <   li   ><     href   ="newPage1.html"    target   ="dialog"    rel   ="dlg_page2"   >   列表   </   a   ></   li   >  
                        
  </   ul   >  
                    
  </   div   >  
                
  </   div   >  

            
  </   div   >  

       </div>

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

复制代码
<  body  > 
    
  <  form   id  ="form1"   runat  ="server"  > 
    
  <  body   scroll  ="no"  > 
        
  <  div   id  ="layout"  > 
            
  <  div   id  ="header"  > 
                
  <  div   class  ="headerNav"  > 
                    
  <    class  ="logo"   href  ="javascript:void(0)"  >  标志  </  a  > 
                    
  <  ul   class  ="nav"  > 
                        
  <  li  ><    href  ="#"   target  ="dialog"  >  设置  </  a  ></  li  > 
                        
  <!--  <li><a href="javascript:void(0)">反馈</a></li>  --> 
                        
  <  li  ><    href  ="#"   target  ="_blank"  >  论坛  </  a  ></  li  > 
                        
  <  li  ><    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"  ><    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  ><    href  ="javascript:void(0)"  >  我的主页  </  a  ></  li  > 
                    
  </  ul  > 
                    
  <  div   class  ="navTab-panel tabsPageContent"  > 
                        
  <  div   class  ="page"  > 
                            
  <  div   class  ="accountInfo"  > 
                                
  <  div   class  ="alertInfo"  > 
                                    
  <  h2  > 
                                        
  <    href  ="#"   target  ="_blank"  ></  a  > 
                                    
  </  h2  > 
                                    
  <    href  ="#"   target  ="_blank"  ></  a  > 
                                
  </  div  > 
                                
  <  p  > 
                                    
  <  span  ></  span  > 
                                
  </  p  > 
                                
  <  p  > 
                                    
  <    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 
  &copy;   2010   <    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     "  没菜单  "  ;
            }
        }
复制代码

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值