jQuery MiniUI,快速开发WebUI界面

使用sencha touch开发新浪微博iphone界面


相信不少sencha touch的粉丝们都为Javascript能开发出手机Web App应用而感到兴奋。虽然Sencha Touch提供相当多的原生UI组件,但是利用原生UI开发出来的Web App的UI未必能完全满足手机上的UI设计。

本文将以iphone版本的新浪微博的“更多”界面,介绍如何利用Sencha Touch设计“更多”的界面。

本次示例将以iphone界面作为参考,使用Sencha Touch开发设计模仿iphone界面。

首先,将以iphone下述的界面目标作为参考:

Sencha Touch将采用以下UI组件:
Ext.Panel Ext.List

首先,建立一个html5页面和一个js页面,如下代码:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>demos</title>
		<link rel="stylesheet" type="text/css" href="sencha-touch.css" />
		<script type="text/javascript" src="sencha-touch-debug.js"></script>
		<script type="text/javascript" src="sencha.js" charset="utf-8"></script>
	</head>
	<body>
	</body>
    </html>

sencha.js先增加setup以便文档加载完后初始化Panel组件,如下代码:

Ext.setup({
	onReady: function() {
        var moreObj;
        moreObj = Ext.extend(Ext.Panel, {
            layout : 'card',
            initComponent : function() {
                moreObj.superclass.initComponent.call(this,arguments);
            }
        })

        new moreObj({
            fullscreen : true,
            scroll : 'vertical'
        });

    }
});

完成初始化Panel组件后,界面将存在一个Panel的UI,此时并没有任何内容,现在添加一个list以便显示更多数据列表。在initComponent初始化函数内增加以下一段Ext.list代码:

this.list5 = new Ext.List({
      itemTpl: '<tpl if="needsIcon"><img width="26" height="26" src="images/{icon}.jpg" align="absmiddle" /></tpl>{name}',
      store: new Ext.data.Store({
             fields: ['name','icon','needsIcon'],
             data: [
                    {"name" : "直接登录","icon":'login',"needsIcon":true},
                    {"name" : "找回密码","icon":'password',"needsIcon":true},
                    {"name" : "声音提示","icon":'sound',"needsIcon":true},
                    {"name" : "关于我们","icon":'version',"needsIcon":false},
                    {"name" : "问题反馈","icon":'question',"needsIcon":true},
                    {"name" : "客服电话","icon":'phone',"needsIcon":true},
                    {"name" : "软件版本0.92","icon":'version',"needsIcon":true}
             ]
        }),
        title: 'title1'
});

完成list的初始化后,将list加入到外部Panel中,在initComponent增加如下代码:

this.listpanel = new Ext.Panel({
       title: '更多',
       items: [this.list5]
})
this.items = [this.listpanel];

此时大部分sencha代码都基本完毕,效果如下图:

相信大家都看到此时的界面仍然不是我们所想要的微博更多界面,那我们现在开始对该list界面进行修饰一翻,在初始化Ext.list内部增加以下几个属性:

ui: 'round',
scroll : false,
margin : '10 15 10 15'

增加属性margin是为了list的数据和上下左右的边框距离远一点,以便更好展示按钮效果。

接着,在html5页面上增加一个css文件,以便对list的ui进行定制,如下导入css文件:

<link href="test.css" rel="stylesheet" />

在sencha.js里面的list组件增加两个css属性,如下代码:

cls : 'list2',
itemCls : 'list2_item',

第一个cls为list组件的class属性,第二个为list组件的每个数据项各自的class属性

最后在test.css文件内增加以下css代码,以便修正每个数据项的位置以及风格:

.list2{
    -webkit-border-radius : 10px;
}

.list2 .x-list-item{
    background-color : #FFF;
    border:1px solid silver;
    -webkit-border-radius : 10px;
}

.list2 .x-list-item:first-of-type{
    margin : 0 0 15px 0;
    border-top:1px solid silver;
}
.list2 .x-list-item:nth-of-type(2){
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(3){
    border-top:0px;
    margin : 0 0 15px 0;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(4){
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(5){
    border-top:0px;
    -webkit-border-radius:0px;
}
.list2 .x-list-item:nth-of-type(6){
    border-top:0px;
    margin : 0 0 15px 0;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(7){
    margin : 0 0 15px 0;
}

.list2 .x-item-selected:last-child{
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
.list2 .x-item-selected:first-of-type{
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}

.list2 img{
    margin-right:10px;
}

此处的css更多的是利用radius属性对每个选项的的四个角进行圆角效果,由于list的每个数据项都需要分组,css里面则采用nth-of-type等选择符自定义分组,因此存在一定的局限性。

此时代码已经基本完成。效果图如下:

这样,iphone微博更多UI界面已经制作完成。目前对于此解决方案,存在一种局限性,list数据需固定、分组需固定,暂时无法做到数据的实时性等功能。

源代码地址下载:
点击下载

作者: 三桥
原文: http://www.imsankyu.com/archives/sencha-touch-develop-sina-weibo-iphone-page/