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

Yii Framework CJuiResizable 可調整大小元件：區域縮放與限制設定

編輯：PHP 綜合知識

CJuiResizable 封裝 jQuery UI Resizable，讓包裹區域內的內容支援滑鼠拖曳邊緣調整大小，適用於面板、圖片、編輯器等可調整尺寸的 UI。

基本用法

<?php $this->beginWidget('zii.widgets.jui.CJuiResizable', array(
    'options' => array(
        'minWidth' => 100,
        'minHeight' => 80,
        'maxWidth' => 800,
        'maxHeight' => 600,
        'aspectRatio' => false,  // true 鎖定長寬比
        'handles' => 'n, e, s, w, ne, se, sw, nw',  // 可調整的邊緣/角
        'animate' => true,       // 動畫過渡
        'animateDuration' => 200,
    ),
    'htmlOptions' => array(
        'style' => 'width:300px; height:200px; padding:10px; border:1px solid #ccc; background:#fff;',
    ),
)); ?>
    可調整大小的內容區域
    <br><br>
    <small>拖曳邊緣或角落調整尺寸</small>
<?php $this->endWidget(); ?>

關鍵選項詳解

選項	說明	常用值
`handles`	啟用調整控制點	'all', 'n,e,s,w,se', {se: '.my-handle'}
`minWidth/minHeight`	最小尺寸限制	50, 100
`maxWidth/maxHeight`	最大尺寸限制	800, 600
`aspectRatio`	鎖定長寬比	true, 1.777 (16:9)
`grid`	網格步長對齊	[20, 20]
`containment`	限制在父容器內	'parent', '#container'
`animate`	釋放後動畫平滑	true/false
`ghost`	拖曳時顯示半透明預覽	true/false

進階：圖片縮放預覽（鎖定比例）

<?php $this->beginWidget('zii.widgets.jui.CJuiResizable', array(
    'options' => array(
        'handles' => 'se',           // 只允許右下角
        'aspectRatio' => true,       // 鎖定原始比例
        'minWidth' => 50,
        'maxWidth' => 600,
        'ghost' => true,
    ),
    'htmlOptions' => array('style' => 'display:inline-block;'),
)); ?>
    <img src="/images/photo.jpg" width="300" alt="可縮放圖片">
<?php $this->endWidget(); ?>

事件回調

'options' => array(
    'start' => 'js:function(event, ui) { $(this).addClass("resizing"); }',
    'resize' => 'js:function(event, ui) {
        $("#size-info").text("寬: " + ui.size.width + "px, 高: " + ui.size.height + "px");
    }',
    'stop' => 'js:function(event, ui) {
        $(this).removeClass("resizing");
        $.post("saveSize", { w: ui.size.width, h: ui.size.height });
    }',
),

與 CJuiDraggable 組合：可拖曳且可調整大小的面板

<?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
    'options' => array('handle' => '.panel-header', 'containment' => '#workspace'),
)); ?>
    <div class="panel-header">面板標題</div>
    <?php $this->beginWidget('zii.widgets.jui.CJuiResizable', array(
        'options' => array('handles' => 'se', 'minWidth' => 200, 'minHeight' => 150),
    )); ?>
        <div class="panel-body">面板內容</div>
    <?php $this->endWidget(); ?>
<?php $this->endWidget(); ?>