jquery mobile 之路--------第一篇：Hello JQuery Mobile!

最近开始学JQuery Mobile，手头上有本《JQuery Mobile快速入门》，就打算就着书初步学习下。JQuery Mobile，看字面意思，了解过JQuery的童鞋，就可想而知，它是JQuery的移动版。如果你了解HTML5、CSS3、以及有Android平台、IOS平台的开发经验的话，学习起来是更容易理解的。下面是第一例子，我是新手，自然也会尽量的理解每行代码的意思，并在下面给出解释。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<!-- 此处添加自定义的js库 -->
		<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
		<title>hello jqmobile</title>
	</head>
	<body>
		<div data-role="page"> <!-- page是指页面容器 -->
			<div data-role="header">
				<h1>页眉、顶部标题栏</h1>
			</div>
			<div data-role="content"> <!-- content：主体内容，header、content、footer都是可选的属性  -->
				<p>Hello jqmobile</p>
			</div>
			<div data-role="footer" data-position="fixed">  <!--  data-position="fixed"是指页脚置底，默认是在内容之后的，不会置底 -->
				<h1>页脚、底部工具栏</h1>
			</div>
		</div>
	</body>
</html>

　　

1、首先来解释下<header>标签里的前几行：charset是字符集，最好设置为utf-8，免得产生不必要的编码错误。viewport是指推荐视图配置，width=device-width是指页面内容扩展至整个屏幕的宽度。 initial-scale=1是指页面缩放比例，可以自定义。如果想禁止缩放，就在后面添加user-scalable = no，这个需要慎用。

2、按照如上顺序引入jquery mobile的框架css、js，这些可以去官网下载。引入顺序要一致，这才能正确初始这些文件。这里要提醒的是，jquery.js是jquery mobile的核心依赖库，必须要引入，且放在jquery.mobile.js前面。

效果图：

posted @ 2012-06-26 20:10  太白山鹰  阅读(1153)  评论(0)    收藏  举报