내 aspx 페이지에서 크기 조정 및 드래그 가능 jQuery를 적용하려고합니다. 것을 제외하고 것들의 대부분은 순서대로 컨트롤이에 크기 조정 핸들이 다른 위치에 배치지고 , 즉
레이블 (DynamicControlABC)의 경우 레이블 중앙에 표시되는 반면 텍스트 상자 (DynamicControlTextbox1)의 경우에는 모서리 바깥쪽에 약 3px가 표시됩니다.
텍스트 상자에 따라 핸들의 위치를 변경하려고하면 핸들이 레이블 중앙으로 더 이동하고 그 반대의 경우도 마찬가지입니다 (스크린 샷을 게시했지만 이미지를 게시하는 데 평판 포인트가 10 개 이상 필요합니다 :(). 페이지를 보았습니다 . IE10과 Firefox 모두에서 동일한 결과를 산출합니다.
내 코드는 다음과 같습니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" href="css_custom/jquery-ui.css" type="text/css" />
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#btnEdit").click(function (e) {
SetButtonText();
ToggleEditMode();
});
function SetButtonText() {
$('#btnEdit').val(function (i, text) {
return text === "Edit" ? "Editing" : "Edit";
});
}
function ToggleEditMode() {
if ($("#btnEdit").val() != "Edit") {
$("*").filter("[id^=DynamicControl]"), function () {
$(this).resizable().parent('.ui-wrapper').draggable({ opacity: .45, cancel: "null" });
};
}
else {
$("*").resizable({ cancel: "*" }).draggable({ cancel: "*" });
}
}
</script>
</head>
<body>
<form id="MyForm" runat="server">
<asp:Label Text="ABCDEFGH" runat="server" ID="DynamicControlABC"></asp:Label>
<asp:TextBox runat="server" ID="DynamicControlTextbox1" Text="Text1"></asp:TextBox>
<input type="button" id="btnEdit" value="Edit" />
</form>
</body>
</html>
또한 여기에서 질문하는 것이 처음이므로 누락 된 것이 있으면 알려주십시오.
이것이 내가 jQuery-UI.js에서 한 일입니다. 다음 코드가 이미 존재합니다.
if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {
//Create a wrapper element and set the wrapper to the new current internal element
this.element.wrap(
$("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
position: this.element.css("position"),
width: this.element.outerWidth(),
height: this.element.outerHeight() ,
top: this.element.css("top") ,
left: this.element.css("left")
})
);
그리고 나는 이것을 레이블에 추가했습니다.
else if(this.element[0].nodeName.match(/label|span|div/i)) {
this.element.wrap(
$("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
position: this.element.css("position"),
width: this.element.outerWidth() + 7,
height: this.element.outerHeight() + 3,
top: this.element.css("top") ,
left: this.element.css("left")
})
);
이제 핸들이 레이블에 잘 표시됩니다.
크기 조정이 가능한 핸들이 이상하게 배치되는 이유는 범용 선택기 ( "*")를 사용하고 있으므로이 선택기를 사용하는 것이 나쁘지는 않지만 앱을 빌드하는 경우 사용하는 데 비용이 많이 듭니다. DOM 필터링
여기 내가 당신의 코드에서 무엇을했는지 살펴보십시오.
사소한 리팩토링 및 제거가있었습니다 (원하는대로 방법을 되돌릴 수 있음)
드래그 가능한 비활성화 대신 취소를 사용하는 이유를 모르겠습니다 (이것이 의도되었는지 알려주십시오)
$(document).ready(function (e) {
$("#btnEdit").click(function () {
resizableMode();
});
function resizableMode() {
//cache selectors
var $elem = $('[id^=DynamicControl]');
var $editBtn = $("#btnEdit");
//toggleText button
$editBtn.val(function (i, text) {
return text === "Edit" ? "Editing" : "Edit";
});
//set resizable to textbox
$elem.resizable();
//set states
if ($editBtn.val() !== "Edit") {
$elem.resizable('enable')
.parent('.ui-wrapper').draggable({ opacity: 0.45 , disabled:false });
} else {
$elem.resizable('disable')
.parent('.ui-wrapper').draggable({ disabled: true });
}
}
});
출력 참조
http://jsbin.com/sowah/1 (약간의 CSS 변경이 있습니다)
여기 http://jsbin.com/sowah/1/edit에서 편집 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다