PHP開發框架Yii Framework教程(39) Zii組件-Slider示例

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;' 
                ),
)); ?>

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

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

本例下載：http://www.imobilebbs.com/download/yii/JuiSliderDemo.zip