因为自己在书中刚刚学习到ccui了,然后编写了一些案例,然后发现统计出来以后用好像方便点,所以就有了这个文档的存在了
文件全部能够跑成功,直接复制粘贴,修改图片路径以及初始的设置winSize=cc.winSize
//ccui图片创建 this.img=new ccui.ImageView(res.box); this.addChild(this.img); this.img.setPosition(winSize.width/2,winSize.height/2); //滑动条创建 this.slider=new ccui.Slider(); this.addChild(this.slider); //背景 this.slider.loadBarTexture(res.whitetiao); //滑块 this.slider.loadSlidBallTextures(res.black,res.black,res.black); //滑过后的 this.slider.loadProgressBarTexture(res.graytiao); this.slider.setPosition(winSize.width/2,winSize.height/3); //按钮创建 this.btn=new ccui.Button(); this.addChild(this.btn); this.btn.loadTextures(res.box,res.black,res.box); this.btn.setPosition(winSize.width/2,winSize.height/6); this.btn.setTouchEnabled(true); //文本的创建 this.text=new ccui.Text("789",res.white,40,50,"0"); this.text.setPosition(winSize.width/5,winSize.height/2); this.addChild(this.text); //复选框的创建 this.check=new ccui.CheckBox(); this.check.loadTextures( // 未选中常态纹理 res.box, // 背景选中状态纹理 res.black, // 勾选选中状态纹理 res.black, // 背景禁用状态纹理 res.box, // 勾选禁用状态纹理 res.box // 纹理类型 ); this.check.setTouchEnabled(true); this.check.setPosition(winSize.width/2,winSize.height/2-100); this.addChild(this.check); //加载条的创建 this.loading=new ccui.LoadingBar(); this.addChild(this.loading); this.loading.loadTexture(res.whitetiao); this.loading.setDirection(ccui.LoadingBar.TypeFloat); this.loading.setPercent(50); this.loading.setPosition(winSize.width/2,winSize.height-150); //创建一个Layout布局 this.layer=new ccui.Layout(); this.layer.setContentSize(100,100); this.layer.x=10; this.layer.y=10; this.layer.setBackGroundColor(cc.color(128,128,128)); this.layer.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID); this.addChild(this.layer,1); //滚动视图 this.scroll=ccui.ScrollView.create(); this.scroll.setDirection(ccui.ScrollView.DIR_VERTICAL);//滑动条方向 this.scroll.setTouchEnabled(true);//触摸开启 this.scroll.setBounceEnabled(true);//弹性开启 this.scroll.setSize(cc.size(960,400)); this.scroll.x=winSize.width/2; this.scroll.y=winSize.height/2; this.scroll.setAnchorPoint(cc.p(0.5,0.5)); this.addChild(this.scroll,10); this.scroll.setInnerContainerSize(cc.size(960, 80*9)); for(var i =0; i < 9; i++){ var sprite = new cc.Sprite(res.box); this.scroll.addChild(sprite); sprite.x= this.scroll.width/2; sprite.y= this.scroll.getInnerContainerSize().height + 40 - (i+1)*80; sprite.setAnchorPoint(cc.p(0.5,0.5)); } this.scroll.jumpToTop(); //创建一个分页视图 this.PageView=new ccui.PageView(); this.PageView.setTouchEnabled(true); this.PageView.setContentSize(cc.winSize); this.addChild(this.PageView); this.PageView.x=winSize.width/2; this.PageView.y=winSize.height/2; for(var i=0;i<3;i++){ var layout=new ccui.Layout(); this.PageView.addPage(layout); var imageView=new ccui.ImageView(res.box); layout.addChild(imageView); imageView.x=this.PageView.width/2; imageView.y=this.PageView.height/2; } this.PageView.addEventListener(function () { switch (type){ case ccui.PageView.EVENT_TURNING; var index=this.PageView.getCurrentPageIndex()+1; cc.log("当前第"+index+"页"); break; default: break; } }); //列表视图 this.ListView=new ccui.ListView(); this.addChild(this.ListView); this.ListView.setTouchEnabled(true); this.ListView.setContentSize(cc.size(240,120)); this.ListView.setDirection(); //编辑框的创建 this.textfield=new ccui.TextField("请输入账号","Arial",30); this.addChild(this.textfield); this.textfield.setPosition(winSize.width/2,winSize.height-100); this.textfield.addEventListener(this.ontext,this); //可以在case:ccui.TextField.EVENT_ATTACH_WITH_IME中添加一个Action,让textField向上moveTo //在case:ccui.TextField.EVENT_DETACH_WITH_IME:中添加一个moveTo回来 //可以解决在手机上键盘可能遮挡住textField控件的问题 //textField控件密码模式:node.setPasswordEnabled(true); //启用密码模式 //node.setpasswordStyleText("*") //设置密码样式 }, ontext:function (textField,type) { switch(type){ case ccui.TextField.EVENT_ATTACH_WITH_IME: cc.log("挂载到输入法编辑器"); break; case ccui.TextField.EVENT_DETACH_WITH_IME: cc.log("输入法编辑器失去挂载"); break; case ccui.TextField.EVENT_INSERT_TEXT: cc.log("输入法输入器输入"); break; case ccui.TextField.EVENT_DELETE_BACKWARD: cc.log("输入法编辑器删除"); break; default: break; } cc.log("编辑框中内容 ",textField.getString()); }