1
다른 응용 프로그램에 드롭 할 수 있어야하는 asp.net 컨트롤을 개발하고 있습니다. 컨트롤은 기본적으로 다른 요소를 클릭 할 때 div가 표시되거나 숨겨진 사용자 정의 드롭 다운입니다.IE8에서 절대 위치 지정 중단
내가 겪고있는 문제는 동적 div가 클릭 된 요소 아래에 정렬되도록하는 데 있습니다. 나는 이론적으로 두 요소와 원하는 정렬을 지정하고 첫 번째 요소와 관련하여 두 번째 요소를 올바른 위치로 이동시키는 자바 스크립트 함수를 작성했습니다.
필자는 현재이 컨트롤이 사용될 것으로 예상되는 장소와 관련하여 세 가지 테스트 케이스를 가지고 있는데 IE7의 세 가지 경우 모두 내 현재 마크 업과 자바 스크립트가 작동하지만 FF3.5 및 IE8 표준의 경우에는 실패합니다 방법. 나는 잠시 동안이 문제를 가지고 놀았으며 다른 문제 중 하나를 깨지 않고 문제를 해결하는 해답을 제시하지 못했습니다. (내 사용자 중 90 % 이상이 IE7 로의 마이그레이션이 느림)
페이지에 호환 모드 지시문을 추가하는 것 외에 다른 제안 사항이 있으니 IE8에서는 문제가 해결되지만 내가 이것이 언제 어디에서 사용되는지를 항상 제어 할 수는 없기 때문에 가능하면 대안이 될 수 있습니다. 다음은 테스트 사례와 함께 관련 마크 업과 자바 스크립트를 보여주는 HTML 문서입니다. 세 번째 경우는 입력 요소 아래에 깔끔하게 정렬되는 대신 div가 세로로 겹치고 select 요소의 너비와 같은 거리만큼 오른쪽으로 오프셋되는 대신 문제가있는 것입니다.
(실제 문서가이 스타일 시트를 생략/포함 에릭 마이어 발표 한 하나에서 적응 리셋 스타일 시트를 사용합니다 이러한 테스트 케이스에 아무런 관련 영향을 미치지 않습니다.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var VAlign = { "top": -1, "center": 0, "bottom": 1 };
var HAlign = { "left": -1, "center": 0, "right": 1 };
function AlignElements(element1, vAlign1, hAlign1, element2, vAlign2, hAlign2) {
var List1 = BuildOffsetList(element1);
var List2 = BuildOffsetList(element2);
var Index1 = List1.length - 1;
var Index2 = List2.length - 1;
while (Index1 >= 0 && Index2 >= 0 && List1[Index1] == List2[Index2]) {
Index1--;
Index2--;
}
element2.style.top = "";
element2.style.left = "";
var OT1 = 0;
var OL1 = 0;
var OT2 = 0;
var OL2 = 0;
while (Index1 >= 0) {
OT1 += List1[Index1].offsetTop;
OL1 += List1[Index1].offsetLeft;
Index1--;
}
while (Index2 >= 0) {
OT2 += List2[Index2].offsetTop;
OL2 += List2[Index2].offsetLeft;
Index2--;
}
var top = (OT1 - OT2);
if (vAlign1 == VAlign.bottom) {
top += element1.offsetHeight;
} else if (vAlign1 == VAlign.center) {
top += (element1.offsetHeight/2);
}
if (vAlign2 == VAlign.bottom) {
top -= element2.offsetHeight;
} else if (vAlign2 == VAlign.center) {
top -= (element2.offsetHeight/2);
}
var left = (OL1 - OL2);
if (hAlign1 == HAlign.right) {
left += element1.offsetWidth;
} else if (hAlign1 == HAlign.center) {
left += (element1.offsetWidth/2);
}
if (hAlign2 == HAlign.right) {
left -= element2.offsetWidth;
} else if (hAlign2 == HAlign.center) {
left -= (element2.offsetWidth/2);
}
element2.style.top = top + "px";
element2.style.left = left + "px";
}
function BuildOffsetList(elelment) {
var I = 0;
var List = new Array();
var Element = elelment;
while (Element) {
List[I] = Element;
Element = Element.offsetParent;
I++;
}
return List;
}
</script>
Case 1
<div>
<div id="control1" style=" display:inline; position:relative;">
<div id="control1_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control1_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control1_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control1_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
<div style="height:100px;"></div>
Case 2
<div>
<div id="Nav" style="float:left; width:200px; height:150px; background-color:Aqua;"></div>
<div id="Content" style="margin-left:200px; height:150px; background-color:#ddd;">
<div style="margin-left:100px;">
<h5 style="float:left; margin-left:-100px; width:90px; margin-right:10px; text-align:right; font-weight:.9em;">Label</h5>
<div id="control2" style=" display:inline; position:relative;">
<div id="control2_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control2_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control2_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control2_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
</div>
</div>
<div style="height:100px;"></div>
Case 3
<div>
<select><option>something</option></select>
<br />
<select><option>something else</option></select>
<div id="control3" style=" display:inline; position:relative;">
<div id="control3_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control3_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control3_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control3_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
</body>
</html>
된다 외에/기타 요소 아래 ..이 당신을 위해 올바른 선택인가? –
표준 자바 스크립트의 영역에 머무르기 위해 열심히 노력하고 있기 때문에 모든 곳에서 제어 할 필요가 없습니다. 다른 모든 것들이 실패한다면 나는 다른 도서관을 가져 오기 위해 떠날지도 모르지만 나는 그것을 피하기를 원할 것입니다. – Rozwel