The basic class of UI is introduced here, and the form is referenced in the form of createjs and.

In the widget currently divided into 2 types, one is the container type, a type. The difference is that you can add child controls.

Infrastructure widget: https://github. com/aiyoyoyo/jeesjs/blob/master/src/UI/Widget. Js.

Other UI controls are inherited by this type, convenient for jeesjs. Cm to manage common interfaces.

It's important to note that the methods of an orthographic event binding need to receive 2 arguments: Createjs, event, and jeesjs, widgets, or subclasses .

function test( _e, _w ){

//console.log( _e.type );//输出内容"click"

//console.log( _w.getWidget().id );//输出控件的id


new jeesjs.Widget().onEvent("click", test );

Panel panels: https://github. com/aiyoyoyo/jeesjs/blob/master/src/UI/Panel. Js.

Inheritance to widget, there are 2 parts, container objects _container And background. _shape .


 * CreateJS绘制容器

 * @property _container

 * @type {createjs.Container}


this._container = new createjs.Container();//用来添加新的控件,_shape用来显示和绑定事件。

Here's a pit, the container if the binding event, add the same event to the control at the same time. I didn't expect a good solution, first overload the electromagnetism event, binding events to _shape Object .


 * CreateJS图形控件

 * @property _shape

 * @type {createjs.Shape}


this._shape = new createjs.Shape();//用来绘制背景色和绑定事件

The following is a method of overloaded widget binding events.


 * 自定义绑定事件

 * @method onEvent

 * @param {String} _e 事件比如:"click"等。

 * @param {Function( createjs.Event, jeesjs.Widget )} _f( _e, _w ) _e为对应的事件信息,_w为触发事件的控件Widget

 * @extends


p.onEvent = function( _e, _f ){

 if( typeof _f!="function" ) throw"参数_f不是有效的方法类型";

 this._bind_event( _e, this._shape, _f );



 * 解绑控件弹起事件

 * @extends

 * @method unEvent

 * @extends


p.unEvent = function( _e ){

 this._unbind_event( _e, this._shape );


Examples of the use of the panel:

var Mod_Test = new jeesjs.Module();

ModTest.enter = function(){

 var p = new jeesjs.Panel();//主面板

 var p2 = new jeesjs.Panel( p );//子面板

 p.onEvent("click", test );

 p2.setColor("#ffff00" );

 p2.setPosition( 50, 50 );

 p2.onEvent("click", test );

 jeesjs.CM.addWidget( p );


jeesjs.APP.init( Mod_Test );

Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs