آموزش کنترل accordion

این کنترل یکی از کنترل های ASP.NET AJAX Control Toolkit  می باشد. 

این کنترل به شما این اجازه را می دهد تا پنل های متعددی را در فرم های خود ایجاد کنید و همه آنها را بطور همزمان نمایش دهید. این کنترل در داخل خود از کنترل دیگری به نام AccordionPanel استفاده می کند که دارای قالب و الگویی برای نمایش عنوان ومحتوای خود می باشد. 

خصوصیت های Accordion : 

SelectIndex	از این خاصیت برای انتخاب پنل پیشفرض از مجموعه پنا های موجود در این کنترل می باشد که این اندیس این پنل ها از صفر شروع می شوند.   از این خاصیت برای اطلاع از پنل انتخاب شده نیز می توان استفاده کرد.
HeaderCssClass	از این خاصیت برای انتخاب کلاس نمایشی CSS برای تنظیم بخش Heder پنل ها استفاده کرد.
HeaderSelectCssClass	از این خاصیت برای انتخاب کلاس نمایشی Header پنل انتخاب شده استفاده می شود.
ContentCssClass	از این خاصیت برای انتخاب کلاس نمایشی محتویات پنل ها استفاده می شود .
FadeTransitions	این خاصیت با دو مقدار True و False مقدار دهی می شود.  True : باعث می شود که پنل با جلوه های ویژه محو یا نمایش داده می شود.  False : باعث می شود که پنل با جلوه های استاندارد محو یا نمایش داده شود.
TransitionDuration	مدت زمان نمایش جلوه ویژه را مشخص می کند مقدار این خاصیت بر حسب میلی ثانیه می باشد.
FramesPerSecond	تعداد فرم های قابل نمایش در ثانیه را مشخص می کند مقدار پیشفرض 15 می باشد.
AutoSize	برای محدود کردن اندازه نمایشی استفاده می شود و سه مقرار می گیرد:  None: با تنظیم بر روی این گزینه اندازه پنل ها محدودیتی ندارند و به اندازه تمام کنترل های درون پنل باز می شود.  Limit: با انتخاب این گزینه اندازه پنل به اندازه مقدار تنظیم شده در خصوصیت Height می شود و اگر محتویات آن زیاد بود یک نوار پیمایش در کنار آن ظاهر خواهد شد.  Fill: با انتخاب این گزینه اندازه پنل به اندازه مقدار تنظیم شده در خصوصیت Height می شود
RequireOpenedPanel	این خاصیت با مقدار True و False مقدار دهی می شود:  True: همواره فقط یک پنل نمایش داده می شود.  False: محدودیتی برای باز کردن پنل ها وجود ندارد.
SuppressHeaderPostbacks	این خاصیت با مقدار True و False مقدار دهی می شود:   True: در هنگام انتخاب پنل  PostBack صورت میگیرد.  False: در هنگام انتخاب پنل بدون PostBack پنل باز می شود.
Panes	مجموعه کنترل های AccordionPane را شامل می شود.

 

پروژه 1:  یک وبسایت جدید ایجاد کنید و درون اون یک وب فرم اضافه کنید.  

یک کنترل ScriptManager به فرم خود اضافه کنید.یک کنترل Accordion به فرم  اضافه کنید.  

سپس قبل از تگ بسته یک تگ Panes ایجاد کنید و در داخل این تگ چهار کنترل AccordionPanel ایجاد کنید و داخل آن از تگ های header و content برای عنوان و متن داخل آن استفاده کنید. 

 <!--

<cc1:Accordion

ID="Accordion1"

runat="server"

HeaderCssClass="header"

HeaderSelectedCssClass="headerselected"

ContentCssClass="content"

FramesPerSecond="30"

RequireOpenedPane="False"

Width="250">

<Panes >

<cc1:AccordionPane ID="AccordionPane1" runat="server">

<Header >

panel1

</Header>

<Content >

this is a panel1

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2" runat="server">

<Header >

panel2

</Header>

<Content >

this is a panel2

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane3" runat="server">

<Header >

panel3

</Header>

<Content >

this is a panel3

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane4" runat="server">

<Header >

panel4

</Header>

<Content >

this is a panel4

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

-->

بعد از نوشتن کدهای بالا به پروژه خود یک stylesheet اضافه کنید و کد زیر را به قسمت head صفحه اضافه کنید: 

<

یا فایل stylesheet را درگ کنید و در Head  رها کنید تا کد بالا بصورت اتوماتیک ایجاد شود.  

بعد از انجام مراحل فوق فایل stylesheet را باز کنید و کدهای زیر را درون آن بنویسید: 

.header

{

}

border:1px solid #2f4f4f;color:White;background-color:#2e4d7b;

.headerselected

{

}

border: 1px solid #2f4f4f;color: White;background-color: #588FC7;padding: 5px;margin-top: 5px;

.content

{

}

background-color:#d3deef;border:1px dashed #2f4f4f;border-top:none;padding:5px;padding-top:10px;

حالا پروژه را اجرا کنید و نتیجه را مشاهده کنید.

دریافت فایل پروژه  رمز عبور برای دریافت asp-code.blogsky.com