在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件

逻辑代码如下:

 var HelloWorldLayer = cc.Layer.extend({
sprite:null,
value : ,
// self : this,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super(); /////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// you may modify it.
// ask the window size
var size = cc.winSize; this.initUI(); return true;
}, //init ui
initUI : function(){
var mainscene = ccs.load(res.MainScene_json);
this.addChild(mainscene.node); var self = this;
// btn.addClickEventListener(this.btnClick);
// addTouchEventListener(this.backEvent,this); var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
btn.addClickEventListener(function(){
cc.log("btn_9 click: %d", self.value);
}); var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
this.checkBox = checkBox;
checkBox.addEventListener(this.selectedStateEvent, this); //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
// addEventListener 在按住并有移动时(值不一定有改变)就触发 //
var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
this.slider = slider;
slider.addClickEventListener(function(){
var percent = slider.getPercent();
cc.log("addClickEventListener %d", percent);
}); slider.addTouchEventListener(function(){
var percent = slider.getPercent();
cc.log("addTouchEventListener %d", percent);
}); slider.addEventListener(this.sliderEvent,this); var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
this.textFiel = textField;
textField.addEventListener(this.textFieldEvent,this); var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
this.loadingBar = loadingBar;
// loadingBar.addTouchEventListener(); var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
this.label = label; var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
this.image = image; }, selectedStateEvent: function (sender, type) {
switch (type) {
case ccui.CheckBox.EVENT_SELECTED:
//this._topDisplayText.setString("Selected");
cc.log("checkbox select");
this.image.setVisible(true);
break;
case ccui.CheckBox.EVENT_UNSELECTED:
//this._topDisplayText.setString("Unselected");
cc.log("checkbox unselect");
this.image.setVisible(false);
break; default:
break;
}
}, sliderEvent: function (sender, type) {
switch (type) {
case ccui.Slider.EVENT_PERCENT_CHANGED:
var slider = sender;
var percent = slider.getPercent();
// this._topDisplayText.setString("Percent " + percent.toFixed(0));
cc.log("addEventListener %f", percent);
this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点, 如 123.
break;
default:
break;
}
}, textFieldEvent: function (sender, type) { switch (type) {
//get focus
case ccui.TextField. EVENT_ATTACH_WITH_IME:
cc.log("attach with IME");
break;
//lost focus
case ccui.TextField. EVENT_DETACH_WITH_IME:
cc.log("detach with IME");
break;
//insert word
case ccui.TextField. EVENT_INSERT_TEXT:
var text = sender.getString();
var percent = parseInt(text);
this.loadingBar.setPercent(percent);
// cc.log(text);
break;
//delete word
case ccui.TextField. EVENT_DELETE_BACKWARD:
//cc.log("delete word");
var text = sender.getString();
var percent = parseInt(text);
this.loadingBar.setPercent(percent);
break;
default:
break;
}
} });

Cocos2d-JS项目之二:studio基础控件的使用的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  2. Cocos2d-JS studio基础控件的使用

    在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: 1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:nu ...

  3. 【高德地图API】从零開始学高德JS API(二)地图控件与插件——測距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    不管是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发人员使用.降低开发人员工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,相似谷歌 ...

  4. Android Studio 基础控件使用

    TextView android:gravity="center" //文字对其方式 top bottom left right center android:textColor= ...

  5. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  6. WP8.1学习系列(第十二章)——全景控件Panorama开发指南

    2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows ...

  7. 【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件

    上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式. 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface. 定义子控件的的 props. 定义 json 文件 ...

  8. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  9. WCF学习(二)对控件简单了解以及4个文本控件的简介

    WPF基础控件 系统默认提供的基础控件: 文本控件介绍与用法 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label控件 ...

随机推荐

  1. Debian修改ssh端口和禁止root远程登陆设置

    linux修改端口22vi /etc/ssh/sshd_config找到#port 22将前面的#去掉,然后修改端口 port 1234重启服务就OK了service sshd restart或/et ...

  2. Javascript开发之工具归纳

    写在前面 由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架.工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了.社区的力量果然强大---也是由此 ...

  3. ubuntu apache2 wsgi 部署django

    入题 分为如下几步 1.安装python 2.安装django 3.安装wsgi,如有问题请参照上一篇 ubuntu 编译安装 mod_wsgi 4.与apache集成这里主要讲这部分 环境apach ...

  4. 数据库优化实践【TSQL篇】

    在前面我们介绍了如何正确使用索引,调整索引是见效最快的性能调优方法,但一般而言,调整索引只会提高查询性能.除此之外,我们还可以调整数据访问代码和TSQL,本文就介绍如何以最优的方法重构数据访问代码和T ...

  5. Linux:环境变量

    环境变量 变量 变量定义:declare tmp,declare是可选的. 变量赋值:tmp=1,=号左右不要有空格. 变量引用:echo $tmp,不要忘记了$号. 环境变量 简单理解了变量的概念, ...

  6. HTML Meta标签知多少

    文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验 一.基本属性 标签常常被用来定义HTML文档的元数据或者HTTP协议的指向,这些元数据常用在SEO.HTML Pages or ...

  7. 支持事件穿透?使用pointer-events样式

    使用绝对定位元素,让元素A完全盖住元素B时,如何通过元素A来响应元素B的事件呢? 上图可以用下面的SVG代码来实现: <svg width="200" height=&quo ...

  8. javax.persistence.PersistenceException: No Persistence provider for EntityManager named ...

    控制台下输出信息 原因:persistence.xml必须放在src下META-INF里面. 若误放在其他路径,就会迷路.

  9. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  10. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...