📄 horizontalcollapsiblepanel.aspx
字号:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ 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 runat="server">
<title>Collapsible Panel Extender in Horizontal mode test</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptMgr1">
</ajaxToolkit:ToolkitScriptManager>
This is a collapsible panel example that uses fixed ExpandedSide(400px) and Horizontal
expand direction with dashed border set.
<br />
<em>Note: There is a style issue with FF(not control related) where the bottom border
does not show up.</em>
<br />
Click on the black bar to collapse and expand.<br />
<br />
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader"
BackColor="Black" Width="30px" style="position:absolute;left:0px;height:400px">
</asp:Panel>
<asp:Panel style="position:absolute;left:30px;border: 1px dashed #2F4F4F;background-color:chocolate;height:auto"
ID="Panel1" runat="server">
<asp:Panel ID="Panel3" runat="Server">
<p>
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
</p>
<asp:Panel runat="server" ID="verticalPanelHeader" BackColor="Beige" Height="20" style="width:auto">
FooooooooFooooooooFooooooooFooooooooFooooooooFooooooooFoooooooo
</asp:Panel>
<asp:Panel runat="server" ID="verticalPanel" BackColor="BurlyWood" Height="150">
<p>
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
</p>
<p>
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
</p>
<p>
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
Betty bought some butter but the butter was bitter so she bought more butter to make the bitter butter better.
</p>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="verticalCP" TargetControlID="verticalPanel"
CollapseControlID="verticalPanelHeader" ExpandControlID="verticalPanelHeader"
Collapsed="true" ExpandDirection="Vertical" ScrollContents="true" ExpandedSize="200">
</ajaxToolkit:CollapsiblePanelExtender>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="collapsiblePanel1" ExpandDirection="Horizontal"
TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2"
Collapsed="False" ExpandedSize="400" />
</asp:Panel>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -