给HelloWorld的show,hide方法中添加自定义事件show和hide
//事件的定义,提高代码阅读
HelloWorld.FIRES = {
show:'show',
hide:'hide'
}
HelloWorld.METHOD = {
show:function () {
this.get('el').fadeIn();
this.fire(HelloWorld.FIRES.show,{data:'showdata'});
},
hide:function () {
this.get('el').fadeOut();
this.fire(HelloWorld.FIRES.hide,{data:'hidedata'});
}
};
html代码:
<div id="container1">
<button id="btnhide" class="btn btn-shopping-cart btn-size30">
hide
</button>
<button id="btnshow" class="btn btn-taobao btn-size30">
show
</button>
<div id="helloworld1">
<span>Hello <span id="spanName">World</span></span>
</div>
</div>
js代码:
KISSY.use('helloworld',function(S,HelloWorld){
var helloworld = new HelloWorld({tmpl:'#helloworld1'});
helloworld.on('show',function (ev) {
top.console.log('自定义事件show触发,数据为'+ev.data);
});
helloworld.on('hide',function (ev) {
top.console.log('自定义事件hide触发,数据为'+ev.data);
});
S.one('#btnshow').on('click',function (e) {
helloworld.show();
});
S.one('#btnhide').on('click',function (e) {
helloworld.hide();
});
});