您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

Yii Framework CJuiSlider 滑桿元件：圖片縮放與數值選擇實作

編輯：PHP 綜合知識

CJuiSlider 封裝 jQuery UI Slider，提供拖曳滑桿選擇數值，適用於音量控制、圖片縮放、價格區間篩選等場景。

基本用法：圖片即時縮放

<?php $this->widget('zii.widgets.jui.CJuiSlider', array(
    'value' => 50,  // 初始值 50%
    'options' => array(
        'min' => 1,
        'max' => 100,
        'slide' => 'js:function(event, ui) {
            $("#image").width(648 * ui.value / 100);
            $("#zoom").text(ui.value + "%");
        }',
        'change' => 'js:function(event, ui) {
            // 滑動結束後觸發，可儲存設定
        }',
    ),
    'htmlOptions' => array(
        'style' => 'width:648px; margin:10px 0;',
    ),
)); ?>

<center id="zoom">50%</center>
<br>
<img id="image" width="324" src="/images/sample.jpg" alt="可縮放圖片">

關鍵事件與選項

事件/選項	觸發時機	用途
`slide`	拖曳過程中持續觸發	即時視覺回饋（縮放、預覽）
`change`	滑動結束（滑鼠釋放）	儲存最終值、送出 AJAX
`start`	開始拖曳	暫停其他動畫、記錄初始狀態
`stop`	結束拖曳	恢復動畫、最終確認
`orientation`	'horizontal'/'vertical'	水平/垂直滑桿
`range`	true/'min'/'max'	雙滑桿區間選擇
`step`	數值步長	離散化選擇（如 10, 20, 30...）

進階：雙滑桿價格區間篩選

<?php $this->widget('zii.widgets.jui.CJuiSlider', array(
    'options' => array(
        'range' => true,
        'min' => 0,
        'max' => 10000,
        'values' => array(1000, 5000),  // 雙滑桿初始值
        'slide' => 'js:function(event, ui) {
            $("#price_min").text("$" + ui.values[0]);
            $("#price_max").text("$" + ui.values[1]);
            $("#min_val").val(ui.values[0]);
            $("#max_val").val(ui.values[1]);
        }',
    ),
    'htmlOptions' => array('style' => 'width:400px;'),
)); ?>

<div>價格範圍: <span id="price_min">$1000</span> - <span id="price_max">$5000</span></div>
<input type="hidden" id="min_val" name="price_min" value="1000">
<input type="hidden" id="max_val" name="price_max" value="5000">

垂直滑桿音量控制範例

<?php $this->widget('zii.widgets.jui.CJuiSlider', array(
    'value' => 70,
    'options' => array(
        'orientation' => 'vertical',
        'min' => 0,
        'max' => 100,
        'slide' => 'js:function(event, ui) {
            $("#volume").text(ui.value);
            // player.setVolume(ui.value / 100);
        }',
    ),
    'htmlOptions' => array('style' => 'height:200px; float:left; margin-right:20px;'),
)); ?>
<div id="volume" style="float:left; padding-top:80px; font-size:24px;">70</div>