全部的cocos2d-js中的ccui创建的api

    因为自己在书中刚刚学习到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());
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值