確定可調整大小的事業部如果它保持其寬高比調整大小時

Question

我具有低於此HTML代碼：

<div id="myid_templates_editor_text_1" class="myid_templates_editor_element myid_templates_editor_text ui-resizable ui-draggable" style="width: 126.79999999999998px; height: 110px; position: absolute; left: 196px; top: 76px; -webkit-transform: rotate(0deg); border: hidden;"> 
    <div class="myid_templates_editor_text_dynamic_part"><p><strong>dsdasadsd</strong></p></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> 
</div> 

我具有id myid_templates_editor_text_1可調整大小所作的div並保持其高寬比，通過Jquery Plugin。

$('#myid_templates_editor_text_1').resizable({ 
    animate: true,   
    aspectRatio: true 
}); 

有時，我已禁用功能'保持縱橫比'。請參見下面的代碼：

$('#myid_templates_editor_text_1').resizable({ 
    animate: true,   
    aspectRatio: false 
}); 

我將如何確定div的保持寬高比只是着眼於HTML Code或javascript或jquery功能？那可能嗎？

Answer 1

是的，您可以像使用option()方法的許多jQuery UI小部件一樣正常地獲得選項值。對於你的情況

// Getter 
var aspectRatio = $(".selector").resizable("option", "aspectRatio"); 

所以適合：resizeable()見例如從jQuery UI的文檔

var aspectRatio = $('#myid_templates_editor_text_1').resizable("option", "aspectRatio"); 

JFIDDLE：https://jsfiddle.net/xnt15Lza/

DEMO：

$(function() { 
 
    $("div.green").resizable({ 
 
    aspectRatio: true 
 
    }); 
 
    $("div.blue").resizable({ 
 
    aspectRatio: false 
 
    }); 
 
    var aspectRatio = $("div.green").resizable("option", "aspectRatio"); 
 
    alert('green div aspectRatio set to: ' + aspectRatio); 
 
    var aspectRatio = $("div.blue").resizable("option", "aspectRatio"); 
 
    alert('blue div aspectRatio set to: ' + aspectRatio); 
 
});

div { 
 
    margin: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    color: #FFF; 
 
    text-align: center; 
 
} 
 
div.green { 
 
    background-color: green; 
 
} 
 
div.blue { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div class="green"></div> 
 
<div class="blue"></div>