xmlplus 구성 요소 디자인 시리즈 의 분리 상자(DividedBox)(8)

분리 상자(DividedBox)는 두 가지 로 나 눌 수 있 는 레이아웃 구성 요소 입 니 다.하 나 는 수평 분리 상자(HDividedBox)이 고 다른 하 나 는 수직 분리 상자(VDidedBox)입 니 다.수평 분리 상 자 는 하위 단 계 를 두 열 로 나 누고 수직 분리 상 자 는 하위 단 계 를 두 줄 로 나 눕 니 다.열 과 열 사이,줄 과 줄 사이 에는 하위 구성 요소 의 크기 를 바 꾸 기 위해 드래그 할 수 있 는 구분자 가 있 습 니 다.이 구성 요소 가 어떻게 설계 되 고 실현 되 는 지 수직 분리 상자 만 예 로 들 어 소개 합 니 다.
완제품 구성 요소 용례
예전 의 디자인 경험 에 따라 우 리 는 먼저 상상 속 의 완제품 구성 요소 의 사례 를 쓸 수 있 는데 이것 은 우리 의 후속 적 인 디자인 과 실현 에 도움 이 될 것 이다.수직 분리 상 자 는 레이아웃 류 의 구성 요소 이 므 로 용기 일 것 입 니 다.이 용 기 는 위 에서 언급 한 세 개의 피 드 급 구성 요 소 를 포함 하고 있 습 니 다.사용 편 의 를 위해 서,우 리 는 구분자 도 써 서 는 안 되 며,구분자 도 구성 요소 내부 에서 이 루어 져 야 한다.분석 을 통 해 우 리 는 다음 과 같은 응용 예 시 를 얻 었 다.

Example1: {
 css: "#example div { width: 80%; height: 80%; background: #AAA; }",
 xml: `<VDividedBox id="example">
    <div id='top'/>
    <div id='bottom'/>
   </VDividedBox>`
}

이 예 는 수직 분리 상자 구성 요소 로 두 개의 div 요 소 를 감 싸 고 있 습 니 다.여기 서 각각 두 개의 div 요소 의 너비 가 부모 급 의 80%이 고 배경 색 을 회색 으로 설정 합 니 다.이것 은 테스트 를 편리 하 게 하기 위해 서 입 니 다.또 키 상자 의 초기 비율 배분 문 제 를 고려 해 야 한다.우 리 는 기본 비율 을 50:50 으로 설정 할 수 있 습 니 다.비율 은 구성 요소 가 정례 화 될 때 정적 으로 지정 하고 비례 설정 의 동적 인 터 페 이 스 를 제공 하 는 것 이 좋 습 니 다.그래서 우 리 는 아래 의 개선 사례 가 생 겼 다.

Example2: {
 css: "#example div { width: 80%; height: 80%; background: #AAA; }",
 xml: `<VDividedBox id="example" percent='30'>
    <div id='top'/>
    <div id='bottom'/>
   </VDividedBox>`,
 fun: function (sys, items, opts) {
  sys.top.on("click", e => sys.example.percent = 50);
 }
}

이 사례 는 수직 분리 상자 가 초기 화 될 때 하위 상자 의 초기 비율 을 30:70 으로 설정 합 니 다.사용자 가 첫 번 째 하위 상 자 를 누 르 면 비율 분 배 는 50:50 으로 재 개 됩 니 다.그러나 이러한 비례 분 배 는 분리 조 가 차지 하 는 공간 을 제외 한 나머지 공간의 비례 분 배 를 말한다.
설계 와 실현
이제 우 리 는 주의력 을 구성 요소 의 내부 로 옮 깁 시다.우 리 는 먼저 구성 요소 의 기본 구성 을 대체적으로 확인한다.직관 적 으로 보면 수직 분리 상 자 는 세 가지 구성 요 소 를 포함 하 는 부분 을 보 여 줍 니 다.위 에 있 는 상자 부분,구분자 와 하위 상자 부분 입 니 다.그래서 우 리 는 잠시 아래 의 보기 항목 부분 을 얻 을 수 있 습 니 다.

VDividedBox: {
 xml: `<div id='hbox'>
   <div id='top'/>
   <div id='handle'/>
   <div id='bottom'/>
   </div>`
}

다음 단 계 는 수직 분리 상자 구성 요소 인 스 턴 스 의 하위 단계 부분 이 위 하위 상자 top 과 하위 상자 bottom 에 정확하게 매 핑 되 는 지 확인 합 니 다.방법 은 모든 하위 요소 대상 을 위 하위 상자 top 에 추가 한 다음 함수 항목 에 하위 요 소 를 하위 상자 bottom 에 추가 하 는 것 입 니 다.

