cocos studio 版本： V2.3.1.2
cocos js版本： V3.6.1
转：http://cn.cocos2d-x.org/tutorial/show?id=2820
代码：http://download.csdn.net/detail/chuanyu/8991313
代码用法： 用cocos studio 新建一个空白项目，然后把代码复制覆盖
1.cocos studio中编辑界面
：左下角 资源栏，导入图片资源，然后在Layer.csd中编辑图片，按钮等所有界面中用到的资源，在MainScene.csd中编辑与外部界面的位置信息等
：中间最大的图形界面，可以对图片，按钮进行拖动，缩放等操作
：右边是对应的属性值的配置， 其中的 属性--》名称 到时候在代码编辑中需要据此获取。
：下面是图形，按钮等的动作属性，动画之类
中间 ： 首先是 一个 pageView控件，然后依次是3个 Layout， Layout里面包含2张图片
2. 编辑代码
加载整个界面并显示：
levelSelectionScene = ccs.load(res.main_scene_json).node; //将levelSelectionScene对象加入到layer中。
this.addChild(levelSelectionScene); //从levelSelectionScene中获取控件并注册监听事件。
获取界面中的某个按钮：
startButton = ccui.helper.seekWidgetByName(levelSelectionScene, "Button_Enter");
设置按钮的一些属性：
leftButton.setTouchEnabled(false); //设置按钮为禁用状态。
leftButton.setBright(false); //设置光亮
leftButton.addTouchEventListener(this.leftRightButtonTouchEvent); //设置监听函数
leftRightButtonTouchEvent:function(sender,type){ //根据触发事件的类型进行分情况处理，从控制台输出cc.log();
switch (type) {
case ccui.Widget.TOUCH_BEGAN:
cc.log("loginButton Touch Began"); break;
case ccui.Widget.TOUCH_MOVED:
cc.log("loginButton Touch Moved"); break;
case ccui.Widget.TOUCH_ENDED:
cc.log("loginButton Touch ENDED; break;
default: break;
}
获取文字控件：
numberText = ccui.helper.seekWidgetByName(levelSelectionScene, "LabelAtlas_CurrentScene");
重新设置文字值：
numberText.setString(number + "/3");
pageView控件：
pageView = ccui.helper.seekWidgetByName(levelSelectionScene, "PageView_SelectPage"); //获取pageView控件
pageView.addCCSEventListener(this.pageViewStateChanged); //增加监听事件
//pageView控件触发事件的处理函数
pageViewStateChanged:function(sender,type){
switch (type) { //pageView当前所在的page的index发生了变化。
case ccui.PageView.EVENT_TURNING:
cc.log("PageView Event Turning");
cc.log(pageView.getCurPageIndex()); break;
default: break;
}
},
pageView显示不同的view：
pageView.scrollToPage(index);