欢迎访问 licqi IT技术
我们一直在努力

WebApp(JqueryMobile) 实战(一)

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

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

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

@section Header
{
    

今日头条

  • 推荐
  • 热点
  • 社会
  • 娱乐
  • 科技
}

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

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

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

.ui-bar-f {
    background-color: red;
    color: white;
    font-weight: bold;
    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是

这个css就把屏幕分成了相等的三份。

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

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

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

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

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

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

什么人会买二手车?这四类人才是最精明的消费者


《芈月转》孙俪近照曝光网友:太美了!

初二女生收到情书,超牛老妈只说了五句话!

那些发生在汽车历史上的第一次!

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

那么第一部分我们布局就可以采用

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

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

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

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

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

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

@section Footer
{
    

}

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

收缩掉脚,我们再看看

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

点击确定

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

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

赞(0) 打赏
未经允许不得转载:licqi IT技术 » WebApp(JqueryMobile) 实战(一)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