Cocos2d-JS项目之二:studio基础控件的使用

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

逻辑代码如下:

  1 var HelloWorldLayer = cc.Layer.extend({
  2     sprite:null,
  3     value : 90,
  4    // self : this,
  5     ctor:function () {
  6         //////////////////////////////
  7         // 1. super init first
  8         this._super();
  9
 10         /////////////////////////////
 11         // 2. add a menu item with "X" image, which is clicked to quit the program
 12         //    you may modify it.
 13         // ask the window size
 14         var size = cc.winSize;
 15
 16         this.initUI();
 17
 18         return true;
 19     },
 20
 21     //init ui
 22     initUI : function(){
 23         var mainscene = ccs.load(res.MainScene_json);
 24         this.addChild(mainscene.node);
 25
 26         var self = this;
 27         //   btn.addClickEventListener(this.btnClick);
 28         //   addTouchEventListener(this.backEvent,this);
 29
 30         var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
 31         btn.addClickEventListener(function(){
 32                 cc.log("btn_9 click: %d", self.value);
 33             });
 34
 35
 36         var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
 37         this.checkBox = checkBox;
 38         checkBox.addEventListener(this.selectedStateEvent, this);
 39
 40         //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
 41         // addEventListener 在按住并有移动时(值不一定有改变)就触发 //
 42         var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
 43         this.slider = slider;
 44         slider.addClickEventListener(function(){
 45             var percent = slider.getPercent();
 46             cc.log("addClickEventListener   %d", percent);
 47         });
 48
 49         slider.addTouchEventListener(function(){
 50             var percent = slider.getPercent();
 51             cc.log("addTouchEventListener   %d", percent);
 52         });
 53
 54         slider.addEventListener(this.sliderEvent,this);
 55
 56
 57         var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
 58         this.textFiel = textField;
 59         textField.addEventListener(this.textFieldEvent,this);
 60
 61         var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
 62         this.loadingBar = loadingBar;
 63        // loadingBar.addTouchEventListener();
 64
 65         var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
 66         this.label = label;
 67
 68         var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
 69         this.image = image;
 70
 71     },
 72
 73     selectedStateEvent: function (sender, type) {
 74         switch (type) {
 75             case ccui.CheckBox.EVENT_SELECTED:
 76                 //this._topDisplayText.setString("Selected");
 77                 cc.log("checkbox select");
 78                 this.image.setVisible(true);
 79                 break;
 80             case ccui.CheckBox.EVENT_UNSELECTED:
 81                 //this._topDisplayText.setString("Unselected");
 82                 cc.log("checkbox unselect");
 83                 this.image.setVisible(false);
 84                 break;
 85
 86             default:
 87                 break;
 88         }
 89     },
 90
 91     sliderEvent: function (sender, type) {
 92         switch (type) {
 93             case ccui.Slider.EVENT_PERCENT_CHANGED:
 94                 var slider = sender;
 95                 var percent = slider.getPercent();
 96                // this._topDisplayText.setString("Percent " + percent.toFixed(0));
 97                 cc.log("addEventListener   %f", percent);
 98                 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点, 如 123.
 99                 break;
100             default:
101                 break;
102         }
103     },
104
105     textFieldEvent: function (sender, type) {
106
107         switch (type) {
108             //get focus
109             case ccui.TextField. EVENT_ATTACH_WITH_IME:
110                 cc.log("attach with IME");
111                 break;
112             //lost focus
113             case ccui.TextField. EVENT_DETACH_WITH_IME:
114                 cc.log("detach with IME");
115                 break;
116             //insert word
117             case ccui.TextField. EVENT_INSERT_TEXT:
118                 var text = sender.getString();
119                 var percent = parseInt(text);
120                 this.loadingBar.setPercent(percent);
121               //  cc.log(text);
122                 break;
123             //delete word
124             case ccui.TextField. EVENT_DELETE_BACKWARD:
125                 //cc.log("delete word");
126                 var text = sender.getString();
127                 var percent = parseInt(text);
128                 this.loadingBar.setPercent(percent);
129                 break;
130             default:
131                 break;
132         }
133     }
134
135 });
时间: 2024-10-01 03:36:28

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

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

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

Cocos2d-JS studio基础控件的使用

在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: 1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:null, 3 value : 90, 4 // self : this, 5 ctor:function () { 6 ////////////////////////////// 7 // 1. super init first 8 this._super(); 9 10 /////////////

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

2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows Phone 外观的一部分.与旨在适合手机屏幕边界的标准应用不同,全景应用通过使用超出屏幕边界的长水平画布提供了一个查看控件.数据和服务的独特方式.这些固有的动态视图使用分层动画和内容,以便各层以不同的速度流畅地平移,类似于视差效果. 本主题包括以下部分. 全景控件概述 导航支持 全景应用功能 相关

HTML 基础控件介绍

HTML 基础控件介绍 主要介绍 input.select.textarea.label.fieldset.ul.ol.li等标签 目录 1. <input>标签:主要用于收集用户信息,可根据不同的type属性值,拥有多种形式. 2. <select>标签:可创建单选或多选菜单,类似于winform的combox或listbox. 3. <textarea>标签:多行文本区域. 4. <label>标签:相当于一个展示文本框. 5. <fieldset

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

WPF基础控件 系统默认提供的基础控件: 文本控件介绍与用法 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label控件的值记住:不是Text 而是 Content属性. TextBlock控件 TextBlock控件,是只读的文本框,无法进行编辑,比较适合显示文本,该文本内容不允许编辑的情况. TextBlock进行设置值的属性是Text 支持直接赋值和数据绑定的方式赋值. TextBox TextBox是支持编辑

0821基础控件(UILabel常用属性)

一.UILabel常用属性1--实例化和设置文字 // 实例化UILabel并指定其边框 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 210.0, 320.0, 40.0)]; // 设置label显示的文本 [label setText:@"Hello World"]; // 设置字体和字体大小 [label setFont:[UIFont fontWithName:@"Helvetica-B

0821基础控件(UIButton常用属性)

一.可以通过代码的方式创建UIButton 1.通用实例化对象方法: UIButton *button = [[UIButton alloc] initWithFrame:rect]; 2.快速实例化对象方法: UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 提示: 在OC开发中,实例化任何类型的非自定义对象,都请首先尝试一下是否存在快速定义方法.如果存在快速定义方法,就尽量不要使用init之类的方法实例

Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下:   1.UI控件与布局     2.MVVM     3.数据绑定     4.await/async     5.Linq查询     6.WCF RIA Services     7.序列化     8.委托与事件 1.UI控件与布局 常用的主要是Grid.StackPanel.Border,其中最常用的的是Grid,是一

iOS基础控件UINavigationController中的传值

iOS基础控件UINavigationController中的传值,代理传值,正向传值,反向传值 #import <UIKit/UIKit.h> //声明一个协议 @protocol SendValue<NSObject> //定义一个方法 - (void)sendBtnTitle:(NSString *)title; @end @interface FirstViewController : UIViewController // 定义代理 @property (nonatomi