JavaScript’ten Bir Paneli Daraltma ve Genişletme (C#)

Hristia WENZ tarafından

Kodu indirin veya PDF 'yi indirin

ASP.NET AJAX denetim araç setinde CollapsiblePanel denetimi bir paneli genişletir ve içeriğini daraltma ve yeniden genişletme özelliğini sağlar. Bu iki eylem özel JavaScript kodundan de tetiklenebilir.

Genel bakış

ASP.NET AJAX denetim araç setinde CollapsiblePanel denetimi bir paneli genişletir ve içeriğini daraltma ve yeniden genişletme özelliğini sağlar. Bu iki eylem özel JavaScript kodundan de tetiklenebilir.

Adımlar

İlk olarak, yeni bir ASP.NET sayfası oluşturun ve ScriptManager bir <form> öğesine ekleyin. Bu, Denetim araç seti için gerekli olan ASP.NET AJAX kitaplığını yükler:

<asp:ScriptManager ID="asm" runat="server" />

Ardından, daraltma/genişletme efektinin görünebilmesi için bazı metinlere sahip bir panel oluşturun:

<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Gördüğünüz gibi, panel burada gösterilen bir CSS sınıfına başvurur (ve temelde bir arka plan rengi ve panelin genişliğini tanımlar):

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

CollapsiblePanelExtender denetimi TargetControlID özniteliğini gerektirir, böylece araç seti, istek üzerine hangi bölmenin daraltılacak veya genişletileceğini bilir:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Ne yazık ki genişletici, paneli daraltma veya genişletme için belirli bir API kullanıma sunmuyor, ancak belgelenmemiş bazı yöntemler yapılacak. İlk olarak, sayfaya üç HTML düğmesi ekleyin ve ardından panelin içeriğini daraltmak veya genişletmek için istemci tarafı JavaScript 'i tetikler:

<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

İstemci tarafı JavaScript kodunda (<script type="text/javascript">ile başlatılır), CollapsiblePanelExtendererişmek için $find() yönteminin kullanılması gerekir. $find("cpe"), buna bir başvuru döndürür. Bu noktada, belirli yöntemler el ile görevi çözebilir.

Paneli açma (genişletme) yöntemi _doOpen()olarak adlandırılır; Aşağıdaki kod, ilk düğme tıklandığında çağrılan doOpen() işlevini uygular:

function doOpen() 
{
 $find("cpe")._doOpen();
}

Paneli kapatmak veya daraltma için _doClose() yönteminin yürütülmesi gerekir. Bu nedenle, Kullanıcı ikinci düğmeye tıkladığında aşağıdaki JavaScript kodu çağrılır:

function doClose() 
{
 $find("cpe")._doClose();
}

Üçüncü düğme, panelin durumunu daraltıldı ve bunun tersini yapar. CollapsiblePanelExtender, tam olarak bunu yapan ve panelin durumunu tersine getiren toggle() yöntemini kullanıma sunar. Ancak, toggle() yöntemi tarafından dahili olarak kullanılan başka bir yaklaşım da vardır: CollapsiblePanelExtender() get_Collapsed() yöntemi, bölmenin daraltılıp daraltılmadığını söyler. Bu işlevin dönüş değerine bağlı olarak, panel daha sonra genişletilir (_doOpen() yöntemi) veya daraltılmış (_doClose()) yöntemi:

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

üçüncü düğme bölmenin durumunu değiştirir: daraltılan ve geriye doğru

Üçüncü düğme, panelin durumunu, daraltılan ve geri (tam boyutlu görüntüyü görüntülemek Için tıklatın) olarak değiştirir.