Yii Framework CJuiAccordion 手風琴面板元件使用教學

CJuiAccordion 封裝 jQuery UI Accordion，提供可摺疊內容面板，適用於 FAQ、側邊欄選單、分段式表單等場景。

基本用法

<?php $this->widget('zii.widgets.jui.CJuiAccordion', array(
    'panels' => array(
        '面板一標題' => '面板一內容',
        '面板二標題' => '面板二內容',
        '面板三標題' => $this->renderPartial('_content1', null, true), // 支援局部視圖
    ),
    'options' => array(
        'collapsible' => true,  // 允許全部摺疊
        'active' => 1,          // 預設展開第二個（0-based）
    ),
    'htmlOptions' => array(
        'style' => 'width:500px;',
    ),
)); ?>

關鍵選項說明

• panels：鍵值陣列，鍵=標題，值=內容（字串或渲染結果）
• options：透傳給 jQuery UI Accordion 的選項
  • collapsible：true 允許全部關閉，false 強制至少一開
  • active：預設展開索引，false 全關
  • event：觸發事件（click/mouseover）
  • animate：動畫速度/緩動
  • heightStyle：auto/fill/content
• htmlOptions：最外層容器 HTML 屬性

動態內容載入範例

'panels' => array(
    '最新公告' => $this->renderPartial('_latest_news', array('limit'=>5), true),
    '熱門文章' => $this->renderPartial('_popular_posts', true),
    '用戶面板' => $this->renderPartial('_user_panel', array('user'=>Yii::app()->user), true),
),

樣式客製化

引入自訂 jQuery UI Theme（ThemeRoller 產生），在配置檔設定：

'components' => array(
    'clientScript' => array(
        'scriptMap' => array(
            'jquery-ui.css' => '/css/jui/custom/jquery-ui.css',
        ),
    ),
),

適用場景與注意事項

• 內容區塊較多、需節省垂直空間
• 避免巢狀 Accordion（UX 複雜度高）
• 大量內容考慮 AJAX 延遲載入而非一次渲染
• 無障礙：確保鍵盤可操作（jQuery UI 內建支援）