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

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" />

本例下載