JavaScript 프레임워크(xmlplus) 구성 요소 소개(8) DividedBox
- 零下一度원래의
- 2017-05-06 15:29:011328검색
xmlplus는 프런트엔드 및 백엔드 프로젝트의 신속한 개발에 사용되는 JavaScript 프레임워크입니다. 이 글에서는 주로 xmlplus 레이아웃 컴포넌트의 분할 상자를 소개하는데, 이는 일정한 참고 값을 가지고 있습니다. 관심 있는 친구들은
분리 상자(pidedBox) 를 참조할 수 있습니다. 클래스 구성 요소는 두 가지로 나눌 수 있습니다. 하나는 수평 분리 상자(HpidedBox), 다른 하나는 수직 분리 상자(VpidedBox)라고 합니다. 수평 구분선 상자는 하위 항목을 두 개의 열로 나누고, 수직 구분선 상자는 하위 항목을 두 개의 행으로 나눕니다. 일반적으로 열과 행 사이에는 끌어서 하위 구성 요소의 크기를 변경할 수 있는 구분 막대가 있습니다. 다음에서는 이러한 구성 요소가 어떻게 설계되고 구현되는지 소개하기 위해 수직 분리 상자만을 예로 사용합니다.
완성된 컴포넌트의 사용 사례
과거의 디자인 경험에 따르면 먼저 완성된 컴포넌트의 사용 사례를 상상 속에서 적어볼 수 있습니다. 후속 추가 설계 및 구현에서 우리를 도와주세요. 수직 분리 상자는 레이아웃 클래스의 구성 요소이므로 위에서 언급한 세 가지 하위 수준 구성 요소를 포함하는 컨테이너여야 합니다. 사용 편의성을 위해 분리 상자를 작성하면 안 됩니다. 분리 상자는 구성 요소 내부에서 구현되어야 합니다. 분석 후 다음과 같은 적용 예를 얻습니다.
Example1: {
css: "#example p { width: 80%; height: 80%; background: #AAA; }",
xml: `<VpidedBox id="example">
<p id='top'/>
<p id='bottom'/>
</VpidedBox>`
}이 예는 두 개의 p 요소를 래핑하는 수직 분리 상자 구성 요소로 구성됩니다. 여기서는 두 p 요소의 너비와 높이를 상위 요소의 80%로 설정하고, 배경색을 회색으로 설정했습니다. 이는 단지 테스트의 편의를 위한 것입니다. 또한 서브프레임의 초기 비율 할당도 고려해야 합니다. 기본 비율을 50:50으로 설정할 수 있습니다. 비율 설정을 위한 동적 인터페이스를 제공하면서 구성 요소가 인스턴스화될 때 비율을 정적으로 지정하는 것이 가장 좋습니다. 따라서 다음과 같은 향상된 사용 사례가 있습니다.
Example2: {
css: "#example p { width: 80%; height: 80%; background: #AAA; }",
xml: `<VpidedBox id="example" percent='30'>
<p id='top'/>
<p id='bottom'/>
</VpidedBox>`,
fun: function (sys, items, opts) {
sys.top.on("click", e => sys.example.percent = 50);
}
}이 사용 사례는 수직 분리 상자가 초기화될 때 하위 상자의 초기 비율 분포를 30:70으로 설정합니다. 사용자가 첫 번째 하위 상자를 클릭하면 비율 분포가 50으로 복원됩니다. :50. 단, 이 비율은 구분선이 차지하는 공간을 제외한 나머지 공간의 비율을 의미합니다.
설계 및 구현
이제 구성 요소의 내부에 주목해 보겠습니다. 먼저 구성 요소의 기본 구성을 대략적으로 결정해 보겠습니다. 직관적으로 수직 구분선 상자 디스플레이는 상단 하위 프레임 부분, 구분선 막대, 하단 하위 프레임 부분의 세 가지 구성 요소로 구성됩니다. 따라서 다음 뷰 항목 부분을 일시적으로 얻을 수 있습니다.
VpidedBox: {
xml: `<p id='hbox'>
<p id='top'/>
<p id='handle'/>
<p id='bottom'/>
</p>`
}다음으로 수직 구분 기호 구성 요소 인스턴스의 하위 부분이 위쪽 하위 상자 상단과 아래쪽 하위 상자 하단에 올바르게 매핑되었는지 확인합니다. 방법은 먼저 상위 하위 상자 상단에 모든 하위 요소 개체를 추가한 다음 기능 항목의 하위 하위 상자 하단에 하위 하위 요소를 추가하는 것입니다.
VpidedBox: {
xml: `<p id='hbox'>
<p id='top'/>
<p id='handle'/>
<p id='bottom'/>
</p>`,
map: {appendTo: "top" },
fun: function (sys, items, opts) {
sys.bottom.elem().appendChild(this.last().elem());
}
}이제 하위 뷰 항목의 스타일을 고려해 보겠습니다. 최상위 p 요소의 위치 지정 방법을 상대 위치 지정으로 설정했습니다. 세 개의 하위 요소는 절대 위치 지정으로 설정됩니다. 또한 구분선 높이를 5px로 설정합니다.
VpidedBox: {
css: `#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }
#top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }
#top,#bottom { left: 0; right: 0; position: absolute; }
#handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }`,
xml: `<p id='hbox'>
<p id='top'/>
<p id='handle'/>
<p id='bottom'/>
</p>`,
map: {appendTo: "top" },
fun: function (sys, items, opts) {
sys.bottom.elem().appendChild(this.last().elem());
}
}마지막으로 구분선의 드래그 이벤트에 응답하여 하위 상자의 할당 비율을 변경하는 방법을 살펴보겠습니다. 하위 상자의 비율을 변경하고 구분 막대의 드래그 이벤트를 수신하는 함수를 정의해야 합니다. 다음은 우리의 구현 중 하나입니다.
VpidedBox: {
// 视图项同上
map: { format: {"int": "percent"}, appendTo: "top" },
fun: function (sys, items, opts) {
var percent = 50;
sys.handle.on("dragstart", function (e) {
sys.hbox.on("dragover", dragover);
});
sys.hbox.on("dragend", function (e) {
e.stopPropagation();
sys.hbox.off("dragover", dragover);
});
function dragover(e) {
e.preventDefault();
setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
}
function setPercent(value) {
sys.handle.css("top", value + "%");
sys.top.css("height", value + "%");
sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
}
setPercent(opts.percent || percent);
sys.bottom.elem().appendChild(this.last().elem());
return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
}
}위 코드의 매핑 항목에는 퍼센트 형식에 대한 설정이 있어 퍼센트가 정수임을 보장합니다. 또한 CSS3의 계산 기능을 사용하여 기능 항목의 하위 상자 비율을 설정합니다. 브라우저 양식의 크기가 변경되어도 수정된 기능이 계속 작동할 수 있습니다. 더 많은 브라우저와 호환되려면 더 많은 작업을 수행해야 합니다. 또한 구성 요소의 우수한 성능을 보장하기 위해 사용자가 드래그를 시작할 때만 dragover 이벤트가 수신됩니다.
추가 개선 사항
이제 작은 테스트를 수행하여 두 개의 텍스트 필드를 하위 항목으로 포함하는 세로 구분 상자의 적용 예를 작성해 보겠습니다. 구분선을 드래그하여 무슨 일이 일어나는지 확인하세요.
Example3: {
css: `#example textarea { width: 80%; height: 80%; }`,
xml: `<VpidedBox id="example">
<textarea id='top'/>
<textarea id='bottom'/>
</VpidedBox>`
}이 예에서는 구분선 표시줄이 오작동하는 경우가 있고 구분선 위치에 따라 하위 상자 비율이 더 이상 변경되지 않는 경우가 있습니다. 문제는 텍스트 필드가 드래그 이벤트를 가로채서 구성 요소가 응답 이벤트를 수신하지 못하게 한다는 것입니다. 패치를 좀 해야 합니다.
VpidedBox: {
css: "#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }\
#top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }\
#top,#bottom { left: 0; right: 0; position: absolute; }\
#handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }\
#mask { width: 100%; height: 100%; position: absolute; display: none; z-index: 10; }",
xml: "<p id='hbox'>\
<p id='top'/>\
<p id='handle' draggable='true'/>\
<p id='bottom'/>\
<p id='mask'/>\
</p>",
map: { format: {"int": "percent"}, appendTo: "top" },
fun: function (sys, items, opts) {
var percent = 50;
sys.handle.on("dragstart", function (e) {
sys.mask.show();
sys.hbox.on("dragover", dragover);
});
sys.hbox.on("dragend", function (e) {
sys.mask.hide();
e.stopPropagation();
sys.hbox.off("dragover", dragover);
});
function dragover(e) {
e.preventDefault();
setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
}
function setPercent(value) {
sys.handle.css("top", value + "%");
sys.top.css("height", value + "%");
sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
}
setPercent(opts.percent || percent);
sys.bottom.elem().appendChild(this.last().elem());
return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
}
}문제를 해결하기 위해 구성 요소에 추가 p 요소 개체 마스크를 참조했습니다. 이 요소는 기본적으로 표시되지 않습니다. 드래그가 시작되면 하위 상자와 구분 표시줄을 덮고, 드래그가 끝나면 다시 숨겨집니다. 이렇게 하면 텍스트 필드가 드래그 이벤트를 가로채는 것을 방지할 수 있습니다.
가로분할틀과 조합하여 사용
위의 세로분할틀 설계 경험이 있어 가로분할틀 제작이 어렵지 않습니다. 프레임은 여기에 나열되지 않습니다. 여기서는 주로 수평분리박스와 수직분리박스를 종합적으로 사용하는 예를 들어보겠습니다. 물론 디자인 초기에는 이런 식으로 활용할 생각은 하지 않았습니다.
Example4: {
css: `#example p { width: 100%; height: 100%; }`,
xml: `<HpidedBox id='example'>
<VpidedBox percent='30'>
<p/><p/>
</VpidedBox>
<VpidedBox percent='30'>
<p/><p/>
</VpidedBox>
</HpidedBox>`
}이 예제는 주로 구분선 상자가 중첩되었을 때의 성능을 보여주기 위해 사용됩니다. 이 예에는 두 개의 수직 분리 상자가 포함된 수평 분리 상자가 포함되어 있습니다. 이 레이아웃은 많은 편집기에서 매우 일반적이므로 여기서는 간단하고 효율적으로 구현했습니다.
이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.
【관련 추천】
3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼
위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(8) DividedBox의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!