WZDAPI DEV.CENTER

WZDAPI.UI.Drawer

메소드

종류	설명
show()	펼친 상태로 변경합니다.
hide()	닫힘 상태로 변경합니다.
toggle()	접은 경우 펼친 상태, 펼쳐진 경우 접은 상태로 변경합니다.
setMainContent(DOMElement el)	메인 화면 content를 설정합니다.
setSubContent(DOMElement el)	보조 화면 content를 설정합니다.

이벤트

종류	설명
onChange(boolean)	화면이 바뀔때마다 발생합니다.

미리보기

예제코드

var dday = widget.body.getElementsByClassName('ddaywidget')[0];
var english = widget.body.getElementsByClassName('englishwidget')[0];

var drawer = new WZDAPI.UI.Drawer();
drawer.setMainContent(dday);
drawer.setSubContent(english);

drawer.appendTo(widget.body.getElementsByClassName('drawer')[0]);

<div class="ddaywidget">...</div>
<div class="drawer"><div class="enligshwidget">...</div></div>

WZDAPI.UI.DropDown

메소드

종류	설명
addMenu(String id, {text: String})	text 문자열을 가진 메뉴를 추가합니다.
selectMenu(String id)	메뉴를 선택합니다.
setWidth(Number width)	메뉴 너비를 설정합니다.
appendTo(DOMElement el)	탭 컨트롤을 el의 마지막 자식으로 붙입니다.

이벤트

종류	설명
onChange(String id)	메뉴가 바뀔 때 발생합니다.

미리보기

예제코드

var dropmenu = new WZDAPI.UI.DropDown();
dropmenu.setWidth(170);

dropmenu.addMenu('candy', {text: '캔디'});
dropmenu.addMenu('love', {text: '러비'});
dropmenu.addMenu('field', {text: '필드'});
dropmenu.addMenu('fight', {text: '화이팅'});
dropmenu.addMenu('simple', {text: '심플'});
dropmenu.addMenu('purple', {text: '보라돌이'});

dropmenu.appendTo(widget.body.getElementsByClassName('thememenu')[0]);
dropmenu.onChange = function(id) {
    this._elements.theme.removeClassName(widget.getValue('theme'));
    this._elements.theme.addClassName(id);
    widget.setValue('theme', id);
}.bind(this);

<div class="thememenu"></div>
<div class="theme ddaywidget candy">
    <div class="wrapper">
        <div class="container">
            <div class="dday">D-day</div>
            <div class="desc"><span class="title"></span></div>
        </div>
    </div>
</div>

WZDAPI.UI.Pager

메소드

종류	설명
setMaxPageNumber(Number num)	총 페이지 수를 설정합니다.
selectPage(Number pageNo)	페이지를 선택합니다.
appendTo(DOMElment el)	페이지 컨트롤을 el의 마지막 자식으로 붙입니다.

이벤트

종류	설명
onChange(Number pageNo)	페이지가 바뀔 때 발생합니다.

미리보기

예제코드

WZDAPI.Data.getXml('http://rss.allblog.net/AllPosts.xml', function(xml) {
    _data = xml.getElementsByTagName('item');

    var pager = new WZDAPI.UI.Pager();
    pager.setMaxPageNumber(Math.ceil(_data.length / _count));
    pager.onChange = allblog.load;
    pager.appendTo(widget.body.getElementsByClassName('pager')[0]);
    pager.selectPage(1);
});

<div class="container" style="display: none;">
    <ul></ul>
    <div class="bottomBar">
        <div class="wrap">
            <div class="pager"></div>
            <div class="clear"></div>
        </div>
    </div>
</div>

WZDAPI.UI.TabView

메소드

종류	설명
WZDAPI.UI.TabView(Number type)	탭 형식을 지정합니다. (현재 TYPE1, TYPE2 제공)
addTab(String id, {text: String, content: DOMElement})	탭을 추가합니다.
selectTab(String id)	탭을 선택합니다.
appendTo(DOMElement el)	탭 컨트롤을 el의 마지막 자식으로 붙입니다.
getTabContent(String id)	탭 ID에 해당하는 탭 content를 반환합니다.
getCurrentTabContent()	현재 탭 content를 반환합니다.
setTheme(Number theme)	탭 형식에 맞는 테마를 지정합니다.

이벤트

종류	설명
onChange(String)	탭이 바뀔 때 발생합니다.

미리보기

WZDAPI.UI.TabView.TYPE1

1. setTheme(1)

   

WZDAPI.UI.TabView.TYPE2

1. setTheme(1)

   

2. setTheme(2)

   

3. setTheme(3)

   

4. setTheme(4)

   

예제코드

var tabs = widget.body.getElementsByClassName('tab');
var tab = new WZDAPI.UI.TabView(WZDAPI.UI.TabView.TYPE2);
tab.setTheme(2);
tab.addTab('candy', {text: '캔디', content: tabs[0]});
tab.addTab('love', {text: '러브', content: tabs[1]});
tab.addTab('field', {text: '필드', content: tabs[2]});
tab.addTab('fight', {text: '화이팅', content: tabs[3]});
tab.selectTab('candy');
tab.appendTo(widget.body.getElementsByClassName('tabview')[0]);

<div class="tabview"></div>
<div class="theme candy tab" style="display: none;">
    <div class="wrapper">
        <div class="container">
            <div class="dday">+1000</div>
            <div class="desc"><span class="title">위자드웍스</span></div>
        </div>
    </div>
</div>