محتویات سایت
        برچسب های محبوب 








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

در اين مقاله به معرفي کنترل Accordion که يکي از کنترل هاي موجود در AjaxControlToolkit است، مي پردازم.

مقدمه :

عملکرد کنترل Accordion همانند چندين پنل مي باشد که در هر لحظه فقط محتواي يکي از پنل ها قابل مشاهده  مي باشد. عملکرد اين کنترل را مي توانيد در اينجا مشاهده نماييد.

در اين مقاله قصد داريم يک کنترل Accordion به شکل زير ايجاد کنيم که عملکرد آن شبيه 3 پنل مي باشد که در هر لحظه فقط محتواي يکي از آنها قابل مشاهده مي باشد.

شکل کلي قضيه به اين صورت است که کنترل Accordion يک نگاهدارنده (Container) مي باشد که شامل يک و يا چند Accordion Pane مي باشد و در هنگام اجراي صفحه، در هر لحظه فقط محتويات يکي از Accordion Pane نمايش داده مي شود.

شروع :

يک پروژه از نوع ASP.NET AJAX-Enabled WebSite ايجاد کنيد و سپس به نماي سورس (Source View) صفحه برويد. يک کنترل Accordion به صفحه اضافه نماييد و آن را به شکل زير تکميل نماييد.


<ajaxToolkit:Accordion ID="Accordion1" runat="server"
   SuppressHeaderPostbacks=true
   SelectedIndex="0" 
   FadeTransitions="true"
   FramesPerSecond="40"
   TransitionDuration="250"
   RequireOpenedPane="false"
   AutoSize="None"  >
 </ajaxToolkit:Accordion>

اکنون به معرفي تعدادي از صفات مربوط به Accordion مي پردازم.

  1. SelectedIndex :  با مقدار دهي به اين صفت مشخص مي کنيم که هنگام اجراي صفحه، محتواي کداميک از Accordion Pane ها به طور پيشفرض در حال نمايش باشد. در اين مثال من به آن مقدار صفر داده ام پس محتواي اولين Accordion Pane نمايش داده مي شود.
  2. FadeTransitions : در صورتي که مقدار اين صفت true باشد هنگام باز و بسته شدن Accordion Pane ها يک جلوه گرافيکي Fade نمايش داده مي شود.
  3. FramesPerSecond : با مقدار دهي به اين صفت تعداد فريم هايي را مشخص مي کنيم که حالت انيميشني کنترل Accordion در هر ثانيه اجرا  مي کند.
  4. TransitionDuration : مدت زمان به ميلي ثانيه، که مدت زمان جلوه انيميشني باز و بسته شدن يک Accordion Pane را مشخص مي کند.
  5. HeaderCssClass : نام يک کلاس CSS را مي گيرد که مي تواند به Header تمام  Accordion Pane ها و يا يک Accordion Pane مشخص اعمال شود.
  6. ContentCssClass : نام يک کلاس CSS را مي گيرد که مي تواند به Content تمام Accordion Pane ها و يا يک Accordion Pane مشخص اعمال شود.
  7. HeaderSelectedCssClass : نام يک کلاس CSS را مي گيرد و به  Header مربوط به  Accordion Pane ي که در هر لحظه انتخاب مي شود اعمال مي شود.
  8. SuppressHeaderPostbacks : همانطور که در ادامه مقاله خواهيد ديد، ما در Header مربوط به هر کدام از Accordion Pane ها از يک هايپرلينک استفاده مي کنيم که با کليک شدن آن محتواي قسمت Content آن نمايش داده شود. با true شدن اين صفت، هنگام کليک شدن هايپرلينک ، صفحه Postback نمي کند و فقط محتواي Accordion Pane مربوطه نمايش داده مي شود.(اگر به اين صفت مقدار false بدهيد، هنگام کليک شدن هايپرلينک، صفحه Postback مي کند.)
  9. DataSource : کنترل Accordion داراي قابليت Data Binding مي باشد و مي تواند به يک ديتاسورس بايند شود.
  10. DataSourceID : اين صفت ID يک ديتاسورس را نگهداري مي کند.
  11. DataMember : هنگامي که از DataSourceID  استفاده مي کنيم، اين صفت نام عضو (Member) را نگهداري مي کند.
  12. RequireOpenedPane : به طور پيشفرض مقدار اين صفت true مي باشد و هنگامي که روي لينک داخل Header هر Accordion Pane کليک مي کنيد محتواي آن Accordion Pane نمايش داده مي شود (Pane باز مي شود) و در زماني که محتواي آن Accordion Pane در حال نمايش باشد، وقتي روي هايپرلينک کليک مي کنيد اتفاقي نمي افتد. اگر مقدار اين صفت را به false تغيير دهيد آنگاه هنگام کليک مجدد بر روي هايپرلينک ، اگر محتواي Accordion Pane در حال نمايش باشد آن را مي بندد و در غير اينصورت آن را باز مي کند.
  13. AutoSize : اين صفت مي تواند سه مقدار داشته باشد. اگر مقدار آن "None" باشد هنگام باز و بسته شدن Accordion Pane، سايرعناصر صفحه با توجه به اندازه محتويات Accordion Pane به اطراف جابجا مي شوند. اگر مقدار آن "Limit" باشد، سايز Accordion Pane هنگام باز شدن، بيشتر از سايزي که ما به Accordion Pane داده ايم نخواهد شد ولي اگر سايز محتويات آن کمتر از اندازه اي که ما داده ايم باشد، اندازه Accordion Pane به اندازه محتويات خواهد شد. اگر مقدار آن "Fill" باشد.سايز Accordion Pane دقيقا برابر سايزي مي شود که ما داده ايم و درنتيجه کمتر يا بيشتر نمي شود.

