如何在Ajax可折叠面板展开时更改面板的颜色,该面板是在代码隐藏中创建的
本文关键字:颜色 创建 隐藏 代码 可折叠 Ajax | 更新日期: 2023-09-27 18:29:58
我已经在asp.net的代码隐藏中创建了Panels和Ajax可折叠面板。现在我必须在展开和折叠时更改面板(pnl1)的颜色。如果在运行时完成,如何实现?
运行时代码->
{
Label lbl=new Label();
lbl.ID="Label1";
// lbl.Text = "Hello";
lbl.Attributes.Add("runat","server");
lbl.Style.Add("ForeColor","Crimson");
lbl.Style.Add("Font-Italic","true");
lbl.Style.Add("Font-Names","Comic Sans MS");
lbl.Style.Add("Font-Size","XX-Large");
Label lbl1 = new Label();
lbl1.ID = "lbl1";
lbl1.Width = 800;
lbl1.Height = 30;
lbl1.Attributes.Add("runat", "server");
lbl1.Style.Add("ForeColor", "Crimson");
lbl1.Style.Add("background-color", "Orange");
lbl1.Style.Add("text-align", "right");
lbl1.Style.Add("Font-Size", "X-Large");
Label lbl2 = new Label();
lbl2.ID = "lbl2";
lbl2.Width = 800;
lbl2.Height = 400;
lbl2.Attributes.Add("runat", "server");
lbl2.Style.Add("ForeColor", "Crimson");
lbl2.Style.Add("background-color", "Blue");
lbl2.Style.Add("Font-Names", "Comic Sans MS");
lbl2.Style.Add("Font-Size", "XX-Large");
Panel pnl1=new Panel();
pnl1.ID="pnl1";
pnl1.Width=500;
pnl1.Attributes.Add("runat","server");
Panel pnl2 = new Panel();
pnl2.ID = "pnl2";
pnl2.Width = 500;
pnl2.Attributes.Add("runat", "server");
Image img1= new Image();
img1.ID="img1";
img1.Attributes.Add("runat","server");
img1.Height=150;
img1.BorderWidth=1;
img1.ImageUrl="";
img1.BackColor = System.Drawing.Color.DarkBlue;
Image img2 = new Image();
img2.ID = "img2";
img2.Attributes.Add("runat", "server");
img2.Height = 150;
img2.BorderWidth = 2;
img2.ImageUrl = "";
img2.BackColor = System.Drawing.Color.DarkGray;
pnl1.Controls.Add(lbl1);
pnl2.Controls.Add(lbl2);
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
cpe.ID = "ajax1";// +i.ToString();
//cpe.Attributes.Add("runat", "server");
cpe.TargetControlID = "pnl2";
cpe.ExpandedSize = 300;
cpe.CollapsedSize = 0;
cpe.ExpandControlID = "pnl1";
cpe.CollapseControlID = "pnl1";
cpe.AutoCollapse = false;
cpe.AutoExpand = false;
cpe.ScrollContents = true;
cpe.TextLabelID = "lbl1";
cpe.CollapsedText = "-";
cpe.ExpandedText = "+";
cpe.ExpandedImage = "";
cpe.CollapsedImage = "";
cpe.ExpandDirection = AjaxControlToolkit.CollapsiblePanelExpandDirection.Vertical;
MainDiv.Controls.Add(cpe);
MainDiv.Controls.Add(pnl1);
MainDiv.Controls.Add(pnl2);
MainDiv.Controls.Add(lbl);
}
我们可以使用javascript实现这一点。
在上面的代码(服务器端代码)中,在代码末尾添加以下行。
pnl1.Attributes.Add("onclick", "JavaScript:ChangeColor('MainContent_pnl1');");
在.aspx文件中,您可以编写以下内容来更改颜色。
function ChangeColor(MainContent_pnl1) {
document.getElementById(MainContent_pnl1).style.color = "blue";
}
这个代码并不完美,但会节省你的时间。。
谢谢,Prashant Trambake