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

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

 

基本用法如下：

 

 

[php]  

 

beginWidget('CActiveForm'); ?>  

  

    errorSummary($model); ?>  

  

 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;'  

                ),  

 )); ?>  

  

50

 

   

 

         

   

 

  

endWidget(); ?>  

 

 

beginWidget('CActiveForm'); ?>

 

    errorSummary($model); ?>

 

 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;'

  ),

 )); ?>

 

50

   

       

   

 

endWidget(); ?>

 

用户提交后，使用result.php来显示用户输入的值，这里定义DataModel如下：

 

 

 

[php]  

class DataModel extends CFormModel  

{  

    public $size;  

  

    public function rules()  

    {  

        return array(  

            array('size', 'safe'),  

        );  

    }  

}  

 

class DataModel extends CFormModel

{

public $size;

 

public function rules()

{

return array(

array('size', 'safe'),

);

}

}

 

修改SiteController的indexAction方法：

 

 

 

[php]  

public function actionIndex()  

{  

  

    $model=new DataModel();  

    $model->size=50;  

    if(!emptyempty($_POST['DataModel']))  

    {  

        $model->attributes=$_POST['DataModel'];  

  

        if($model->validate())  

        {  

            $this->render('result', array(  

                'model' => $model,  

  

                ));  

            return;  

        }  

  

    }  

  

    $this->render('index', array(  

            'model' => $model,  

  

            ));  

}  

 

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,

 

));

}