تذکر :

در اينترنت اکسپلورر 6 و 7 هنگامي که مقدار صفت AutoSize برابر Limit يا Fill باشد ، دقيقا يکسان رفتار مي کنند زيرا اين نسخه ها از صفت max-height مربوط به CSS حمايت نمي کنند.

اکنون به سراغ اضافه کردن  Accordion Pane ها به کنترل Accordion مي رويم.

کنترل Accordion داراي تگ <Panes> مي باشد که  Accordion Pane ها داخل اين تگ قرار مي گيرند. همانطور که در قطعه کد زير مشاهده مي کنيد، ما يک  Accordion Pane را به کنترل  Accordion اضافه کرده ايم .


<ajaxToolkit:Accordion ID="Accordion1" runat="server"
   SuppressHeaderPostbacks=true
   SelectedIndex="0"
   HeaderCssClass="accordionHeader"
   ContentCssClass="accordionContent"
   FadeTransitions="true"
   FramesPerSecond="40"
   TransitionDuration="250"
   RequireOpenedPane="false"
   AutoSize="None"  >
  
<Panes>
      <ajaxToolkit:AccordionPane ID = "AccordionPane1" runat = "server" >
           <Header>
            <a href = "" class = "accordionLink"> Section 1</a>
           </Header>
           <Content>
            <p>Persian C# Developers in <font color=red><b>30sharp.COM</b></font></p>
           </Content>
      </ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

هنگامي که با دقت به قطعه کد بالا نگاه کنيد متوجه مي شويد که  Accordion Pane داراي دو تگ به نام هاي Header و Content مي باشد. در قسمت Header يک هايپرلينک قرار داده شده است که عملکرد آن را قبلا توضيح داده ام و در قسمت Content نيز محتواي  Accordion Pane قرار مي گيرد.

اکنون کار تمام است و شما مي توانيد صفحه را اجرا کنيد و نتيجه را ببينيد.

براي مشاهده مثال کامل اين مقاله، مي توانيد فايل مربوطه را از لينک بالاي مقاله دانلود نماييد.