.net中服務器端與客戶端代碼交替使DIV展開或收縮
在實際應用中,點擊某圖片時,客戶端代碼與服務器端事件都能使一個DIV展開或收縮,實現如下。
先創建一個圖片,如下:
<IMG alt="To down" id="ImageButton1" class="CursorIsHand" runat="server" src="../Images/Toolbar/Arrow_down.gif">
寫Javascript函數,如下:
function PlusMinusDiv()
{
var objDiv = document.getElementById("divGrid");
var objImg = document.getElementById("ImageButton1");
//alert(objDiv.style.height);
if(objDiv.style.height == '0px')
{
objDiv.style.height = 150;
objImg.src = "../Images/Toolbar/Arrow_up.gif"
objImg.alt = "To top";
}
else
{
objDiv.style.height = 0;
objImg.src = "../Images/Toolbar/Arrow_down.gif"
objImg.alt = "To down";
}
}
寫(!this.IsPostBack) 中 寫this.ImageButton1.Attributes.Add("onclick","PlusMinusDiv();");
寫C#代碼,以在點擊某按鈕後展開DIV
private void DivGridVisible()
{
ImageButton1.Src = "../Images/Toolbar/Arrow_up.gif";
ImageButton1.Alt = "To Top";
this.divGrid.Style.Add("height","150");
divGrid.Visible = true;
}
先創建一個圖片,如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
寫C#代碼,以在點擊某按鈕後展開DIV
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)