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

快来打我* 2023-10-16 19:21 40阅读 0赞

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

基本用法如下：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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>

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

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

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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,
    
    			));
    }

[![201212129009][]][201212129009 1] 本例 [下载][Link 1]

[JUI slider]: http://jqueryui.com/demos/slider/
[view plain]: http://blog.csdn.net/mapdigit/article/details/8460399#
[201212129009]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129009.png
[201212129009 1]: http://www.imobilebbs.com/wordpress/archives/4125/attachment/201212129009
[Link 1]: http://www.imobilebbs.com/download/yii/JuiSliderInputDemo.zip