您的位置：首页 > Web前端 > JQuery

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

2012-06-26 20:10 405 查看

最近开始学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前面。

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航