VDividedBox: {
 xml: `<div id='hbox'>
   <div id='top'/>
   <div id='handle'/>
   <div id='bottom'/>
   </div>`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

이제 보기 항목 의 스타일 을 고려 해 보 겠 습 니 다.최상 위 div 요소 에 대해 서 는 상대 적 인 포 지 셔 닝 방식 을 설정 합 니 다.하위 급 의 세 요 소 는 절대 위치 로 설정 합 니 다.또 구분자 높이 를 5px 로 설정 했다.

VDividedBox: {
 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: `<div id='hbox'>
   <div id='top'/>
   <div id='handle'/>
   <div id='bottom'/>
   </div>`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

마지막 으로 구분자 의 드래그 이벤트 에 응답 하여 하위 상자 의 배분 비율 을 바 꾸 는 방법 을 보 여 줍 니 다.우 리 는 하위 상자 의 비율 을 바 꾸 는 함 수 를 정의 하고 구분자 의 드래그 사건 을 수사 해 야 한다.다음은 우리 의 실현 이다.

VDividedBox: {
 //      
 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});
 }
}

이 코드 의 맵 항목 에는 percent 형식 에 대한 설정 이 있 습 니 다.이 설정 은 percent 를 정형 수로 확보 합 니 다.또한 함수 항목 에서 하위 상자 의 비율 설정 은 css 3 의 calc 계산 함 수 를 사 용 했 습 니 다.변경 함 수 는 브 라 우 저 창 에서 큰 시간 동안 변 경 될 수 있 습 니 다.더 많은 브 라 우 저 를 호 환 하고 싶다 면 더 많은 일 을 해 야 합 니 다.또한 구성 요소 의 성능 을 향상 시 키 기 위해 서 는 사용자 가 끌 기 시작 할 때 만 사건 dragover 에 대한 수 사 를 실시 할 수 있 습 니 다.
한층 더 개선 하 다
두 텍스트 필드 를 하위 단계 로 하 는 수직 분리 상 자 를 포함 하 는 응용 인 스 턴 스 를 만 드 는 작은 테스트 를 해 보 겠 습 니 다.구분자 를 드래그 해서 어떤 결과 가 나 올 지 봅 시다.

Example3: {
 css: `#example textarea { width: 80%; height: 80%; }`,
 xml: `<VDividedBox id="example">
    <textarea id='top'/>
    <textarea id='bottom'/>
   </VDividedBox>`
}

이 예시 에서 때때로 칸막이 가 고장 나 고,상자 의 비율 은 칸막이 의 위치 에 따라 변 하지 않 는 다.문 제 는 텍스트 필드 에서 드래그 사건 을 납치 하여 우리 구성 요소 내부 에서 응답 을 받 지 못 하 는 사건 입 니 다.우 리 는 패 치 를 좀 해 야 한다.

VDividedBox: {
 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: "<div id='hbox'>\
   <div id='top'/>\
   <div id='handle' draggable='true'/>\
   <div id='bottom'/>\
   <div id='mask'/>\
   </div>",
 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});
 }
}

문 제 를 해결 하기 위해 서,우 리 는 구성 요소 에서 추가 div 요소 대상 mask 를 인 용 했 습 니 다.이 요 소 는 기본적으로 표시 되 지 않 습 니 다.드래그 가 시 작 될 때 만 하위 상자 와 분리 수 를 덮어 쓰 고 드래그 가 끝나 면 숨 깁 니 다.이렇게 하면 텍스트 필드 에서 드래그 사건 에 대한 납 치 를 피 할 수 있 습 니 다.
수평 분리 상자 와 결합 하여 사용
우 리 는 상술 한 수직 분리 틀 의 디자인 경험 을 가지 게 되 었 는데,수평 분리 틀 을 만 드 는 것 도 그리 어 려 운 일이 아니 니,여 기 는 열거 하지 않 겠 다.수평 분리 상자 와 수직 분리 상 자 를 종합 적 으로 사용 하 는 예제 입 니 다.물론 디자인 초기 에 우 리 는 이렇게 사용 할 줄 은 생각 하지 못 했다.

Example4: {
 css: `#example div { width: 100%; height: 100%; }`,
 xml: `<HDividedBox id='example'>
    <VDividedBox percent='30'>
     <div/><div/>
    </VDividedBox>
    <VDividedBox percent='30'>
     <div/><div/>
    </VDividedBox>
   </HDividedBox>`
}

이 예 는 분리 상자 에 끼 워 넣 을 때의 표현 을 보 여 주 는 데 주로 사용 된다.이 예제 에는 수평 분리 상자 가 포함 되 어 있 습 니 다.이 수평 분리 상 자 는 두 개의 수직 분리 상 자 를 포함 하고 있 습 니 다.이러한 구 조 는 많은 편집기 에서 흔히 볼 수 있 습 니 다.우 리 는 간단 하고 효율 적 으로 이 루어 졌 습 니 다.
이 시 리 즈 는 xmlplus 프레임 워 크 를 기반 으로 합 니 다.xmlplus 에 대해 잘 모 르 면 방문 할 수 있 습 니 다www.xmlplus.cn.여기에 참고 할 수 있 는 상세 한 입문 문서 가 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.