学习JQueryMobile框架（1）
来源：互联网 发布：列主源矩阵分解法 编辑：程序博客网 时间：2024/05/01 12:10
1.关于JQueryMobile框架的基本页面搭建。
需要工具：DW CS5.5 版本的开发工具。
最新版的JQM的架包（写文档时最新的为1.3.0）
DW有移动程序开发的模板，新建一个站点并且有相应的模拟器启动方法。
a.每新建一个HTML页都需要有这样的头：
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--JQueryMobile引用-->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" />
<script src="jquery-mobile/jquery-1.8.2.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
红色区域必须有的引入，例子引的是本地站点的文件，也可以连接服务器上的文件，官网推荐连接服务器上的这种方式，（我认为如果移动终端未联网或许会获取不到，为了保险我还是习惯于用本地文件。）如下：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
b.JQM的页面结构
<body>
<!------------------------------------------------首页导航---------------------------------------------------->
<div data-role="page" id="page">
<div data-role="header">
<h1>首页</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#makeListViewPage" data-rel="dialog">Make a listview</a></li>
<li><a href="#addUIView" data-transition="pop">Add UIView</a></li>
<li><a href="page2.html" data-prefetch data-ajax="false">第 4 页</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
</body>
标签属性：
JQM的标签是在正常的HTML的标签中加入data-attribute调去API中的相应的属性来进行设置。
<div data-role="page" id="page"> 表示当前这个div是一个页面体，标识是data-role="page"。
<div data-role="header"> 表示当前这个div是一个页面体的头，标识是data-role="header"。
<div data-role="content">表示当前这个div是一个页面体的内容，标识是data-role="content"。
<div data-role="footer">表示当前这个div是一个页面体的底部，标识是data-role="footer"。
以上是整个页面体的主要标签，所有标签都是成对出现的，并且在标签中还可以使用正常的HTML语言和CSS样式。
<ul data-role="listview">表示当前这个ul是一个listview，标识是data-role="listview"。并且listview的使用必须是ul的HTML标签。
<a href="#makeListViewPage" data-rel="dialog">Make a listview</a>表示当前的想要连接的页面是以一个对话框的形式展现的。标识是data-rel="dialog"。
<a href="#addUIView" data-transition="pop">Add UIView</a>表示当前想要连接的页面的转场效果的改变。标识是data-transition="pop"，还有几个效果，可以试试。
<a href="page2.html" data-prefetch data-ajax="false">第 4 页</a>表示当前连接的页面不在同一个DOM中，因为同一个DOM中的页面都是ajax来控制的，所以不在同一个DOM中的转场需要关闭ajax的控制，标识是data-ajax="false"。
标识data-prefetch，表示当前要跳转的页面需要预加载，也就是在同一个DOM都加载完成后，浏览器会上后台去加载有这个表示的HTML页面，但是需要注意的是这种情况多的话，会加重浏览器内存的消耗，从而使程序变卡，直到崩溃，尤其是安卓的终端。
C.页面的UIView(listview slider button)
代码如下：
<div data-role="content" style="height:500px;">
<!---------------加个滑动条 Add a slider--------------->
<!--
注意：这个滑动条是用html5新的input类型“range”写的，不需要 data-role属性。务必把他放到form标签内，并且与label 元素相关联。
-->
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
<!---------------加个按钮 Add Button--------------->
<form>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="a">Touch me theme A</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="b">Touch me theme B</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="c">Touch me theme C</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="d">Touch me theme D</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="e">Touch me theme E</a>
</form>
</div>
以上代码表示，我在一个页面体的内容中加入一个滑动条和按钮。
滑动条代码表示：在一个form表单中加入了一个label和一个rang类型的input，由于这个滑动条是用html5新的input类型“range”写的，不需要 data-role属性。务必把他放到form标签内，并且与label 元素相关联。
按钮代码表示：在一个form表单中加入一个a标签但是类型是JQM的button（data-role="button"） 并且按钮上的图标显示为info的样式的（data-icon="info"还有许多样式可以自己选择） 并将这个按钮图片的位置放在按钮的最左端（data-iconpos="left"）并且给按钮设置不同的样式（data-theme="a" 官网说一共有26个 因为就有26个字母，每个样式就是a-z）
<!---------------listview补充--------------->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
以上代码表示：在一个listview的列表展现形式上，每一行有边框的效果（data-inset="true"）并且要有一个查询的框（data-filter="true"）
需要工具：DW CS5.5 版本的开发工具。
最新版的JQM的架包（写文档时最新的为1.3.0）
DW有移动程序开发的模板，新建一个站点并且有相应的模拟器启动方法。
a.每新建一个HTML页都需要有这样的头：
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--JQueryMobile引用-->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" />
<script src="jquery-mobile/jquery-1.8.2.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
红色区域必须有的引入，例子引的是本地站点的文件，也可以连接服务器上的文件，官网推荐连接服务器上的这种方式，（我认为如果移动终端未联网或许会获取不到，为了保险我还是习惯于用本地文件。）如下：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
b.JQM的页面结构
<body>
<!------------------------------------------------首页导航---------------------------------------------------->
<div data-role="page" id="page">
<div data-role="header">
<h1>首页</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#makeListViewPage" data-rel="dialog">Make a listview</a></li>
<li><a href="#addUIView" data-transition="pop">Add UIView</a></li>
<li><a href="page2.html" data-prefetch data-ajax="false">第 4 页</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
</body>
标签属性：
JQM的标签是在正常的HTML的标签中加入data-attribute调去API中的相应的属性来进行设置。
<div data-role="page" id="page"> 表示当前这个div是一个页面体，标识是data-role="page"。
<div data-role="header"> 表示当前这个div是一个页面体的头，标识是data-role="header"。
<div data-role="content">表示当前这个div是一个页面体的内容，标识是data-role="content"。
<div data-role="footer">表示当前这个div是一个页面体的底部，标识是data-role="footer"。
以上是整个页面体的主要标签，所有标签都是成对出现的，并且在标签中还可以使用正常的HTML语言和CSS样式。
<ul data-role="listview">表示当前这个ul是一个listview，标识是data-role="listview"。并且listview的使用必须是ul的HTML标签。
<a href="#makeListViewPage" data-rel="dialog">Make a listview</a>表示当前的想要连接的页面是以一个对话框的形式展现的。标识是data-rel="dialog"。
<a href="#addUIView" data-transition="pop">Add UIView</a>表示当前想要连接的页面的转场效果的改变。标识是data-transition="pop"，还有几个效果，可以试试。
<a href="page2.html" data-prefetch data-ajax="false">第 4 页</a>表示当前连接的页面不在同一个DOM中，因为同一个DOM中的页面都是ajax来控制的，所以不在同一个DOM中的转场需要关闭ajax的控制，标识是data-ajax="false"。
标识data-prefetch，表示当前要跳转的页面需要预加载，也就是在同一个DOM都加载完成后，浏览器会上后台去加载有这个表示的HTML页面，但是需要注意的是这种情况多的话，会加重浏览器内存的消耗，从而使程序变卡，直到崩溃，尤其是安卓的终端。
C.页面的UIView(listview slider button)
代码如下：
<div data-role="content" style="height:500px;">
<!---------------加个滑动条 Add a slider--------------->
<!--
注意：这个滑动条是用html5新的input类型“range”写的，不需要 data-role属性。务必把他放到form标签内，并且与label 元素相关联。
-->
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
<!---------------加个按钮 Add Button--------------->
<form>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="a">Touch me theme A</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="b">Touch me theme B</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="c">Touch me theme C</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="d">Touch me theme D</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="left" data-theme="e">Touch me theme E</a>
</form>
</div>
以上代码表示，我在一个页面体的内容中加入一个滑动条和按钮。
滑动条代码表示：在一个form表单中加入了一个label和一个rang类型的input，由于这个滑动条是用html5新的input类型“range”写的，不需要 data-role属性。务必把他放到form标签内，并且与label 元素相关联。
按钮代码表示：在一个form表单中加入一个a标签但是类型是JQM的button（data-role="button"） 并且按钮上的图标显示为info的样式的（data-icon="info"还有许多样式可以自己选择） 并将这个按钮图片的位置放在按钮的最左端（data-iconpos="left"）并且给按钮设置不同的样式（data-theme="a" 官网说一共有26个 因为就有26个字母，每个样式就是a-z）
<!---------------listview补充--------------->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
以上代码表示：在一个listview的列表展现形式上，每一行有边框的效果（data-inset="true"）并且要有一个查询的框（data-filter="true"）
沈阳斌子 原创
- 学习JQueryMobile框架（1）
- JQueryMobile学习
- jqueryMobile 学习
- jQueryMobile学习笔记二
- jquerymobile官方学习目录
- jquerymobile-1 第一个jquerymobile页面
- jQuerymobile入门（一）
- jquerymobile
- jqueryMobile
- jQueryMobile
- jQueryMobile的学习笔记一
- jqueryMobile框架页面与页面切换
- 开发基于jquerymobile+phonegap+android的应用程序（1） [转]
- jquerymobile 学习笔记——新手常见问题
- jQuery Mobile （一）hello jquerymobile
- 移动端开发-JqueryMobile实战（一）
- 学习struts2框架（1）
- Spring框架 学习（1）
- ORA-00979 不是group by 表达式 .
- JFreeChart的Swing图形例子（饼图）
- IE下window.onresize 多次调用和死循环bug处理
- 红黑树学习
- android camera(一)：camera模组CMM介绍
- 学习JQueryMobile框架（1）
- VC 2010 Express下安装OpenCV2.4.4
- Codeforce173 Div2
- Android Fragment 生命周期笔记
- Linux之GCC经典入门教程
- android camera(二)：摄像头工作原理、s5PV310 摄像头接口（CAMIF）
- hi3515 红外遥控驱动和并模拟成虚拟键盘
- android camera(三)：camera V4L2 FIMC
- Codeforces Round #173 (Div. 2)
