本人目前在做微信服务平台,需要使用到jquery mobile 来开发手机web应用,项目基本完成,小弟本人为了做技术积累,第一次写博客,有什么错误的地方,希望各位大神给予指点,顺便说一下,微信的公众号——广电医疗平台,是本人开发,5月1号上线,大家有兴趣可以去看看!
下面来我来总结个人对于JQM的学习知识、经验
1、登录JQM官网下载 http://jquerymobile.com/download/ ,目前jqm版本是1.4.2
2、jqm使用 ,新建HTML页面,在head标签中加入
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css'/>
<script type='text/javascript' src='js/jquery-1.7.min.js'></script>
<script type='text/javascript' src='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js'></script>
在HTML的body标签里面写下如下代码:
<div data-role='page' id='home' >
<div data-role='header'>头部</div>
<div data-role='content' class="content">主体</div>
<div data-role='footer'>底部</div>
</div>
这样就完成了第一个jqm 程序,简单的讲解一下,data-属性是HTML5提供的特性,他可以添加任意到HTML标签中,page 表示页面组件,一个page表示一个页面,在一个HTML中可包含多个page,默认显示第一个,header页面头部,content页面主体部分,footer底部
如何观看开发后的效果?
1、在电脑中观看,一般我使用谷歌浏览器(IE低版本不支持),缩小成手机屏幕大小效果和在手机上一样!(我都觉得好笑,哈哈......)
2、新建JQM站点。
3、如果你是使用笔记本,共享wifi热点(下载一个共享wifi热点的工具或者设置共享),手机连接wifi,使用手机浏览器访问你的jqm服务器,我使用的是tomcat。如果无法访问,记得开放端口,这个比较不安全!
4、将你做好的页面发送至网络云平台,例如:新浪云平台等等,然后使用手机浏览器访问云平台提供的URL地址,具体操作不一一讲解(百度)