水平和垂直手风琴 [英] Horizontal and Vertical Accordion
本文介绍了水平和垂直手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨谁能帮助我创造了asp.net水平和垂直手风琴
我必须使用Ajax工具包手风琴，但不能改变其方向。
-------
-------
-------使用Ajax工具包创建
-------
|||||
|||||寻找这个
|||||
|||||
任何帮助，请..
解决方案
下面是ASP.NET中的工作示例（C＃） - （USER CONTROL）＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;链接HREF =/用户控件/折叠/ CSS / Accordion.css相对=样式类型=文/ CSS媒体=所有/＆GT;
＆LT; /头＆GT;＆LT; ASP：表ID =AccordionTable=服务器的cellpadding =0CELLSPACING =0WIDTH =100％＆GT;
＆LT; ASP：宽度的TableRow =100％HEIGHT =200像素＆GT;
＆LT;％ - 滚动1 - ％GT;
＆LT; ASP：TableCell的的CssClass =边框＆GT;
＆LT; ASP：面板ID =Slide1Panel=服务器风格=显示：块＆GT;
＆LT; P＆GT; 1小组的内容和LT; / P＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / ASP：TableCell的＆GT;
＆LT; ASP：TableCell的的CssClass =边框WIDTH =20像素＆GT;
＆LT; ASP：LinkButton的ID =LinkButton_1=服务器文本=标题1的CssClass =VerticalText的OnClick =Slide_Click/＆GT;
＆LT; / ASP：TableCell的＆GT;
＆LT;％ - 滑块2 - ％GT;
＆LT; ASP：TableCell的的CssClass =边框＆GT;
＆LT; ASP：面板ID =Slide2Panel=服务器风格=显示：无＆GT;
＆LT; P＆GT;第2小组的内容和LT; / P＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / ASP：TableCell的＆GT;
＆LT; ASP：TableCell的的CssClass =边框WIDTH =20像素＆GT;
＆LT; ASP：LinkButton的ID =LinkButton_2=服务器文本=标题2的CssClass =VerticalText的OnClick =Slide_Click/＆GT;
＆LT; / ASP：TableCell的＆GT;
＆LT;％ - 推子3 - ％GT;
＆LT; ASP：TableCell的的CssClass =边框＆GT;
＆LT; ASP：面板ID =Slide3Panel=服务器风格=显示：无＆GT;
＆LT; P＆GT;面板3含量和LT; / P＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / ASP：TableCell的＆GT;
＆LT; ASP：TableCell的的CssClass =边框WIDTH =20像素＆GT;
＆LT; ASP：LinkButton的ID =LinkButton_3=服务器文本=标题3的CssClass =VerticalText的OnClick =Slide_Click/＆GT;
＆LT; / ASP：TableCell的＆GT;
＆LT; / ASP：＆的TableRow GT;
＆LT; / ASP：表＆gt; - （code后面）保护无效的Page_Load（对象发件人，EventArgs的发送）
{
} 保护无效Slide_Click（对象发件人，EventArgs的发送）
{
ResetSlides（）; LinkButton的LinkButton的=（LinkButton的）寄件人; 的char [] =分离新的char [] {'_'};
字符串[] =触发linkButton.ID.Split（分隔符）; 的foreach（的TableRow tblRow在AccordionTable.Rows）
{
INT I = 1;
的foreach（TableCell的tblCell在tblRow.Cells）
{
如果（我％2 == 0）
{
//别碰我们的LinkButtons（！）
}
其他
{
面板slidePanel =（面板）的FindControl（幻灯片+触发[1] +小组）;
如果（slidePanel！= NULL）
{
slidePanel.Style.Add（显示，块）;
tblCell.Style.Remove（显示）;
tblCell.Style.Add（显示，块）;
}
}
我++;
}
}
} 保护无效ResetSlides（）
{
的foreach（的TableRow tblRow在AccordionTable.Rows）
{
INT I = 1;
的foreach（TableCell的tblCell在tblRow.Cells）
{
面板slidePanel =（面板）的FindControl（幻灯片+ I +小组）;
如果（slidePanel！= NULL）
{
tblCell.Style.Remove（显示）;
slidePanel.Style.Add（显示，无）;
}
如果（我％2 == 0）
{
//不要调整LinkButtons（！）
}
其他
{
tblCell.Style.Remove（显示）;
tblCell.Style.Add（显示，无）;
}
我++;
}
}
} - （样式表（BASIC））.VerticalText
{
写作模式：TB-LR;
过滤：flipV flipH;
}。边境
{
边框：1px的固体黑色;
}
Hi can anyone help me creating horizontal and vertical accordion in asp.net
I have use Ajax Toolkit Accordion but can not change its orientation
-------
-------
------- created using ajax toolkit
-------
|||||
||||| looking for this
|||||
|||||
any help please..
解决方案
Here is an working example for ASP.NET (C#)
-- (USER CONTROL)
<head>
<title></title>
<link href="/UserControls/Accordion/Css/Accordion.css" rel="Stylesheet" type="text/css" media="all" />
</head>
<asp:Table ID="AccordionTable" runat="server" CellPadding="0" CellSpacing="0" Width="100%">
<asp:TableRow Width="100%" Height="200px">
<%-- SLIDER 1 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide1Panel" runat="server" Style="display:block">
<p>Panel 1 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_1" runat="server" Text="Header 1" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 2 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide2Panel" runat="server" Style="display:none">
<p>Panel 2 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_2" runat="server" Text="Header 2" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 3 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide3Panel" runat="server" Style="display:none">
<p>Panel 3 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_3" runat="server" Text="Header 3" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
-- (CODE BEHIND)
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Slide_Click(object sender, EventArgs e)
{
ResetSlides();
LinkButton linkButton = (LinkButton)sender;
char[] separator = new char[] { '_' };
string[] trigger = linkButton.ID.Split(separator);
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
if (i % 2 == 0)
{
// Dont touch our LinkButtons (!)
}
else
{
Panel slidePanel = (Panel)FindControl("Slide" + trigger[1] + "Panel");
if (slidePanel != null)
{
slidePanel.Style.Add("display", "block");
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "block");
}
}
i++;
}
}
}
protected void ResetSlides()
{
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
Panel slidePanel = (Panel)FindControl("Slide" + i + "Panel");
if (slidePanel != null)
{
tblCell.Style.Remove("display");
slidePanel.Style.Add("display", "none");
}
if (i % 2 == 0)
{
// Dont resize LinkButtons (!)
}
else
{
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "none");
}
i++;
}
}
}
-- (STYLESHEET (BASIC))
.VerticalText
{
writing-mode: tb-lr;
filter: flipV flipH;
}
.Border
{
border: solid 1px Black;
}
这篇关于水平和垂直手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
