HTML5花销实战_58彩票app下载

HTML5支出实战——Sencha Touch篇(2)

诚如的应用程式，页面包车型客车主干布局都以雷同的，上边是多少个tab，用来张开选取以完结页面切换的成效。点击差别的按键，分界面就能够切换成分歧的内容。Sencha Touch中得以非常轻便的进展那样的操作。

首先，大家要鲜明大家在此边要运用TabPanel创立。看名就可见意思，该器件在分界面包车型地铁穷奢极欲加多tab况兼能够由此tab举办页面切换。幼功代码如下：

launch:function(){
         Ext.Viewport.add({
                   Xtype:’tabpanel’,//选择tabpanel作为主面板
                   tabBarPosition:’bottom’，//该属性设定tab的位置
                   items:[
                            //定义页面主题内容
                            {
         title:’Home’,
         iconCls:’home’,
         cls:’home’,
         html:[//这里写html页面主题部分代码].join(“”)
},
//……]
});
}

大家来动脑一下Sencha Touch中该器件的特征，定义了该器件后，能够由此tabBarPosition来设定tab所在的任务。常常景观下都在尾部。接下来，大家能够经过items来定义TabPanel中所包蕴的内容。每定义一个items，其实不仅仅定义了tab开关的源委，也定义了它对应的页面的内容。

以地点的代码为例，我们今日概念了二个title为Home的tab，同期还为它设定了icon。此中的html属性里面包车型大巴内容，写的便是tab页面内的剧情。能够直接行使正规的html代码编写，也足以顺便CSS样式等。它和tab这些相应的按键是绑定在一块的。通过这种格局大家得以定义多个tab分界面，也就重新组合了整整app的骨干框架。

在平常的支出中，为了让开垦的进程越发清晰轻易，我们得以四个三个分界面来写，最后再把它们加到三个分界面中，落成大家想要的法力。

Touch篇(2) 日常的应用软件，页面包车型大巴中央布局都是意气风发律的，上边是多少个tab，用来实行选用以高达页面切换的功效。点击分化的...

HTML5开垦实战——Sencha Touch篇(1)

读书了许多主导的Sencha Touch内容，已经精通了Sencha Touch的付出方式。接下来意气风发段时间大家将选取Sencha Touch来实行和谐的web应用营造。先要消除的是前面三个的标题，从最简便的动手，一个骨干的报到分界面。

最简便易行的记名分界面大要由以下介个成分构成：客商头像部分、客商名输入部分、密码输入部分、提交开关。大家从这种虽简单的分界面开首，稳步张开分界面落成。

一、创立主面板

Ext.require('Ext.Panel');
Ext.application({
 name:'MyApp',
 icon:'image/icon.png',
 glossOnIcon:false,
 phoneStartupScreen:'img/phone_startup.png',
 tabletStartupScreen:'img/tablet_startup.png',
 launch:function(){
  var mainPanel = Ext.create('Ext.Panel',{
   id:'mainPanel',
   fullscreen:true,
   scrollable:'vertical',
   html:'Here is the text'
  });
  Ext.Viewport.add(formPanel);
 }
});

二、增添头像图片

1、定义img组件

  var img = Ext.create('Ext.Img',{
   src:'pic.png',
   width:100,
   height:100,
   cls:'pic'  
  });

2、通过cls设置职责，pic类代码卸载style里，让图片居中展现

.pic{
 margin:0 auto;
 margin-top:30px;
}

3、将图片组件增加到面板中

var mainPanel = Ext.create('Ext.Panel',{
   id:'mainPanel',
   fullscreen:true,
   scrollable:'vertical',
   items:[img]
  });

三、加多表单输入框

直接在mainPanel 的items中添加：

    items:[img,{
     xtype:'textfield',
     id:'username',
     name:'username',
     required:'true',
     placeHolder:'Please enter the username...',
     clearIcon:true
    },{
     xtype:'passwordfield',
     id:'password',
     name:'password',
     required:'true',
     placeHolder:'Please enter the password...',
     clearIcon:true  
    }]

留意：分裂组件id名无法同生机勃勃：不然独有首先个零器件会收效，其余id相近的零器件不出示

再给第4个输入框增多三个体裁：cls:’inp’，用来与图片增添一些相差同期跟下三个输入框有三个分水岭：

  .inp{
   margin-top:20px;
   border-bottom:2px solid #CCC;
  }

四、增多按键

同理，相似的法子在items中编辑按键js代码

    {
     xtype:'button',
     text:'Log in',
     cls:'btn' 
    }

cls样式代码：

  .btn{
   height:50px;
   margin:0 auto;
   width:90%;
   background:#39F;
   color:white;
   margin-top:30px;
  }

如上就足以兑现二个相仿qq登陆的简短分界面了。通过一步一步达成，慢慢调节Sencha Touch在实质上采纳中前端部分的基本思路，并且注意轻巧发生Bug的地点。

Touch篇(1) 学习了许十核心的Sencha Touch内容，已经明白了Sencha Touch的花费形式。接下来豆蔻梢头段时间咱们将选取Sencha Touch来...

编辑：计算机网络本文来源：HTML5花销实战

关键词：