Yii Framework CJuiTabs 分頁元件：靜態、Partial Render 與 AJAX 三種內容載入模式

CJuiTabs 封裝 jQuery UI Tabs，提供分頁式內容切換，支援三種內容來源：靜態文字、Partial Render、AJAX 遠端載入。

基本配置：三種模式並存

<?php $this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs' => array(
        '靜態分頁' => '這是直接寫死的靜態內容',
        'Partial 分頁' => $this->renderPartial('pages/_content1', null, true),
        'AJAX 分頁' => array('ajax' => array('ajaxContent', 'view' => '_content2')),
    ),
    'options' => array(
        'collapsible' => true,  // 允許全部摺疊
        'selected' => 1,        // 預設顯示第二個分頁 (0-based)
    ),
    'htmlOptions' => array('style' => 'width:500px;'),
)); ?>

控制器需定義的 Actions

public function actions() {
    return array(
        'page' => array(
            'class' => 'CViewAction',
        ),
        'ajaxContent' => array(
            'class' => 'application.controllers.AjaxViewAction',
        ),
    );
}

自訂 AjaxViewAction（僅允許 AJAX 請求）

class AjaxViewAction extends CViewAction {
    private $_viewPath;

    public function run() {
        if (Yii::app()->request->isAjaxRequest) {
            $this->resolveView($this->getRequestedView());
            $controller = $this->getController();
            $controller->renderPartial($this->view, null, false, true);
        } else {
            throw new CHttpException(400, 'Invalid request. Please do not repeat this request again.');
        }
    }
}

關鍵選項說明

• tabs：陣列，鍵=分頁標題，值=內容來源
  • 字串：靜態內容
  • renderPartial 回傳值：伺服器端渲染
  • array('ajax' => array('route', 'params'))：AJAX 載入
• options.collapsible：true 允許點擊開啟的分頁關閉它
• options.selected：初始顯示索引
• options.event：觸發切換事件（click/mouseover）
• options.ajaxOptions：AJAX 參數（cache, dataType 等）

動態新增/移除分頁（JS 控制）

// 新增
$("#tabs").tabs("add", "".Yii::app()->createUrl('tab/newContent")."", "新分頁");

// 移除（索引）
$("#tabs").tabs("remove", 2);

// 禁用/啟用
$("#tabs").tabs("disable", 1);
$("#tabs").tabs("enable", 1);

// 切換
$("#tabs").tabs("select", 0);

樣式客製化

/* 自訂分頁標題樣式 */
#tabs .ui-tabs-nav li a { padding: 8px 16px; font-size: 14px; }
#tabs .ui-tabs-nav li.ui-tabs-active a { background: #2196f3; color: white; }
#tabs .ui-tabs-panel { padding: 16px; border: 1px solid #ddd; border-top: none; }

適用場景與建議

• 內容區塊明確、用戶需在同一視窗切換檢視
• AJAX 模式適合大量內容、延遲載入、權限控制
• 避免巢狀 Tabs（UX 混淆），改用 Accordion 或分頁導航
• SEO 考量：重要內容勿僅放在 AJAX 分頁，或提供無 JS 降級版本