CJuiSlider顯示一條滑動條,可以透過滑動條來縮放影像或用作其它功能,它封裝了 JUI slider插件。
本例透過CJuiSlider來縮放一副圖片:
<?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" style="max-width:90%" src="images/harry.jpg" alt="PHP開發框架Yii Framework教學(39) Zii元件-Slider範例" >
<?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" style="max-width:90%" src="images/harry.jpg" alt="PHP開發框架Yii Framework教學(39) Zii元件-Slider範例" >
以上就是PHP開發框架Yii Framework教程(39) Zii組件-Slider範例的內容,更多相關內容請關注PHP中文網(www. .cn)!