PHP 開発フレームワーク Yii Framework チュートリアル (39) Zii コンポーネント - スライダーの例
- 黄舟オリジナル
- 2017-01-22 10:04:201232ブラウズ
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)!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。