PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例

CJuiSlider は、画像のズームや他の機能に使用できるスライダーを表示します。JUI スライダー プラグインをカプセル化します。

この例では、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 コンポーネント - スライダーの例" >

<?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 コンポーネント - スライダーの例" >

上記は、PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例の内容です。さらに関連する内容については、PHP に注目してください。中国語のウェブサイト (www.php .cn)!