• 技术文章 >后端开发 >php教程

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

    黄舟黄舟2017-01-22 10:04:20原创713

    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" 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">

    686.png

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:PHP开发框架Yii Framework教程(38) Zii组件-ProgressBar示例 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • php实现通过JSON RPC与go通讯(附代码)• 浅析怎么使用PHP做异步爬取数据• PHP8.3要有新函数了!(json_validate函数说明)• 设计API接口时,要注意这些地方!• PHP网站常见一些安全漏洞及防御方法
    1/1

    PHP中文网