AJAX Control Toolkit：Accordion控制項_範例02

AJAX Control Toolkit：Accordion控制項_範例02
.範例02檢視頁：Accordion控制項_範例02

這篇範例除了進一步介紹Accordion控制項的幾個重要屬性外，也根據dnow文AJAX Control Toolkit：Accordion控制項_範例01，可以知道原型在使用上還是會有問題或改善空間。這篇文章對程式做了一些修正

.範例02程式碼：

'========重要屬性設定=========
'每個折疊頁(AccordionPane)高度(預設無)
Me.Accordion1.AutoSize = AjaxControlToolkit.AutoSize.Fill
'折疊頁折疊時是否呈現淡出效果(預設否)
Me.Accordion1.FadeTransitions = True
'淡出效果每秒要顯示畫格數(預設30格)
Me.Accordion1.FramesPerSecond = 10
'淡出效果展現時間(預設250ms)
Me.Accordion1.TransitionDuration = 200
'初始網頁是否有一個折疊頁在展開狀態(預設是)
Me.Accordion1.RequireOpenedPane = False
'初始網頁哪個折疊頁要自動展開(預設0，即第一個)
Me.Accordion1.SelectedIndex = 1
'當按下折疊頁內某個項目時是否要抑制postback(預設否)
Me.Accordion1.SuppressHeaderPostbacks = True

Me.Accordion1.HeaderCssClass = "accordionHeaderDef"
Me.Accordion1.HeaderSelectedCssClass = "accordionHeaderSelectedDef"
Me.Accordion1.ContentCssClass = "accordionContentDef"

範例02程式碼說明-

1. 行11-24是比較重要的屬性，dnowba在寫屬性時也喜歡直接寫在page_load事件裡(當然有些postback問題的就放preload了)
2. 行24比較特別，若是你應用在填寫表單(需要網頁回傳/或是某控制項觸發某事件)就要考慮一下是不是要抑制
3. 行26-28是設定css屬性，有些人會寫在html中accordion標籤裡，個人喜好通通寫在vb中css就寫在html的head標籤後，不過這也有壞處，就是無法所見所得(因為事件發生在pageload嘛，用網頁預覽時才會看得到效果)，css樣式放在最後面對照(注意dnowba加入cusor來讓滑鼠移過時游標變成手指來改善「摺頁沒有提示不知道可點開」的問題)

<link href="style.css" type="text/css" rel="Stylesheet" />
  
    <%-- 給accordion控制項使用的樣式表 --%>
    <style type="text/css">
    /* 預設的標頭樣式表 */
    .accordionHeaderDef
    {
        border: 2px solid #0B0109;
        background-color: #8B7149;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        text-align: center;
    }

    /* 預設被選取的標頭樣式表 */
    .accordionHeaderSelectedDef
    {
        border: 3px dashed #0066FF;
        background-color: #FFFF00;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        text-align: center;
        font-style: italic;
        color: #0000FF;
    }

    /* 預設的內容樣式表 */
    .accordionContentDef
    {
        border: thick ridge #FFD8D8;
        background-color: #A7D9AF;
        border-top: none;
        padding: 5px;
        padding-top: 10px;
        text-align: left;
    }

    /* 預設的標頭之超連結樣式表 */
    .accordionHeaderDef a
    {
        color: #FFFFCC;
        text-decoration: none;
    }

    /* 當滑鼠移過預設的標頭之超連結樣式表 */
    .accordionHeaderDef a:hover
    {
        background-color: LightSlateGray; 
        color: Yellow;
        text-decoration: underline overline;
    }
</style>