CJuiSlider は、画像のズームや他の機能に使用できるスライダーを表示します。JUI スライダー プラグインをカプセル化します。
この例では、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" style="max-width:90%" src="images/harry.jpg" alt="PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例" ><?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" style="max-width:90%" src="images/harry.jpg" alt="PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例" >
上記は、PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例の内容です。さらに関連する内容については、PHP に注目してください。中国語のウェブサイト (www.php .cn)!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
