معرفی کنترل ها و تکنیک های موجود در ASP.NET Ajax - قسمت یازدهم
  در این مقاله به بررسی کنترل CollapsiblePanelExtender که از کنترل های AjaxControlToolkit می باشد، می پردازم.
   Ajax
   ۲۷۳۸۴
   دانلود
   مرتضی صحراگرد
   ۱۳۸۶/۱۲/۱۸
ارسال لینک صفحه برای دوستان ارسال لینک صفحه برای دوستان  اضافه کردن به علاقه مندیها اضافه کردن به علاقه مندیها   نسخه قابل چاپ نسخه قابل چاپ

 

مقدمه :

يکي از مهمترين اهداف توسعه گران وب، ارائه اطلاعات به بهترين نحو ممکن به بازديد کننده مي باشد و در نتيجه، کاربر پسند بودن نحوه ارائه اطلاعات در يک وب سايت همواره از اهميت ويژه اي برخوردار بوده است.

هر چقدر ميزان اطلاعاتي که قرار است در يک صفحه وب به کاربر ارائه شود بيشتر باشد، از سهولت دسترسي و استفاده از آن توسط کاربر کاسته مي شود.

تجربه ثابت کرده است که بازديد کنندگاني که وارد سايت هايي که داراي ظاهر بسيار شلوغ و داراي اطلاعات فروان (و حتي بسيار با ارزش) مي شوند دچار سردرگمي شده و استفاده لازم و کافي را نخواهند برد.

روش هاي مختلفي جهت مديريت نحوه نمايش اطلاعات در صفحات وب وجود دارد که يکي از جالبترين آنها استفاده از CollapsiblePanel ها مي باشد.

CollapsiblePanel ها مي توانند اطلاعات را در دو حالت باز (Expanded) و بسته (Collapsed) نمايش دهند.

شکل زير يک CollapsiblePanel را در دو حالت باز و بسته نمايش مي دهد.

يک CollapsiblePanel از دو عدد Panel تشکيل مي شود که يکي به عنوان HeaderPanel عمل نموده و هم در حالت باز و هم در حالت بسته نمايش داده مي شود (در شکل بالا اين Panel را با رنگ پس زمينه آبي مشاهده مي کنيد) و Panel ديگر به عنوان ContentPanel مي باشد و فقط هنگامي نمايش داده مي شود که CollapsiblePanel در حالت باز مي باشد (در شکل بالا اين Panel را با رنگ پس زمينه خاکستري مشاهده مي کنيد)

کاربر در صورت تمايل مي تواند CollapsiblePanel را باز نموده و از اطلاعات آن استفاده نمايد و در غير صورت آن را مي بندد و از شلوغي صفحه کاسته مي شود. لازم به ذکر مي باشد که هنگام باز يا بسته شدن CollapsiblePanel عمل Postback اتفاق نمي افتد.

عملکرد CollapsiblePanel فوق از اينجا قابل نمايش مي باشد.

شروع :

به قطعه کد زير توجه فرماييد.


<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="ContentPanel"
      ExpandControlID="HeaderPanel" CollapseControlID="HeaderPanel" Collapsed="True"
      TextLabelID="Label1" ExpandedText="Expanded" CollapsedText="Collapsed"
     ImageControlID="Image1" ExpandedImage="~/images/collapse_blue.jpg"
      CollapsedImage="~/images/expand_blue.jpg">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="HeaderPanel" runat="server" CssClass="collapsePanelHeader" Width="245px" Height="20">
      <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" />
      &nbsp;&nbsp;What is 30sharp.com?
     <asp:Label ID="Label1" Text="Label1" runat="server" ForeColor="red" Font-Size="9pt"></asp:Label>
</asp:Panel>
<asp:Panel ID="ContentPanel" Height="0" runat="server" CssClass="collapsePanel" Width="100%"
  BackColor="#E4E4E4">
      <br />
      <p>
      <strong><span style="color: #3300ff">30sharp.com</span> </strong>
      is Persian Developers Resource for Software Developers & Designers &amp; Programmers!
     </p>
</asp:Panel>

ضمنا در قطعه کد بالا از StyleSheet زير استفاده شده است.


.collapsePanel {
     overflow:hidden;
}
 .collapsePanelHeader{
     color:White ;
     background-color: #55AAFF;
     font-weight:bold;
     cursor: pointer;
     padding:5px;
}

همانطور که ملاحظه مي نماييد در HeaderPanel،  ما از يک کنترل Image و يک کنترل Label استفاده نموده ايم و يک جمله ثابت (What is 30sharp.com) نيز نوشته ايم که به صورت ثابت در هنگام باز و بسته شدن CollapsiblePanel نمايش داده مي شود.

هنگام باز و بسته شدن CollapsiblePanel ما مي توانيم متن Label را تغيير دهيم و همچنين عکسي را که کنترل Image نمايش مي دهد را نيز مي توان تغيير داد.

