📄 default.aspx
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Accordion_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 id="Head1" runat="server">
<title>Accordion</title>
<style type='text/css'>
.bodyinner
{
width:250px;
text-align:left;
font-size:12px;
background-color: #F7F6F3
}
a
{
color:White;
text-decoration:none;
font-weight:500
}
.head
{
background: #00A4E1;
border: 2px outset;
border-color: #00BBFF #0077FF #0077FF #00BBFF;
cursor: hand;
font-size: 9pt
}
.content
{
background: #99CCFF;
border: 2px outset;
border-color: #B0D8FF #0077FF #0077FF #B0D8FF;
font-size: 9pt
}
.addPane
{
float:right;
text-align:left;
margin-top:45px;
}
.paneList
{
float:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager1" />
<div class="bodyinner">
<h3> QQ样式的菜单</h3>
<div class="paneList">
<asp:UpdatePanel ID="UpdatePane" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" Height="250px" Width="100px"
SelectedIndex="0" HeaderCssClass="head" ContentCssClass="content" FadeTransitions="true"
FramesPerSecond="40" TransitionDuration="250" AutoSize="Limit" SuppressHeaderPostbacks="true"
RequireOpenedPane="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="">我的好友</a></Header>
<Content>
<ul> <li>张三</li><li>李斯</li><li>王五</li></ul>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="">我的陌生人</a></Header>
<Content>
<ul> <li>张三1</li><li>李斯1</li><li>王五1</li></ul>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>
<a href="">我的黑名单</a></Header>
<Content>
<ul> <li>张三2</li><li>李斯2</li><li>王五2</li></ul>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="addPane">
Pane的标题 <br />
<asp:TextBox ID="TextBox1" runat="server" Width="107px"></asp:TextBox>
<br />
Pane的内容
<br /> <br />
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="114px"></asp:TextBox>
<br /> <br />
<asp:Button ID="Button1" runat="server" Text="添加一个Pane" OnClick="Button1_Click" /></div>
</div>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -