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")
沈阳斌子 原创