SINGLE 스타일로 컴포넌트를 여러 개 사용하는 예제입니다.
- 설명
-
하나의 페이지에 여러 개 컴포넌트를 SINGLE 스타일로 동시에 사용할 수 있습니다.
LIST, TILE 형식으로 여러 컴포넌트를 사용하는 방법과 매우 유사하지만, SINGLE 형식은 가상파일을 지원하지 않고, 단 하나의 파일만 업로드할 수 있는 차이점이 있습니다.
<!-- 컴포넌트 2개를 담을 컨테이너를 정의합니다. --> <!-- SINGLE 형식이므로 높이값을 작게 설정합니다. --> <div id="dext5-container-a" style="width:500px; height:28px;"></div> <div id="dext5-container-b" style="width:500px; height:28px;"></div> <!-- 실제 업로드를 담당할 컴포넌트를 담을 컨테이너를 정의합니다. --> <!-- 업로더는 눈에 잘 보이지 않도록 1px의 컨테이너로 정의합니다. --> <div id="dext5-container-uploader" style="width:1px; height:1px;"></div>
컴포넌트를 정의합니다.
// SINGLE 형식은 버튼이 내장되어 있으므로 버튼을 정의하지 않습니다. dx5.create({ mode: "multi", style: "single", id: "dext5-a", parentId: "dext5-container-a" }); dx5.create({ mode: "multi", style: "single", id: "dext5-b", parentId: "dext5-container-b" }); // 업로드 역할을 담당하는 컴포넌트는 여러 개 파일을 동시에 업로드해야 하기 때문에 SINGLE로 정의하지 않도록 합니다. dx5.create({ mode: "multi", id: "dext5-uploader", parentId: "dext5-container-uploader" });
그 외에 파일을 업로드하는 과정은 앞선 예제와 동일합니다.
- 예제
-
파일 업로드 A 영역 (ID: dext5-a)
파일 업로드 B 영역 (ID: dext5-b)