WebApp(JqueryMobile) 实战(一)-阿里云开发者社区

开发者社区> 技术小阿哥> 正文

WebApp(JqueryMobile) 实战(一)

简介:
+关注继续查看

其实WebApp这个版块已经放置一段时间了,但是一直没有写文章,那是因为我还在学习中。今天的话,我们就来写一篇关于布局的,以前在没有BootStrap,Jquery EasyUI,Jquery Mobile之前不论是做web项目还是web 移动站点都是那么费劲,尤其是我这种学不会css的人,实在是搞不了前台。OK,废话不多说,我们来看一下今天要仿制的页面,手机头条网。

wKioL1SRkYnBfzswAAk72X4qGuY482.jpg

看到了吧,这个界面如果用BootStrap的话可能更简单一些,因为它是单纯的三列或者两列布局,利用Bootstrap的网格系统可以很好的布局出来。那今天的话还是用Jquery Mobile css。

首先看一下最顶端的头部,我的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@section Header
{
    <div data-role="header" data-theme="f" data-tap-toggle="false" data-position="fixed" data-fullscreen="false">
        <div class="ui-grid-b">
            <div class="ui-block-a"><img class="img-corner" style="padding:3px" width="40" height="40" src="~/Image/IMG_20140531_170818.jpg" /></div>
            <h3 class="ui-block-b" style="text-align:center;">今日头条<img height="25" width="25" src="~/Image/ic_popup_sync_6.png" /></h3>
            <div class="ui-block-c" style="padding:5px;text-align:right"><img src="../Image/ic_menu_search.png" width="30" height="30" /></div>
        </div>
        <div data-role="navbar" style="background-color:red;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:lightyellow">
            <ul>
                <li><a class="a-header" href="#">推荐</a></li>
                <li><a class="a-header" href="#">热点</a></li>
                <li><a class="a-header" href="#">社会</a></li>
                <li><a class="a-header" href="#">娱乐</a></li>
                <li><a class="a-header" href="#">科技</a></li>
            </ul>
        </div>
    </div>
}

其实这里我们使用Jquery Mobile css中的一些样式及属性。我们看一下data-role="header"

wKioL1SRk4uhyT_xAAGtACgkUsM176.jpg

在这里我们设置头部不会在点击屏幕的时候缩回去data-tap-toggle="false",这样当页面内容随着滚动条上移时,会被头部盖住。data-theme="f"这个是我自己定义的主题,主题可以是a-z。而Jquery Mobile css默认只提供了五种主题。

wKioL1SRlNahMLirAACipLbUpqk766.jpg

所以f需要自己定义,我们来看一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.ui-bar-f {
    background-colorred;
    colorwhite;
    font-weightbold;
    height:45px;
    font-family:微软雅黑;
}
 
.img-corner {
    border-radius: 50%;
}
 
.a-header {
    text-decoration:none;
    color:white;
}
 
body {
    font-family:微软雅黑;
    background-color:white;
}
 
.img-shrink {
    height:150px;
    width:100%;
    border:1px solid white;
}
 
.news-footer {
    font-size:10px;
}

第一个css就是我们自己定义的主题,必须是以ui-bar-[a-z]来命名。头部的话在这里共分了三列,因为我们的第一个div是 <div class="ui-grid-b">这个css就把屏幕分成了相等的三份。

wKioL1SRmZTR9ErGAADWRX7Ip9E387.jpg

然后我们在每一份放我们的元素。

wKiom1SRlaLweQL3AABBzX3CPA4571.jpg

效果如上,那么这个圆圈图片是怎么实现的呢,很简单,css3很好实现,将下面的css应用到图片即可。

1
2
3
.img-corner {
    border-radius: 50%;
}

OK,头部还有一个Nav bar,这个其实将div的data-role设置为navbar,然后在div中嵌套<ul><li>。

wKioL1SRl6fjGgEdAABC2akFt6M358.jpg

头部的这个导航条如果被点击的话,它的颜色会变,这个功能是Jquery Mobile实现的,我们不需要做什么。


