您的位置：首页 > 其它

手风琴菜单集锦

2015-10-12 15:47 330 查看
一、使用AjaxControlToolkit.dll组件生成手风琴菜单，这是一个可以设置样式，动态生成菜单的控件。

效果图如下：



关键代码如下：

<div id="demo">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="FetchMailItems" TypeName="MailBoxItems"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="FetchNoteItems" TypeName="MailBoxItems"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource3" runat="server" SelectMethod="FetchContactItems" TypeName="MailBoxItems"></asp:ObjectDataSource>
</div>
<div class="demo">
<ajaxToolkit:Accordion ID="accordion" runat="server" FadeTransitions="false" FramesPerSecond="100" TransitionDuration="250" CssClass="accordion" HeaderCssClass="header" ContentCssClass="content"
RequireOpenedPane="True" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="mail" runat="server">
<Header>
<div style="background-image:url(img/mail_large.gif)">
<span>Mail</span>
</div>
</Header>
<Content>
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="notes" runat="server">
<Header>
<div style="background-image:url(_assets/img/notes_large.gif)">
<span>Notes</span>
</div>
</Header>
<Content>
<asp:ListView ID="lvNoteItems" runat="server" DataSourceID="ObjectDataSource2">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="contacts" runat="server">
<Header>
<div style="background-image:url(_assets/img/contact_large.gif)">
<span>Contacts</span>
</div>
</Header>
<Content>
<asp:ListView ID="lvContactItems" runat="server" DataSourceID="ObjectDataSource3">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Test" runat="server">
<Header>
<div style="background-image:url(_assets/img/contact_large.gif)"><span>Test</span></div>
</Header>
<Content>
<asp:GridView runat="server" ID="gv1"></asp:GridView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>


案例下载地址1：http://download.csdn.net/detail/lovegonghui/9174189

二、使用JavaScript和CSS设计的手风琴菜单

效果图：



案例下载：http://download.csdn.net/detail/lovegonghui/9232533

三、封装JavaScript的手风琴服务器控件菜单

我们在做项目的时候经常会遇到要做后台管理界面，一般都是用Fram框架来实现，框架的左面是一个导航栏，关键就是这个导航栏，是用TreeView控件，还是自己写JS脚本，用TreeView吧影响美观，写JS吧，太多了，麻烦。为了不用TreeView又省去写JS的麻烦，所以就有了

把以前写好的JS脚本封装成Asp.Net 服务器控件的想法。

效果图如下：



关键代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.aspx.cs" Inherits="LeftMenu" %>

<%@ Register Assembly="NavMenu" Namespace="HeroBeastControls.NavMenu" TagPrefix="NavMenu" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<NavMenu:NavMenu ID="NavMenu1" runat="server" >
<NavMenu:NavMenuItem Text="系统设置" CssClass="sys">
<NavMenu:NavMenuSubItem Text="系统初始化" Title="系统初始化" NavigationURL="#" />
<NavMenu:NavMenuSubItem Text="系统参数" Title="系统参数" NavigationURL="#" />
</NavMenu:NavMenuItem>
<NavMenu:NavMenuItem Text="用户管理" CssClass="data" >
<NavMenu:NavMenuSubItem Text="用户管理" Title="用户管理" NavigationURL="#" />
<NavMenu:NavMenuSubItem Text="部门管理" Title="部门管理" NavigationURL="#" />
</NavMenu:NavMenuItem>
<NavMenu:NavMenuItem Text="51aspx相关" CssClass="data" >
<NavMenu:NavMenuSubItem Text="51aspx主站" Title="ASp.net源码下载" NavigationURL="http://www.51aspx.com" Target="MainContent" />
<NavMenu:NavMenuSubItem NavigationURL="http://bbs.51aspx.com" Target="MainContent" Text="源码论坛" Title="源码论坛" />
</NavMenu:NavMenuItem>
</NavMenu:NavMenu>
</div>
</form>
</body>
</html>


案例下载：http://download.csdn.net/detail/lovegonghui/9240969

四、Window风格的JavaScript+CSS手风琴菜单

效果图：



关键代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/TaskMenu.js"></script>
<script type="text/javascript">
TaskMenu.setStyle("Blue/blueStyle.css");
window.onload = function () {
TaskMenu.setHeadMenuSpecial(true);
var item1 = new TaskMenuItem("系统说明书", "image/1.png", "window.showModalDialog('about.aspx','','resizable:yes;scroll:yes;status:no;dialogWidth=320px;dialogHeight=230px;center=yes;help=no');");
var item2 = new TaskMenuItem("关于", "image/2.png", "window.alert('Window风格手风琴菜单')");
var taskMenu1 = new TaskMenu("系统管理");
taskMenu1.init();
taskMenu1.add(item1);
taskMenu1.add(item2);

var taskMenu2 = new TaskMenu("父菜单2");
taskMenu2.init();
var item3 = new TaskMenuItem("子菜单1", "image/3.png", "parent.window.frames[1].location.href='test1.aspx'");
var item4 = new TaskMenuItem("子菜单2", "image/4.png", "parent.window.frames[1].location.href='test2.aspx'");
var item5 = new TaskMenuItem("子菜单3", "image/3.png", "parent.window.frames[1].location.href='test3.aspx'");
var item6 = new TaskMenuItem("子菜单4", "image/3.png", "parent.window.frames[1].location.href='test4.aspx'");
taskMenu2.add(item3);
taskMenu2.add(item4);
taskMenu2.add(item5);
taskMenu2.add(item6);

var taskMenu3 = new TaskMenu("父菜单3");
taskMenu3.init();
var item7 = new TaskMenuItem("子菜单1", "image/1.png", "parent.window.frames[1].location.href='test5.aspx'");
var item8 = new TaskMenuItem("子菜单2", "image/2.png", "parent.window.frames[1].location.href='test6.aspx'");
var item9 = new TaskMenuItem("子菜单3", "image/3.png", "parent.window.frames[1].location.href='test7.aspx'");
taskMenu3.add(item7);
taskMenu3.add(item8);
taskMenu3.add(item9);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>


项目下载地址：http://download.csdn.net/detail/lovegonghui/9243711
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航