jQuery Mobile教程-基础篇-如何开始？

作者：小春 日期：2013-03-26 点击：2393
mobile
jQuery Mobile

特别申明：本系列教程由小春撰写

不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中，还是已经开始用它做项目的开发者，欢迎加入这个jqm学习之旅

1、什么是jQuery Mobile？

按照官方的描述：针对智能手机和平板、做过触摸优化的web框架。截止到编写这个教程的时候，目前最新的版本是1.3.0。

2、jQuery Mobile推崇什么？

其实很多读者应该多用过jquery，它推崇的是"write less,do more"，那jQuery Mobile呢？

答案是一定的，而且更加针对移动设备。

3、相关资源依赖？

jQuery Mobile首先依赖jquery框架提供的接口处理相关操作

自身依赖两个主要部分：
js：jquery-mobile.js
css：jquery-mobile.css

如果你对版本意识不关心的话，我们可以直接去官网CDN下载最新的zip包,这里就不做过多的介绍了，我们直入主题吧。

4、我们先来看一下采用jQuery Mobile开发的一个最简单的页面结构是怎样的？

<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile教程-基础篇-页面基本结构</title>
<!-- 设置meta viewport start -->
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<!-- 设置meta viewport end -->

<!-- jqm依赖文件start -->
<link rel="stylesheet" href="../css/jquery.mobile-1.1.0.css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<!-- jqm依赖文件end -->
</head>
<body>
  <!-- 页面容器start -->
  <div data-role="page">
	
	<!-- 页眉部分start -->
	<div data-role="header">
	   <h1>我是header部分</h1>
	</div>
	<!-- 页眉部分end -->
	
	<!-- content部分start -->
	<div data-role="content">
		<p>jQuery Mobile教程-基础篇-我是content部分</p>
	</div>
	<!-- content部分end -->
	
	<!-- 页脚部分start -->
	<div data-role="footer">
		<h3>我是footer部分</h3>
	</div>
	<!-- 页脚部分end -->
	
  </div> 
  <!-- 页面容器end -->
  
</body>
</html>

如下图：

页面基本结构

接下来我们会从使用频率这个维度来给大家介绍几个常见的组件，让大家快速地熟悉基本的用法。

demo

PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注

关于小春

专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博

返回顶部