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

黄舟
Lepaskan: 2023-03-05 09:32:01
asal
1217 orang telah melayarinya

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" width="324" src="images/harry.jpg">
Salin selepas log masuk
Salin selepas log masuk
<?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" width="324" src="images/harry.jpg">
Salin selepas log masuk
Salin selepas log masuk

686.png

以上就是PHP开发框架Yii Framework教程(39) Zii组件-Slider示例的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan