#jquery #resizable #jquery-ui-resizable #jquery-resizable
#jquery #изменяемый размер #jquery-пользовательский интерфейс с изменяемым размером #jquery-изменяемый размер
Вопрос:
У меня есть следующее, используя Jquery, и каким-то образом я могу изменить его размер в правом нижнем углу, где я вижу значок изменения размера. На боковых краях отображается <—> для изменения размера, но я не могу растянуть его от края до размера?Что может быть не так?
<div class="dragDiv" id="dragDiv">
<div id="header" class="ui-widget-header handler"><img src="Styles/move_icon.jpg" align="top">
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div style="width: 100%;height: 100%;">
<textarea style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
<input type="submit" value="Mark" onclick="MarkImage()" style="height: 20px;" />
</div>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.resizable.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.draggable.js" type="text/javascript"></script>
$("#dragDiv").resizable();
Ответ №1:
Избавьтесь от
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
И сделайте это вместо этого.
$("#dragDiv").resizable({
handles: 'e,w,s,n,se'
});
Комментарии:
1. Круто! Сработало…. Есть ли какой-либо способ ограничить минимальную высоту и ширину для изменяемого размера div, чтобы люди не могли сделать его меньше или больше определенного указанного размера?
2. Вы можете добавить опции
maxHeight
иmaxWidth
, чтобы код выглядел следующим образом$("#dragDiv").resizable({ handles: 'e,w,s,n,se', maxHeight:200, maxWidth:200 });