Yii Framework 开发教程(39) Zii组件-Slider示例



CJuiSlider显示一滑动条，可以通过滑动条来缩放图像或用作其它功能，它封装了 JUI slider插件。

本例通过CJuiSlider来缩放一副图像：

[php] view plain copy print ?

1. <?php $this->widget('zii.widgets.jui.CJuiSlider', array(  
2.     'value'=>50,  
3.     'options'=>array(  
4.                 'min'=>1,  
5.                 'max'=>100,  
6.                 'slide'=>'js:  
7.             function(event,ui){  
8.                 $("#image").width(648*ui.value/100);  
9.                 $("#zoom").text(ui.value+"%");  
10.             }  
11.         ',  
12.                 ),  
13.             'htmlOptions'=>array(  
14.                 'style'=>'width:648px; float:left;'  
15.                 ),  
16. )); ?>  
17.   
18. <div id="zoom" >50%</div>  
19. <br />  
20.   
21. <img id="image" width="324" src="images/harry.jpg">  

<?php $this->widget('zii.widgets.jui.CJuiSlider', array(
	'value'=>50,
	'options'=>array(
				'min'=>1,
				'max'=>100,
				'slide'=>'js:
			function(event,ui){
				$("#image").width(648*ui.value/100);
				$("#zoom").text(ui.value+"%");
			}
		',
				),
			'htmlOptions'=>array(
				'style'=>'width:648px; float:left;'
				),
)); ?>

<div id="zoom" >50%</div>
<br />

<img id="image" width="324" src="images/harry.jpg">

本例 下载