zoukankan      html  css  js  c++  java

  • div布局改进treeview导航

    asp.net对新手来讲真是福音，随便拖几下就是一个网页．让我这个从asp转来的菜鸟开始兴奋不已，尤其在几个数据绑定控件还有验证控件，但两个月下来后让我对这些控件兴趣全无，尤其是数据绑定控件如gridview．我现在基本上不再使用服务器控件了．．．最最恼人的就是那个treeview，点一下刷一下，网站后台我自己都不忍心看．

    切入正题．网站后台如果不使用ajax控件实现无刷的话，个人觉得还是传统的（上）左右较符合用户心理，体验也不错．因此还使用框架来做后台．下面对左侧菜单进行div布局，仿照了treeview中contacts主题，增强图片点击切换上下换向（还是图片＾＾），每次只展开一项，可自定义展开项（默认第一项展开).

     效果

    HTML

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml" >
      3 <head>
      4 <title></title>
      7 <link href="css/layoutLeft.css" rel="stylesheet" type="text/css" />
      8 <script type="text/javascript">
      9 <!--
     10 ///功能：折叠菜单
     11 ///王洪剑http://www.51obj.cn/
     12 ///2009-6-13
     13 var intOpenIndex=0;//默认展开
     14 function showMenu(arg)
     15 {
     16     var objH5=document.getElementsByTagName("h5");
     17     for(var i=0;i<objLi.length;i++)
     18     {
     19         if(i==arg)//展开
     20         {
     21             objLi[i].className=(objLi[i].className=="menuList")?"menuListOpen":"menuList";
     22             objH5[i].className=(objH5[i].className="h5Normal")?"h5Open":"h5Normal";
     23         }
     24         else//折叠
     25         {
     26             objLi[i].className="menuList";
     27             objH5[i].className="h5Normal";
     28         }
     29     }
     30 }
     31 //-->
     32 </script>
     33 </head>
     34 <body>
     35 <div id="menuBar">
     36     <h5 class="h5Normal" onclick="showMenu(0)">文章管理</h5>
     37     <ul id="menu0" class="menuList">
     38         <li><a href="#" target="right">所有文章</a></li>
     39         <li><a href="#" target="right">添加文章</a></li>
     40         <li><a href="#" target="right">管理类别</a></li>
     41     </ul>
     42     <h5 class="h5Normal" onclick="showMenu(1)">产品管理</h5>
     43     <ul id="menu1" class="menuList">
     44         <li><a href="#" target="right">所有产品</a></li>
     45         <li><a href="#" target="right">产品分类</a></li>
     46     </ul>
     47     <h5 class="h5Normal" onclick="showMenu(2)">公告管理</h5>
     48     <ul id="menu2" class="menuList">
     49         <li><a href="#" target="right">所有公告</a></li>
     50         <li><a href="#" target="right">添加公告</a></li>
     51     </ul>
     52     <h5 class="h5Normal" onclick="showMenu(3)">供求管理</h5>
     53     <ul id="menu3" class="menuList">
     54         <li><a href="#" target="right">供应信息</a></li>
     55         <li><a href="#" target="right">求购信息</a></li>
     56     </ul>
     57     <h5 class="h5Normal" onclick="showMenu(4)">招聘管理</h5>
     58     <ul id="menu4" class="menuList">
     59         <li><a href="#" target="right">所有招聘</a></li>
     60         <li><a href="#" target="right">添加招聘</a></li>
     61         <li><a href="#" target="right">查看应聘</a></li>
     62     </ul>
     63     <h5 class="h5Normal" onclick="showMenu(5)">会员管理</h5>
     64     <ul id="menu5" class="menuList">
     65         <li><a href="#" target="right">所有会员</a></li>
     66         <li><a href="#" target="right">添加会员</a></li>
     67     </ul>
     68     <h5 class="h5Normal" onclick="showMenu(6)">链接管理</h5>
     69     <ul id="menu6" class="menuList">
     70         <li><a href="#" target="right">所有链接</a></li>
     71         <li><a href="#" target="right">类别管理</a></li>
     72     </ul>
     73     <h5 class="h5Normal" onclick="showMenu(7)">用户管理</h5>
     74     <ul id="menu7" class="menuList">
     75         <li><a href="#" target="right">所有用户</a></li>
     76         <li><a href="#" target="right">角色管理</a></li>
     77         <li><a href="#" target="right">修改密码</a></li>
     78     </ul>
     79     <h5 class="h5Normal" onclick="showMenu(8)">系统管理</h5>
     80     <ul id="menu8" class="menuList">
     81         <li><a href="#" target="right">网站配置</a></li>
     82         <li><a href="#" target="right">日志管理</a></li>
     83         <li><a href="#" target="right">广告管理</a></li>
     84         <li><a href="#" target="right">数据备份</a></li>
     85     </ul>
     86     <h5 class="h5Normal" onclick="showMenu(9)">系统帮助</h5>
     87     <ul id="menu9" class="menuList">
     88         <li><a href="#" target="right">关于主题</a></li>
     89         <li><a href="#" target="right">使用帮助</a></li>
     90         <li><a href="#" target="right">使用反馈</a></li>
     91     </ul>
     92 </div>
     93 <script type="text/javascript">
     94 <!--
     95 var objLi=document.getElementsByTagName("ul");
     96 objLi[intOpenIndex].className="menuListOpen";
     97 //-->
     98 </script>
     99 </body>
    100 </html>
    101 

    CSS

    Code

    演示:http://www.51obj.cn/demo/treeview/left.html

    下载:http://www.51obj.cn/download/treeview.rar

     (很抱歉,昨天没有写完误点了发布...)
  • 相关阅读:
    一个图层隶属下一个图层
    windows安装Apache，注册服务出现“(OS 5)拒绝访问。 : AH00369: Failed to open the WinNT service manager..."错误
    windows下apache如何完整卸载?
    重设mysql数据库root用户密码
    mysql设置root密码
    mysql服务无法启动
    ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables opt
    亿丰之星 · 声动亚洲
    Euler's Sum of Powers Conjecture
    MATLAB Hacks from Richard Socher
  • 原文地址：https://www.cnblogs.com/walkingp/p/1502836.html
Copyright © 2011-2022 走看看