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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

不管你是对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、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

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

jordans for sale purple

如需转载,烦请注明出处:https://www.w3cplus.com/blog/696.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部