Yii Framework 开发教程(40) Zii组件-SliderInput示例



CJuiSliderInput 显示一滑动条，它也封装了 JUI slider插件，可以用在Form中作为用户输入UI组件。

基本用法如下：

[php] view plain copy print ?

1. <div class="form">  
2. <?php $form=$this->beginWidget('CActiveForm'); ?>  
3.   
4.     <?php echo $form->errorSummary($model); ?>  
5.   
6.  <?php $this->widget('zii.widgets.jui.CJuiSliderInput', array(  
7.     'model'=>$model,  
8.     'attribute'=>'size',  
9.     'name'=>'my_slider',  
10.     'value'=>50,  
11.     'event'=>'change',  
12.     'options'=>array(  
13.                 'min'=>0,  
14.                 'max'=>100,  
15.                 'slide'=>'js:function(event,ui){$("#amount").text(ui.value);}',  
16.                 ),  
17.             'htmlOptions'=>array(  
18.                 'style'=>'width:200px; float:left;'  
19.                 ),  
20.  )); ?>  
21.   
22. <div id="amount" style="margin-left:215px;">50</div>  
23.     <div class="row submit">  
24.         <?php echo CHtml::submitButton('Submit'); ?>  
25.     </div>  
26.   
27. <?php $this->endWidget(); ?>  
28. </div><!-- form -->  

<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如下：

[php] view plain copy print ?

1. class DataModel extends CFormModel  
2. {  
3.     public $size;  
4.   
5.     public function rules()  
6.     {  
7.         return array(  
8.             array('size', 'safe'),  
9.         );  
10.     }  
11. }  

class DataModel extends CFormModel
{
	public $size;

	public function rules()
	{
		return array(
			array('size', 'safe'),
		);
	}
}

修改SiteController的indexAction方法：

[php] view plain copy print ?

1. public function actionIndex()  
2. {  
3.   
4.     $model=new DataModel();  
5.     $model->size=50;  
6.     if(!empty($_POST['DataModel']))  
7.     {  
8.         $model->attributes=$_POST['DataModel'];  
9.   
10.         if($model->validate())  
11.         {  
12.             $this->render('result', array(  
13.                 'model' => $model,  
14.   
15.                 ));  
16.             return;  
17.         }  
18.   
19.     }  
20.   
21.     $this->render('index', array(  
22.             'model' => $model,  
23.   
24.             ));  
25. }  

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,

			));
}

本例 下载