Yii Framework 開發(fā)教程(35) Zii 組件-Button 示例

CJuiButton 顯示按鈕，CJuiButton 既可以做為 Submit（提交）按鈕，也可以做為普通按鈕。 按鈕基本用法如下：

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

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

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

這三個(gè)按鈕，第一個(gè)做為 Submit 按鈕，第二個(gè)作為普通按鈕，觸發(fā) JavaScripts 事件，第三個(gè)點(diǎn)擊后觸發(fā) otherAction 方法。

顯示結(jié)果如下：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/35.1.jpg" alt="picture35.1" />

可以為 Jui UI 組件添加 CSS 文件，這可以通過配置文件來設(shè)置 CSS 文件：

    'components'=>array(
        'clientScript' => array(
                'scriptMap' => array(
                    'jquery-ui.css'=> dirname($_SERVER['SCRIPT_NAME'])
                      .'/css/jui/custom/jquery-ui.css',
                    ),
                ),
            ),

這里我們復(fù)制 YiiPlayground 使用的 JQuery CSS 文件 ，使用新 CSS 風(fēng)格后顯示如下：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/35.2.jpg" alt="picture35.2" />

本例下載