템플릿 컨트롤

이 컨트롤은 일부 HTML 콘텐츠를 내부에 포함하는 컨테이너입니다.

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"template", height:16, type:"template", map_to:"my_template"}, /*!*/
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

gantt.locale.labels.section_template = "Details";

gantt.attachEvent("onBeforeLightbox", function(id) {
      var task = gantt.getTask(id);
       task.my_template = "<span id='title1'>Holders: </span>"+ task.users
    +"<span id='title2'>Progress: </span>"+ task.progress*100 +" %";
    return true;
});

Template control

초기화

template 컨트롤을 라이트박스에 포함하려면 다음 단계를 따라야 합니다:

1. 라이트박스 설정에 섹션을 추가합니다:

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"template", height:16, type:"template", map_to:"my_template"}, /*!*/
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

2. 섹션에 대한 라벨을 정의합니다:

gantt.locale.labels.section_template = "Details";

3. onBeforeLightbox 이벤트와 같은 이벤트를 사용하여 컨트롤의 콘텐츠를 채웁니다:

gantt.attachEvent("onBeforeLightbox", function(id) {
      var task = gantt.getTask(id);
       task.my_template = "<span id='title1'>Holders: </span>"+ task.users
    +"<span id='title2'>Progress: </span>"+ task.progress*100 +" %";
    return true;
});

속성

template 컨트롤에서 자주 사용되는 주요 속성은 다음과 같습니다 (전체 목록은 여기를 참고하세요):

• name - (string) 섹션의 이름을 지정합니다
• height - (number) 섹션의 높이를 설정합니다
• map_to - (string) 섹션이 매핑되는 데이터 속성입니다
• type - (string) 섹션 컨트롤의 타입을 정의합니다
• focus - (boolean) true로 설정 시, 라이트박스가 열릴 때 해당 섹션에 포커스가 이동합니다