JavaScript’ten Bir Paneli Daraltma ve Genişletme (C#)Collapsing and Expanding a Panel from JavaScript (C#)

Hristia WENZ tarafındanby Christian Wenz

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

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.The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. Bu iki eylem özel JavaScript kodundan de tetiklenebilir.These two actions can also be triggered from custom JavaScript code.

Genel bakışOverview

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.The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. Bu iki eylem özel JavaScript kodundan de tetiklenebilir.These two actions can also be triggered from custom JavaScript code.

AdımlarSteps

İlk olarak, yeni bir ASP.NET sayfası oluşturun ve ScriptManager bir <form> öğesine ekleyin.First of all, create a new ASP.NET page and include the ScriptManager within the one <form> element. Bu, Denetim araç seti için gerekli olan ASP.NET AJAX kitaplığını yükler:This loads the ASP.NET AJAX library which is required by the Control Toolkit:

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

Ardından, daraltma/genişletme efektinin görünebilmesi için bazı metinlere sahip bir panel oluşturun:Then, create a panel with some text so that the collapse/expand effect can be seen:

<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):As you can see, the panel references a CSS class which is shown here (and basically defines a background color and the panel's width):

<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:The CollapsiblePanelExtender control requires the TargetControlID attribute so that the toolkit knows which panel to collapse or expand upon request:

<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.Unfortunately, the extender currently does not expose a specific API for collapsing or expanding the panel, but some undocumented methods will do. İ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:First of all, add three HTML buttons to the page which will then trigger the client-side JavaScript to collapse or expand the panel's contents:

<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.In the client-side JavaScript code (started with <script type="text/javascript">), the $find() method needs to be used to access the CollapsiblePanelExtender. $find("cpe"), buna bir başvuru döndürür.$find("cpe") will return a reference to it. Bu noktada, belirli yöntemler el ile görevi çözebilir.From there on, specific methods will solve the task at hand.

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:The method for opening (expanding) the panel is called _doOpen(); the following code implements the doOpen() function called when the first button is clicked:

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

Paneli kapatmak veya daraltma için _doClose() yönteminin yürütülmesi gerekir.For closing, or collapsing the panel, the _doClose() method needs to be executed. Bu nedenle, Kullanıcı ikinci düğmeye tıkladığında aşağıdaki JavaScript kodu çağrılır:So when the user clicks on the second button, the following JavaScript code is called:

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

Üçüncü düğme, panelin durumunu daraltıldı ve bunun tersini yapar.The third button toggles the state of the panel: from collapsed to expanded, and vice versa. CollapsiblePanelExtender, tam olarak bunu yapan ve panelin durumunu tersine getiren toggle() yöntemini kullanıma sunar.The CollapsiblePanelExtender exposes the toggle() method which does exactly that: reverses the state of the panel. 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.However there is also another approach (which is internally used by the toggle() method): The get_Collapsed() method of the CollapsiblePanelExtender() tells us whether the panel is collapsed or not. Bu işlevin dönüş değerine bağlı olarak, panel daha sonra genişletilir (_doOpen() yöntemi) veya daraltılmış (_doClose()) yöntemi:Depending on the return value of this function, the panel is then either expanded (_doOpen() method) or collapsed (_doClose()) method:

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ğruThe third button changes the state of the panel: from collapsed to expanded and back

Üçü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.The third button changes the state of the panel: from collapsed to expanded and back (Click to view full-size image)