Ajax Accordion(可折叠) 动态生成菜单

aspx页面代码

View Code

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxtTest.aspx.cs" Inherits="FileManage_AjaxtTest" %>
 2
 3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
 4     TagPrefix="cc1" %>
 5 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 6 <html>
 7 <head runat="server">
 8     <title>AjaxTest</title>
 9     <link href="../css/myStyle.css" rel="stylesheet" type="text/css" />
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
14     </asp:ToolkitScriptManager>
15     <div>
16         <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
17             ContentCssClass="accordionContent" AutoSize="none" FadeTransitions="true" TransitionDuration="250"
18             Width="200" Height="400" FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
19         </asp:Accordion>
20     </div>
21     </form>
22 </body>
23 </html>

cs文件中加载数据

View Code

 1  protected void Page_Load(object sender, EventArgs e)
 2     {
 3         DataTable dt = new DataTable();
 4         AccordionPane ap = null;
 5         Label lblMenu = null;
 6         HyperLink hlMenu = null;
 7         dt.Columns.Add("HeaderText");
 8         dt.Columns.Add("ContentText");
 9         dt.Columns.Add("ContentUrl");
10         dt.Rows.Add(new object[] { "系统定义", "人员定义","FileManage/AjaxtTest.aspx" });
11         dt.Rows.Add(new object[] { "项目管理", "许可证管理","内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
12         dt.Rows.Add(new object[] { "菜单三", "许可证管理", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
13         dt.Rows.Add(new object[] { "菜单四", "许可证管理", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
14         dt.Rows.Add(new object[] { "菜单五", "许可证管理", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
15
16         for (int i = 0; i < dt.Rows.Count; i++)
17         {
18             ap = new AccordionPane();
19             ap.ID ="ap" +i;
20             lblMenu = new Label();
21             hlMenu = new HyperLink();
22             lblMenu.Text = dt.Rows[i]["headerText"].ToString();
23             hlMenu.Text = dt.Rows[i]["ContentText"].ToString();
24             hlMenu.NavigateUrl = dt.Rows[i]["ContentUrl"].ToString();
25             ap.HeaderContainer.Controls.Add(lblMenu);
26             ap.ContentContainer.Controls.Add(hlMenu);
27             this.Accordion1.Panes.Add(ap);
28
29         }
30     }

样式

body {
}
.accordionHeader
{border:1px solid #2F4F4F;background-color:#99CCCC;font-family:宋体;font-size:16px;font-weight:bold;padding:5px;margin-top:5px;
}
.accordionContent
{border:1px dashed #2F4F4F;background-color:#CCFFCC;font-family:Arial;border-top:none;padding:5px;padding-top:10px;
}

运行效果图：

转载于:https://www.cnblogs.com/dqdxf/archive/2013/04/25/3042755.html

Ajax Accordion(可折叠) 动态生成菜单相关推荐

C# 使用数据库和MenuStrip动态生成菜单
C# 利用数据库和MenuStrip控件动态生成菜单,设计如图一,拖一个Menustrip控件. 设计实现如下: 1.数据库设计: 列名数据类型允许NULL值描述 MODULENAME nvar ...
Django 权限管理-后台根据用户权限动态生成菜单
Django权限管理实现目标: 1.管理用户,添加角色,用户关联角色 2.添加权限.角色关联权限 3.添加动作.权限关联动作 4.添加菜单.权限关联菜单实现动态生成用户权限菜单(可设置多级菜单嵌套 ...
记录：ajax获取数据动态生成select下拉选js部份
js代码 $(document).ready(function() {$("#role").setRoleList();//调用下面js中的方法 }); jQuery.fn.ext ...
基于vue+element实现多级菜单动态生成
使用element的NavMenu组件+vue的组件递归实现动态生成菜单. 首先创建对象记录菜单的标题.链接.子集等信息. menus: [{title: "首页",icon: & ...
element-plus 动态生成图标
VUE2老版本在原本的版本中可以通过如下方法动态生成icon图标(此处不展示 asideList 里面的数据) <template v-for="aside in asideList ...
AJAX Accordion：可折叠面板的集合
Accordion:可折叠面板的集合 Accordion控件中可以包含若干个面板,让用户通过点击不同面板的标题栏一次只展开并显示其中的一个内容,就像将好多个CollapsiblePanel堆到了一起. ...
动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱
在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能. 一.涉及技术该功能需要用到AJAX异步传输技术,这样能保证在点击"看不 ...
Extjs4.0 开发笔记-desktop开始菜单动态生成方法
desktop开始菜单动态生成方法: Desktop.html中,在<scripts>中的Ext.onReady之前添加如下: var mArr = [];//这里是保存显示模块的数组va ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...

Ajax Accordion(可折叠) 动态生成菜单

Ajax Accordion(可折叠) 动态生成菜单相关推荐

最新文章

热门文章