PHP開發框架Yii Framework教程(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'),
)); ?>

這三個按鈕，第一個做為Submit按鈕，第二個作為普通按鈕，觸發JavaScripts事件，第三個點擊後觸發otherAction 方法。

顯示結果如下：

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

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

這裡我們復制YiiPlayground使用的JQuery CSS文件 ，使用新CSS風格後顯示如下：

本例下載：http://www.imobilebbs.com/download/yii/JuiButtonDemo.zip