Yii Framework CJuiButton 按鈕元件：提交、一般按鈕與連結三種模式詳解

CJuiButton 封裝 jQuery UI Button，支援三種 buttonType 模式，提供一致視覺風格與圖示支援。

三種按鈕類型完整範例

1. Submit 提交按鈕

<?php $this->widget('zii.widgets.jui.CJuiButton', array(
    'buttonType' => 'submit',
    'name' => 'btnSubmit',
    'value' => '1',
    'caption' => '送出',
    'htmlOptions' => array('class' => 'ui-button-primary'),
)); ?>

2. 一般按鈕（觸發 JS 事件）

<?php $this->widget('zii.widgets.jui.CJuiButton', array(
    'buttonType' => 'button',
    'name' => 'btnClick',
    'caption' => '點擊測試',
    'onclick' => 'js:function(){alert("clicked"); this.blur(); return false;}',
    // 'options' => array('icons' => 'js:{primary:"ui-icon-newwin"}'),
)); ?>

3. 連結按鈕（導向 URL）

<?php $this->widget('zii.widgets.jui.CJuiButton', array(
    'buttonType' => 'link',
    'name' => 'btnGo',
    'caption' => '前往其他頁',
    'url' => array('site/other'),
    // 'options' => array('icons' => 'js:{secondary:"ui-icon-extlink"}'),
)); ?>

圖示與樣式客製化

• options 透傳 jQuery UI Button 選項：
  • icons.primary：主圖示（按鈕左側）
  • icons.secondary：次圖示（按鈕右側）
  • text：true/false 顯示/隱藏文字
• jQuery UI 圖示類別：ui-icon-*（如 ui-icon-search, ui-icon-plus, ui-icon-trash）
• 自訂 CSS Theme：參考 CJuiAccordion 章節 scriptMap 設定

表單整合最佳實踐

<?php $form=$this->beginWidget('CActiveForm'); ?>
    <?php echo $form->errorSummary($model); ?>
    <div class="row buttons">
        <?php $this->widget('zii.widgets.jui.CJuiButton', array(
            'buttonType' => 'submit',
            'caption' => $model->isNewRecord ? '建立' : '更新',
            'htmlOptions' => array('class' => 'btn-primary'),
        )); ?>
    </div>
<?php $this->endWidget(); ?>

注意事項

• buttonType='submit' 必須在 <form> 內才會觸發提交
• onclick 回傳 false 防止預設行為（如 link 類型）
• jQuery UI Button 不支援 disabled 屬性動態切換，需用 button('disable') 方法
• IE8 以下圖示字型可能異常，建議載入相容性 CSS