اگر با دقت به شکل بالاي صفحه نگاه کنيد متوجه مي شويد که هنگامي که CollapsiblePanel در حالت بسته مي باشد، کنترل Label داراي عبارت Collapsed و کنترل Image داراي عکسي به صورت فلش رو به پايين مي باشد. و هنگامي که CollapsiblePanel در حالت باز مي باشد، کنترل Label داراي عبارت Expanded و کنترل Image داراي عکسي به صورت فلش رو به بالا مي باشد.

کنترل ContentPanel نيز حاوي کنترل ها و اطلاعاتي مي باشد که هنگام باز بودن CollapsiblePanel قابل نمايش است.

اکنون به معرفي برخي صفات مهم کنترل CollapsiblePanelExtender مي پردازم.

  • TargetControlID : اين صفت نام Panel ي را نگهداري مي کند که هنگام باز بودن CollapsiblePanel نمايش داده مي شود و هنگام بسته بودن آن پنهان مي شود. در اين مثال ما از ContentPanel استفاده نموده ايم.
  • CollapsedSize : اين صفت مي تواند ميزان اندازه ارتفاع CollapsiblePanel را هنگامي که در حالت بسته مي باشد، مشخص نمايد.
  • ExpandedSize : اين صفت مي تواند ميزان اندازه ارتفاع CollapsiblePanel را هنگامي که در حالت باز مي باشد، مشخص نمايد.
  • Collapsed : در صورتي که مقدار اين صفت true باشد، هنگام که صفحه براي اولين بار اجرا مي شود، کنترل CollapsiblePanel به صورت بسته مي باشد و برعکس.
  • AutoCollapse : اگر مقدار اين صفت true باشد.هنگامي که CollapsiblePanel در حال باز مي باشد، وقتي ماوس را از محوطه ContentPanel خارج مي شود، CollapsiblePanel به صورت خودکار بسته مي باشد و در غير اينصورت در حالت باز باقي مي ماند.
  • AutoExpand : عمل اين کنترل برعکس AutoCollapse مي باشد و اگر CollapsiblePanel در حال بسته شدن باشد، اگر ماوس رو روي ContentPanel ببريم، CollapsiblePanel باز مي شود.
  • ScrollContents : اگر مقدار اين صفت true باشد، اگر سايز ContentPanel بزرگتر از سايز CollapsiblePanel باشد يک Scroll نمايش داده مي شود.
  • ExpandControlID/CollapseControlID : اين دو صفت نام کنترل هايي را نگهداري مي کنند که با کليک شدن آن ها، عمل باز و بسته شدن CollapsiblePanel اتفاق مي افتد. در اين مثال ما مقدار HeaderPanel را به هر دوي  آن ها نسبت داده ايم. در نتيجه با کليک شدن HeaderPanel عمل باز و بسته شدن اتفاق مي افتد.
  • TextLabelID : اين صفت ID کنترل Label ي را که قصد داريم هنگام باز و بسته شدن CollapsiblePanel مقدار آن تغيير کند را نگهداري مي کند. در اينجا ما Label1 را به آن نسبت داده ايم.
  • CollapsedText : متني را که قصد داريم کنترل Label1 هنگام بسته بودن نمايش دهد را به اين صفت نسبت مي دهيم. در مثال بالا ما Collapsed را به آن نسبت داده ايم.
  • ExpandedText : متني را که قصد داريم کنترل Label1 هنگام باز بودن نمايش دهد را به اين صفت نسبت مي دهيم. در مثال بالا ما Expanded را به آن نسبت داده ايم.
  • ImageControlID  :  اين صفت ID کنترل Image ي را که قصد داريم هنگام باز و بسته شدن CollapsiblePanel، عکس آن تغيير کند را نگهداري مي کند. در اينجا ما Image1 را به آن نسبت داده ايم.
  • CollapsedImage : اين صفت آدرس عکسي را که قصد داريم کنترل Image1 در هنگام بسته بودن، نمايش دهد را نگهداري مي کند. در مثال بالا ما آدرس عکسي که به شکل فلش رو به پايين است را نسبت داده ايم.
  • ExpandedImage : اين صفت آدرس عکسي را که قصد داريم کنترل Image1 در هنگام باز بودن، نمايش دهد را نگهداري مي کند. در مثال بالا ما آدرس عکسي که به شکل فلش رو به بالا است را نسبت داده ايم.
  • ExpandDirection : اين صفت جهت باز شدن کنترل CollapsiblePanel را مشخص مي کند. مقدار پيشفرض Vertical يعني عمودي مي باشد که مي توان به آن مقدار Horizontal يعني افقي را نسبت داد.

نکات مهم :

همانطور که در قطعه کد بالا مشاهده مي کنيد، ميزان ارتفاع ContentPanel بايد به طور پيشفرض صفر باشد و ضمنا مقدار overflow:hidden باشد. در غير اينصورت امکان دارد هنگام لود شدن صفحه در محل CollapsiblePanel لرزش و ناهمگوني خاصي به وجود آيد.
کنترل هاي HeaderPanel و ContentPanel بايد دقيقا و بلافاصله بعد از يکديگر تعريف شوند.

مثال انجام شده در اين مقاله از لينک بالاي صفحه قابل دريافت مي باشد.