头部说完了我们看内容页,为了简单,有一些css我直接写在元素上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<div style="font-family:微软雅黑">
    <p><b>什么人会买二手车?这四类人才是最精明的消费者</b></p>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <img class="img-shrink" src="~/Image/News/1.jpg" />
        </div>
        <div class="ui-block-b" style="padding-left:5px;padding-right:5px;">
            <img class="img-shrink" src="~/Image/News/2.jpg" />
        </div>
        <div class="ui-block-c">
            <img class="img-shrink" src="~/Image/News/3.jpg" />
        </div>
    </div>
    <div class="news-footer">
        <label>第一车网</label>
        <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
        <label>200</label>
        <div style="float:right">
            <label>刚刚</label>
            <img src="~/Image/News/add.jpg" width="12" height="12" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:150px">
        <div class="ui-block-a">
            <div style="height:135px"><b>《芈月转》孙俪近照曝光网友:太美了!</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label>海外网</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                125
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/tvphoto.jpg" style="width: 100%; height: 150px;" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:100px">
        <div class="ui-block-a">
            <div style="height:85px"><b>初二女生收到情书,超牛老妈只说了五句话!</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label>达达兔</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/qingshu.jpg" style="width: 100%;" />
        </div>
    </div>
    <hr />
    <div class="ui-grid-a" style="height:100px">
        <div class="ui-block-a">
            <div style="height:85px"><b>那些发生在汽车历史上的第一次!</b></div>
            <div class="news-footer" style="float:left;width:100%">
                <label style="background-color:red;color:white;border-radius:20%">推广</label>
                <label style="margin-left:10px">上海通用</label>
                <img style="margin-left:15px" src="/Image/News/pencil.png" width="12" height="12" />
                751
                <div style="float:right;margin-right:10px">
                    <img src="~/Image/News/add.jpg" width="12" height="12" />
                </div>
            </div>
        </div>
        <div class="ui-block-b" style=" border: 1px solid white;">
            <img src="~/Image/News/car.jpg" style="width: 100%; height: 100px;" />
        </div>
    </div>
    <hr />
 
</div>

其实我们观察一下,就会发现,第一行是标题,第二行是三个图片,第三行是一些其他的信息。

那么第一部分我们布局就可以采用<p><div><div>完成这三部分。第一行没什么说的,第二行我们使用网格系统,将屏幕分成三列,每列一张图,最后一行需要注意这个"刚刚+"是在右边,需要使用float="right",看一下效果

wKiom1SRmE_CymWqAAFRcuogNW0422.jpg

怎么样,还行吧。OK,我们接着看下面的布局,下面的布局我在使用Jquery mobile的网格系统的时候没有查到像BootStrap那样的跨列功能。所以我暂时先用50%/50%的网格。

第一个网格我们放置文字,第二个网格我们放置图片。

wKiom1SRmXzQqko-AAIKAmPQJo8417.jpg

需要注意的是上面的两个height,我们设置总高度为150,设置文字的高度为135,那么小文字的高度为15,此时我们设置小文字所在的层的float:left,因为高度不够,它就会自动沉底。

wKiom1SRmozCXkgnAAEsTn1Ezmw098.jpg

如上图,小字都沉底了。OK,其实真个头条网都采用这样的布局方式,其实我们只需要在数据库表创建好类型(是一行文字+一行3图片+小字或者是左边文字(打字加小字)+右边图片),标题,小字内容,图片我们就可以动态生成或者加载页面,这个是我下节要实现的内容。

最后我们还给这个页面加了foot。

1
2
3
4
5
6
@section Footer
{
    <div data-role="footer" data-theme="c" data-position="fixed" data-fullscreen="true">
        <h3><label style="color:red">头条网,一个神奇的网站!</label></h3>
    </div>
}

wKiom1SRm4zQFDyjAADaJDKaTvc931.jpg

头条网,一个神奇的网站。这个脚我们设置点击屏幕时该脚会收缩。好了,我们看一下全部页面的效果

wKiom1SRnH7wrp6nAANQK3I6BxE866.jpg

收缩掉脚,我们再看看

wKioL1SRnV6D6wxGAANf4L6h_QM802.jpg

OK,页面今天就到这里,最后告诉大家怎么创建移动项目的

wKioL1SRnxbR4WaDAAOi4QTty8U565.jpg

点击确定

wKioL1SRn2nBWP3aAAI-1NJTi6g394.jpg

选择移动应用程序,确定,项目就创建好了。

最后,大家如果需要源码的话去下载,下载请点击这里源码



本文转自 BruceAndLee 51CTO博客,原文链接:http://blog.51cto.com/leelei/1591204,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26425 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2753 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10820 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11824 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8653 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12037 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7216 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21557 0
13694
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载