WebApp(JqueryMobile) 实战(一) 推荐 原创 BruceAndLee 2014-12-17 22:58:34 博主文章分类:Web app ©著作权 文章标签 jquery mobile demo 文章分类 jQuery 前端开发 ©著作权归作者所有:来自51CTO博客作者BruceAndLee的原创作品,请联系作者获取转载授权,否则将追究法律责任 其实WebApp这个版块已经放置一段时间了,但是一直没有写文章,那是因为我还在学习中。今天的话,我们就来写一篇关于布局的,以前在没有BootStrap,Jquery EasyUI,Jquery Mobile之前不论是做web项目还是web 移动站点都是那么费劲,尤其是我这种学不会css的人,实在是搞不了前台。OK,废话不多说,我们来看一下今天要仿制的页面,手机头条网。看到了吧,这个界面如果用BootStrap的话可能更简单一些,因为它是单纯的三列或者两列布局,利用Bootstrap的网格系统可以很好的布局出来。那今天的话还是用Jquery Mobile css。首先看一下最顶端的头部,我的代码如下@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"在这里我们设置头部不会在点击屏幕的时候缩回去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是 <div class="ui-grid-b">这个css就把屏幕分成了相等的三份。然后我们在每一份放我们的元素。效果如上,那么这个圆圈图片是怎么实现的呢,很简单,css3很好实现,将下面的css应用到图片即可。.img-corner { border-radius: 50%; }OK,头部还有一个Nav bar,这个其实将div的data-role设置为navbar,然后在div中嵌套<ul><li>。头部的这个导航条如果被点击的话,它的颜色会变,这个功能是Jquery Mobile实现的,我们不需要做什么。头部说完了我们看内容页,为了简单,有一些css我直接写在元素上。<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",看一下效果怎么样,还行吧。OK,我们接着看下面的布局,下面的布局我在使用Jquery mobile的网格系统的时候没有查到像BootStrap那样的跨列功能。所以我暂时先用50%/50%的网格。第一个网格我们放置文字,第二个网格我们放置图片。需要注意的是上面的两个height,我们设置总高度为150,设置文字的高度为135,那么小文字的高度为15,此时我们设置小文字所在的层的float:left,因为高度不够,它就会自动沉底。如上图,小字都沉底了。OK,其实真个头条网都采用这样的布局方式,其实我们只需要在数据库表创建好类型(是一行文字+一行3图片+小字或者是左边文字(打字加小字)+右边图片),标题,小字内容,图片我们就可以动态生成或者加载页面,这个是我下节要实现的内容。最后我们还给这个页面加了foot。@section Footer { <div data-role="footer" data-theme="c" data-position="fixed" data-fullscreen="true"> <h3><label style="color:red">头条网,一个神奇的网站!</label></h3> </div> }头条网,一个神奇的网站。这个脚我们设置点击屏幕时该脚会收缩。好了,我们看一下全部页面的效果收缩掉脚,我们再看看OK,页面今天就到这里,最后告诉大家怎么创建移动项目的点击确定选择移动应用程序,确定,项目就创建好了。最后,大家如果需要源码的话去下载,下载请点击这里源码 赞 收藏 评论 分享 举报 上一篇:ASP.NET MVC4+BootStrap 实战(四) 下一篇:WebApp(JqueryMobile) 实战(二) 提问和评论都可以,用心的回复会被更多人看到 评论 发布评论 全部评论 () 最热 最新 相关文章 开源即时通讯(IM)项目OpenIM源码部署指南 OpenIM的部署涉及多个组件,并支持多种方式,包括源码、Docker和Kubernetes等。这要求在确保不同部署方式之间的兼容性同时,还需有效管理各版本之间的差异。确实,这些都是复杂的问题,涉及到深入的技术细节和精准的系统配置。我们的目标是简化部署流程,同时保持系统的灵活性和稳定性,以适应不同用户的需求。目前3.5版本已经简化了部署流程,而且这个版本会长期维护,欢迎大家使用。1. 环境及组件要 IP TCP 配置项 NLP项目实战02:英文文本识别 今天我们将讨论一个新的自然语言处理任务——英文短文识别。具体而言,即通过分析输入的英文文本来判断其是比较消极的还是比较积极的………… 词云 数据 Test NLP 人工智能 TS项目实战一:流淌的字符动画界面 使用ts实现虚拟世界,创建ts项目,并编写ts代码,使用tsc编译后直接加载到html界面,实现类似帝国中的流淌的代码界面的效果。 ts TypeScript 网页 ts项目 ts实战 WebApp(JqueryMobile) 实战(二) 天比较冷,在这里我就不费话了,本片还是介绍前台布局,看下图,用过Android手机的用户都知道打开UC浏览器之后会出现下面的网址导航界面。 看到了吧,就是这两张,一个是主界面,一个是展开Collapse后的界面。OK,那么我们先看一下第一张图的布局,首先先看一下head部分,引用了JqueryMobile的css以及JqueryMobile js还有一个angular.js,一个诞生于2 jquery mobile angular ng-repeat Cordova webapp实战开发:(1)为什么选择 Cordova webapp? 很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建筑云运维项目时使用过。 时隔几年,我在 《掌中广材产品经理日志(1)- 妈的,不想再呆在广联达了》写到,今年初我到了工信部负责一款之前已经做过一年多的APP,这款产品叫做掌中广材,大家可以各 Cordova webapp webapp商城实战,12月最新上线项目全解析 最近很多开发的朋友反馈企业中对于VUE的要求不在仅仅只是知道全家桶,而更多是VUE项目实战,拿到一个项目如何从脚手架搭建、到项目结构的部署、到具体模块的开发......针对vue项目我今天整理了一套【webAPP商城实战项目】,话不多话,直接上项目效果图和具体代码,效果图如下:01第一部分:vue-cli脚手架的搭建一、安装node.js进入官网下载node.js 二、安装cnpm1、说明: java Cordova webapp实战开发:(1) - (7) http://www.cnblogs.com/zhoujg/category/694786.html Javascript maven创建webapp项目 一、Eclipse配置1、eclipse集成用户自己安装的jdk2、eclipse集成用户自己安装的maven3、eclipse集成用户自己安装的tomcat4、去掉spell5、修改字体 小四二、maven创建webapp项目new-->other-->maven project->use default workspace location(选择工作目录即可,不必命名项目文件 其他 ja linux部署webapp项目 Linux是一种常用的操作系统,广泛应用于服务器端的Web应用程序开发和部署。在Linux上部署Web应用项目,可以利用各种工具和技术来简化和加快部署过程。其中,红帽(Red Hat)作为一家知名的Linux发行版提供商,为用户提供了丰富的工具和技术支持,让部署Web应用项目变得更加简单和高效。在Linux上部署Web应用项目,首先需要选择适合的开发工具和技术栈。对于开发人员来说,选择一个强大 Web 开发人员 开发工具 maven项目中添加webapp maven项目中添加webapp1)项目创建我们建立了一个非常简单的web应用,再新建index.jsp页面,修改启动方式为tomcat启动如果部署好,可以访问该页面就成功啦! java tomcat jsp web maven webapp项目前端总结 整体把握,从设计稿入手——技术选型并行开发,从实现静态页面开始前端自动化前端js逻辑前后端集成小问题集合总结1.整体把握,从设计稿入手 —— 技术选型新项目到手,算是运气好,设计稿都已经全部完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。 项目主要要求: 1. 兼容PC、微信、移动端,兼容现代浏览器,IE9+等 1. 嵌入到安卓、ios客户端和微信,要求页面独立 1. webapp 前端 html bootstrap 静态页面 Vue项目实战篇二:实现一个完整的新闻WebApp客户端(带前端源码下载) Vue基础篇一:编写第一个Vue程序Vue基础篇二:Vue组件的核心概念Vue基 vue.js 前端 web app Vue ico 【视频+源码】JAVA CMS系统项目实战 Spring常用注解redis视频集合,看完这些别说不会redis01 CMS系统功能需求简介02 如何 数据库 python java mysql Javascript springcloud 实战 源码 springcloud项目源码 文章目录OpenFeign是什么?实现原理1. FeignClient的bean注册过程2.OpenFeign调用过程3. OpenFeign Configuration总结 本文主要针对 spring-cloud-starter-openfeign 的 2.2.3.RELEASE 版本进行源码的解析。OpenFeign是什么?作为Spring Cloud的子项目之一,Spring Cloud springcloud 实战 源码 java 学习 spring boot 客户端 redis项目实战源码 redis 项目 文章目录Redis - 一个简单的抢红包小项目1.项目分析2.项目准备3.项目编写4.项目验证5.项目总结 Redis - 一个简单的抢红包小项目1.项目分析 抢红包功能在如今已经是一个社交产品不可或缺的功能了,包括微信、支付宝等等各大厂商软件都实现了抢红包的这个功能。实现抢红包的方式有很多种,但其实这也是属于Redis的一个比较常见的应用场景。这里我们就围绕着Redis技术来实现抢红包这个功能 redis项目实战源码 Java Redis spring 布隆过滤器 spark项目实战案例附源码 spark项目实战代码 文章目录WordCount 案例案例流程图代码实现TopKey 案例sortByKeysortBytop代码实现 WordCount 案例案例流程图首先集群存在单词数据代码实现package cn.kaizi.sparkimport org.apache.spark.rdd.RDDimport org.apache.spark.{SparkConf, SparkContext}/** spark项目实战案例附源码 scala spark 数据 hadoop java ssm企业项目源码 ssm开发实战项目源码 环境:IDEAMySql5.7以上Tomcat7.0以上Maven3.0以上运用Spring MyBatis,mysql 简单前端知识总结来说,配置地狱,各种配置,恶心到吐,还是springboot香,但是总要有个过程吧,难受完了,你会看到新的曙光1.简洁的运行截图,花里胡哨可以自己加,基础的增删改查CRUD工程师2.数据库建表,我这里是navicatCREA java ssm企业项目源码 spring mysql java intellij idea Springcloud项目源码 springcloud项目实战视频 SpringCloud的电商系统Spring Cloud ES Redis FastDFS Kafka 等主流框架构建的电商系统,一个可实际落地的电商项目,以下是学习课程目录和核心功能,有视频和源码1.框架搭建- 电商项目介绍- 微服务环境搭建- 数据库搭建2.分布式存储系统- FastDFS原理讲解- 文件上传- 文件下载3.商品发布- 表结构梳理- 代码生成器的使用- Springcloud项目源码 spring cloud spring 后端 功能实现 基于ssm架构的开源项目源码 ssm项目实战源码 这里写目录标题技术建项目的过程pom.xmlweb.xmlapplicationContext.xmldispacherServlet-servlet.xmlmybatis-config.xmlmbg.xml(javaben自动生成的配置文件)dbconfig.properties 技术spring/springmvc/mybatis/mysql8/bootstrap(前端框架加不加无所谓)/ 基于ssm架构的开源项目源码 spring xml java android项目实战博学谷项目源码 博学谷android项目实战答案 本项目是用eclipse软件编写,经过我的亲自实践,其真实有效,希望能给您有所帮助?? 项目版本:android5.1.1 AVD建议:android4.4.2及以上 BoXueGu源码资源下载链接:BoXueGu图片资源下载(免费):https://yuyunyaohui.lanzoui.com/iWos0pyc4rc效果图: 在设置界面主要包含了修改密码、设置密保、退出登录等功能。当用户点击 android项目实战博学谷项目源码 android 安卓 eclipse 修改密码