我正在开发一个 ASP.NET 网页,因为我想显示数据,因为它在附加的链接中。所以请通过它。所以我也希望在我的"我们页面"中使用类似的功能。
正如我们在这里看到的,我有单独的部分用于商店详细信息,POS详细信息,注册银行详细信息等。如果我点击 +/- 符号,我应该能够最大化和最小化该特定部分。
其实我对 Asp.net 很陌生,我自己学到的东西到目前为止,没有人在这里指导我。所以我不知道该怎么做?要做什么以及我需要从 Visual Studio 中的工具箱中选择哪些项。我对PAnel Control 有想法,但是使用面板控制,我无法在这里获得最大化和最小化功能。请帮帮我.
谢谢
!(http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png)
为此,您可以使用 AJAX Toolkit 控件(ToolkitScriptManager 和 CollapsiblePanelExtender)。为此,请执行以下步骤:
(1)从 http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/或
http://www.asp.net/ajaxlibrary/act.ashx 学习
和下载AJAX工具包或
http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012(2)将工具包添加到项目中,并使用工具包
的任何一个控件创建一个示例(3)根据需要尝试以下示例
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlCPTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
POS DETAILS
</td>
<td align="right" valign="top">
<asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
<asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
TID :
</td>
<td>
abc...
</td>
<td>
Name :
</td>
<td>
xyz ...
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
TextLabelID="lblTop">
</cc1:CollapsiblePanelExtender>
在网络配置中
<system.web>
<pages>
<controls>
<add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
我希望这可能对您有所帮助。我建议先学习 AJAX 工具包,然后添加到工具箱中,然后尝试上面的代码。
另一种方法是使用如下所示的javascript:
JavaScript
<script type="text/javascript">
function funHide() {
document.getElementById('imgShow').style.display = 'block';
document.getElementById('trPOSDETAILS').style.display = 'none';
document.getElementById('imgHide').style.display = 'none';
}
function funShow() {
document.getElementById('imgShow').style.display = 'none';
document.getElementById('trPOSDETAILS').style.display = 'block';
document.getElementById('imgHide').style.display = 'block';
}
</script>
ASPX 或 HTML
<table width="500px">
<tr>
<td colspan='3'>
POS DETAILS
</td>
<td align="right">
<img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
<img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
</td>
</tr>
<tr id="trPOSDETAILS">
<td>TID :</td>
<td>abc...</td>
<td>Name :</td>
<td>xyz ...</td>
</tr>
</table>
如果这解决了您的问题,请将此答案标记为有用。