目的

    好久没有写点东西了,为了赚点点击率,把最近弄的一个用Accordion控件做的outLook菜单的东东,放在博客上,充充字数。

图片

废话少说,先上图片

上面就是用在工作流平台的主界面,基本可以实现效果。

代码

  前台

 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>
    
<link href="http://www.cnblogs.com/../Css/Share/BasicLayout.css" rel="stylesheet" 
        type
="text/css" />
    
        
<style type="text/css" >
         
    #navigation {

width: 250px;
 
}

#navigation ul {

list
-style: none;

margin: 
0;

padding: 
0;

}

#navigation li {

border
-left: 1px solid #f3f3f3;
border
-bottom: 1px solid #f3f3f3;
border
-right: 1px solid #f3f3f3;
}

#navigation li a:link, #navigation li a:visited {

font
-size: 12px;

display: block;

padding: 
0.4em 0 0.4em 0.5em;
 height :15px;
background
-color: #EFF7FB;

color: #465ab2;

text
-decoration: none;


}
#navigation li a:hover
{
    border:solid 1px #BCE5FF;
background
-color: #E4F5FD;
    
}
.content
{
    
    overflow :scroll ;
}
</style>
       
<script language="javascript" >
           function show(url) {
               window.parent.document.getElementById(
'WFRight').src = url;
              
           }
       
       
       
</script>
  
<%--  <link href="http://www.cnblogs.com/../Css/Single/Frame.css" rel="stylesheet" type="text/css" />--%>
    
</head>
<body style="background-color :#FCFCFC;">
    
<form id="form1" runat="server">
   
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
   
<table width="125px"  cellpadding="0" cellspacing ="0" style=" background-color :#EFF7FB;overflow:auto ; border-collapse:collapse ;border : solid 1px #fff; height:100% ;" >
    
<tr>
    
<td style=" vertical-align :top ; " >
     
<cc1:Accordion ID="Accordion1" runat="server"   ContentCssClass="content"  AutoSize="Fill" Height="100%"  >
    
<HeaderTemplate>
      
<div style="  height :25px;   cursor :hand; width :250px; border :solid 1px #f3f3f3;
      background-image :url(../../../Images/bar_back_unfocus.gif) ; background-repeat :repeat-x ; font-size :8pt; font-weight :bold; text-indent :24px;    padding-top :7px;" ><%#Eval("Key") %></div>
       
    
</HeaderTemplate>
    
<ContentTemplate >
    
      
<div id="navigation" >
               
<%# Eval("Value"%> 
           
</div> 
    
</ContentTemplate>

    
</cc1:Accordion>
    
</td>
    
</tr>
    
    
</table>
    
</form>
    
<p>
        
&nbsp;</p>
</body>
</html>

以上是前台代码,我没有按照标准的网页设计规则搞,所以大家别拍砖。

后台

 

我是用css做出来的。

评价

   1.这个控件挺简单,用起来也方便。

   2.它加载菜单是以前全部加入,效率应该不是太大问题。

   3.可以做出其它一些风格,只要对其中Autosize进行设置即可,具体可以参考一些官方示例。

 

 

posted on 2009-10-21 09:01  复用软件  阅读(692)  评论(0编辑  收藏  举报