jQuery-UI 크기를 조정할 수있는 방법을 사용하는 4 개의 텍스트 영역과 iframe의 수평 정렬에 문제가 있습니다. 각각의 텍스트 영역과 iframe은 플로트를 사용하더라도 세로로 쌓여서 나타납니다.가로 텍스트 영역 정렬 및 너비 변경에 대한 jQuery UI 크기 조정 가능 문제
두 번째 문제점은 각 크기를 조정할 수있는 요소가 폭이 100px 인 으로 선언되었지만 크롬 개발 도구로 볼 때 크기가 93px로 변경된다는 것입니다 (resizable? 사용시 나타남).
내 jsfiddle에는 3 가지 예가 들어 있습니다. (1) 부모 div의 바깥 경계로 크기 조정이 가능한 Div Block 그룹. textareas 및 iframe과 동일한 기능을 구현하고 싶습니다. b) 크기 재조정 가능한 jQuery를 사용하지 않는 텍스트 영역 그룹. textareas가 float없이 DEFAULT로 크기 조정할 수있는 인라인 블록임을 보여주기 위해 추가되었습니다. 이러한 요소는 그대로 둡니다. c) 내 문제가 입증되었습니다 : 4 개의 텍스트 영역과 하나의 iframe이 수평으로 정렬되지 않고 부모 컨테이너의 경계를 넘어 흐릅니다. 정렬 문제를 해결하고 DIV 블록이 부모 DIV의 너비 경계 내에 머무르는 것과 같은 방식으로 텍스트 영역의 크기 조정이 작동하는지 테스트 할 수 있습니다.
또 다른 문제는 jQuery UI 크기 조정을 사용하면 width 속성 을 100px에서 93px로 변경하는 것입니다. 이 두 번째 질문이 내가 알지 못할 수있는 게시 규칙을 위반하지 않기를 바랍니다.
감사합니다.
내 [jsfiddle] [1] [1] : 3 개월 만에 배울 수있는 하나의 https://jsfiddle.net/KerryRuddock/nbLhvg09/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable</title>
<link rel="stylesheet" href="jqueryui/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="jqueryui/jquery-ui.js"></script>
<style>
* { padding:0; box-sizing: border-box; }
.h-mt50 { margin-top:50px; }
#div-wrap {
height:40px;
width:400px;
border:1px solid black;
font-size:0px;
}
#d1, #d2, #d3, #d4, #d5 {
height:40px;
width:40px;
display: inline-block;
}
#textarea-wrap {
height:100px;
width:100%;
border:1px solid black;
font-size:0px;
}
#t1, #t2, #t3, #t4, #t5 {
height: 100px;
width: 100px;
box-sizing: border-box;
float:left;
resize:horizontal;
}
#d1, #t1 { background: lime; }
#d2, #t2 { background: teal; }
#d3, #t3 { background: gold; }
#d4, #t4 { background: aqua; }
#d5, #t5 { background: pink; }
</style>
</head>
<body>
<h2 class="h-mt50">Resizable Div blocks</h2>
<div id="div-wrap">
<div id="d1" class="box"></div>
<div id="d2" class="box"></div>
<div id="d3" class="box"></div>
<div id="d4" class="box"></div>
<div id="d5" class="box"></div>
</div>
<h2 class="h-mt50">TextArea - no added jQuery UI </h2>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<h2 class="h-mt50">Resizable TextArea blocks</h2>
<div id="textarea-wrap">
<textarea id="t1" class="panel"></textarea>
<textarea id="t2" class="panel"></textarea>
<textarea id="t3" class="panel"></textarea>
<textarea id="t4" class="panel"></textarea>
<!-- <iframe id="t5" class="panel"></iframe> -->
</div>
<script>
$(function() {
$(".box").resizable({
containment: "#div-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if (parent.width() <= siblingWidth + ui.element.width()) {
ui.element.width(parent.width() - siblingWidth);
}
}
});
$(".panel").resizable({
containment: "#textarea-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var currentWidth = ui.size.width;
// this accounts for some lag in the ui.size value, if you take this away
// you'll get some instable behaviour
$(this).width(currentWidth);
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if (parent.width() <= siblingWidth + ui.element.width()) {
ui.element.width(parent.width() - siblingWidth);
}
}
});
});
</script>
</body>
</html>