CJuiSliderInput 顯示一滑動條,它也封裝了 JUI slider 插件,可以用在 Form 中作為用戶輸入 UI 組件。
基本用法如下:
<div class="form">
<?php $form=$this->beginWidget('CActiveForm'); ?>
<?php echo $form->errorSummary($model); ?>
<?php $this->widget('zii.widgets.jui.CJuiSliderInput', array(
'model'=>$model,
'attribute'=>'size',
'name'=>'my_slider',
'value'=>50,
'event'=>'change',
'options'=>array(
'min'=>0,
'max'=>100,
'slide'=>'js:function(event,ui){$("#amount").text(ui.value);}',
),
'htmlOptions'=>array(
'style'=>'width:200px; float:left;'
),
)); ?>
<div id="amount" style="margin-left:215px;">50</div>
<div class="row submit">
<?php echo CHtml::submitButton('Submit'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
用戶提交后,使用 result.php 來顯示用戶輸入的值,這里定義 DataModel 如下:
class DataModel extends CFormModel
{
public $size;
public function rules()
{
return array(
array('size', 'safe'),
);
}
}
修改 SiteController 的 indexAction 方法:
public function actionIndex()
{
$model=new DataModel();
$model->size=50;
if(!empty($_POST['DataModel']))
{
$model->attributes=$_POST['DataModel'];
if($model->validate())
{
$this->render('result', array(
'model' => $model,
));
return;
}
}
$this->render('index', array(
'model' => $model,
));
}
http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/40.1.jpg" alt="picture40.1" />
本例下載