HTML5开发实战——Sencha Touch篇(2)
来源:互联网 发布:中国产能利用率数据 编辑:程序博客网 时间:2024/06/06 05:04
一般的APP,页面的基本布局都是一样的,下面是几个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的基本框架。
在正常的开发中,为了让开发的过程更加清晰简单,我们可以一个一个界面来写,最后再把它们加到一个界面中,实现我们想要的效果。
2 0
- HTML5开发实战——Sencha Touch篇(2)
- HTML5开发实战——Sencha Touch篇(1)
- HTML5开发移动web应用——Sencha Touch篇(4)
- HTML5开发移动web应用——Sencha Touch篇(5)
- HTML5开发移动web应用——Sencha Touch篇(6)
- HTML5开发移动web应用——Sencha Touch篇(7)
- HTML5开发移动web应用——Sencha Touch篇(8)
- HTML5开发移动web应用——Sencha Touch篇(9)
- HTML5开发移动web应用——Sencha Touch篇(10)
- HTML5开发移动web应用——Sencha Touch篇(11)
- HTML5开发移动web应用——Sencha Touch篇(12)
- 移动web应用开发——Sencha Touch篇(2)
- 移动web应用开发——Sencha Touch篇(2)
- Sencha Touch视频教程 Sencha Touch实战OA系统开发
- 移动开发HTML5框架 Sencha Touch 2 Beta 发布
- Sencha Touch 2 Web App 项目开发实战一
- 移动开发框架Sencha Touch开发实战
- 移动web应用开发——Sencha Touch篇(1)
- 学习笔记------数据结构(C语言版)串的定长顺序存储表示
- bzoj1692 队列变换
- ORA-09817错误
- 数据结构实验之链表六:有序链表的建立
- 【SoapUI】在soapui中使用Groovy脚本常用方法
- HTML5开发实战——Sencha Touch篇(2)
- 学习笔记
- 关于博客的头像问题
- 从windows客户端sqlplus连接Oracle 12c PDB报错ORA-65162: The password has expired
- BlogApp之spring整合Guava中的AsyEventBus异步事件
- Machine Learning - An Introduction
- hdu3341Lost's revenge (AC自动机+变进制dp)
- C语言几种整形类型的区别
- hdu 1055(贪心)