首頁  >  文章  >  後端開發  >  PHP開發框架Yii Framework教學(39) Zii元件-Slider範例

PHP開發框架Yii Framework教學(39) Zii元件-Slider範例

黄舟
黄舟原創
2017-01-22 10:04:201232瀏覽

CJuiSlider顯示一條滑動條,可以透過滑動條來縮放影像或用作其它功能,它封裝了 JUI slider插件。

本例透過CJuiSlider來縮放一副圖片:

<?php $this->widget(&#39;zii.widgets.jui.CJuiSlider&#39;, array(  
    &#39;value&#39;=>50,  
    &#39;options&#39;=>array(  
                &#39;min&#39;=>1,  
                &#39;max&#39;=>100,  
                &#39;slide&#39;=>&#39;js:  
            function(event,ui){  
                $("#image").width(648*ui.value/100);  
                $("#zoom").text(ui.value+"%");  
            }  
        &#39;,  
                ),  
            &#39;htmlOptions&#39;=>array(  
                &#39;style&#39;=>&#39;width:648px; float:left;&#39;  
                ),  
)); ?>  
  
<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(&#39;zii.widgets.jui.CJuiSlider&#39;, array(  
    &#39;value&#39;=>50,  
    &#39;options&#39;=>array(  
                &#39;min&#39;=>1,  
                &#39;max&#39;=>100,  
                &#39;slide&#39;=>&#39;js:  
            function(event,ui){  
                $("#image").width(648*ui.value/100);  
                $("#zoom").text(ui.value+"%");  
            }  
        &#39;,  
                ),  
            &#39;htmlOptions&#39;=>array(  
                &#39;style&#39;=>&#39;width:648px; float:left;&#39;  
                ),  
)); ?>  
  
<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開發框架Yii Framework教程(39) Zii組件-Slider範例的內容,更多相關內容請關注PHP中文網(www. .cn)!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn