jquery mobile 学习笔记——入门基础(一)

时间:2022-11-28 17:09:25

本人目前在做微信服务平台,需要使用到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>

jquery mobile 学习笔记——入门基础(一)
jquery mobile 学习笔记——入门基础(一)
3、开发基础页面

在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地址,具体操作不一一讲解(百度)