文档章节

第一天 认识jQuery mobile 框架,资源,书籍

打杂程序猿
 打杂程序猿
发布于 2011/12/22 23:07
字数 946
阅读 609
收藏 4

前言

这里就不对jquery mobile做过多的历史介绍,直接进行jQuery mobile的学习

jQuery mobile 框架纵览

1.jQuery mobile 的显示结构

如图1.1

Untitled Page

从上面的图示我们可以知道,一个完整的页面是由

header

content

footer

这三部分组成.那这三部分是不是一个jQuerymobile 页面必须拥有的元素呢,而且必须是这样的排序呢?答案是:不是,这些元素可以组合和排序可以任由自己自由选择,当然,我个人建议还是严格按照规范进行排序.

2,第一个Hello,World 的jQuery Mobile!

在进行我们第一个jQuery Mobile Hello world程序之前,我们要对html5进行一个简单的认识,因为,jQuery Mobile是基于Html5开发的.

1.文档的声明和jQuery Mobile的初始化

   相比当初html 4 那种冗长的文档的声明相比,html5的文档声明无疑简洁很多,你只需在你的页面第一行输入:

<!DOCTYPE html>

这样就完成了一个html5 的文档类型声明了,接下来就开始一个标准的html的页面编写:

<html>
<head>
<meta charset="utf-8">
<title>Hello,Mobile,world</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<head>
<body>
</body>
</html>

 

这样一个标准的jQuery Mobile的文档格式就初始化完毕,这里,我使用了jQuery Mobile 的CDN 连接,如何是本地的话,只要做出相应的替换即可.

2.编写我们的页面

  编码的步骤按照我上面的元素写即可,page,header,footer,注意!html5 新增的一个属性,data-role!!!

<div data-role="page">
  <div data-role="header">
     <h1>Hello,World!!</h1>  
  </div>
  <div data-role="content">
     <p>Hello,Mobile World!</p>  
  </div>
  <div data-role="footer">
   <h1>Coypright:youxiachai</h1>
  </div>
</div>

 

这样就完成了我们第一个jQuery mobile的页面,很简单是不?

一个完整的jQuery mobile页面

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Hello,Mobile,world</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>Hello,World</h1>
	</div>

	<div data-role="content">	
		<p>Hello,Mobile,World!!<p>
	</div>
	<div data-role="footer">
		<h4>Copyright:youxiachai</h4>
	</div>
</div>

</body>
</html>

我们的第一个jQuery Mobile就这样完成了,是不是简单到难以置信呢?没错,jQuery mobile就是这么方便,下面介绍一下,我们从那里获取学习的资源,第二天,我详细说说jQuery mobile 的几个常用组件,如果,你觉得这些很不够的话,我建议你,认真看下我提供的传送门

jQuery 的学习资源

http://jquerymobile.com/resources/

jQuery Mobile 已经提供了非常丰富的学习资源,涵盖了,jQuery mobile 项目的演示,书籍,框架,第三方插件,,工具,还有相应的教程和文章,当然,都是英文的…

jQuery 书籍介绍

以下都是豆瓣的传送门,书籍介绍我已经全部补全了

jQuery mobile

http://book.douban.com/subject/6724989/

jQuery Mobile First Look

http://book.douban.com/subject/6954448/

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

http://book.douban.com/subject/7564687/

Adobe Dreamweaver Cs5.5 Studio Techniques

http://book.douban.com/subject/7070561/

 

对了大家应该更关心电子版吧.呵呵,正在上传中,因为版权问题,等课程完了就撤销…还有下载了的朋友不要到处传,就算要传也要记得不要写上转载地址.本来是打算打包上传..不知道为什么115上传速度才几K….就单个上传好了

http://115.com/file/aqx9nbee#
__Using_the_CSS3_Mobile_Pack_for_Adobe_Fireworks_CS5.epub
http://115.com/file/cl142epx#
__jQuery_Mobile_First_Look.pdf

http://115.com/file/aqx9nw32#

__jQuery_Mobile.pdf
http://115.com/file/cl142kj7#

__Adobe_Dreamweaver_CS5_5_Studio_Techniques__Designing_and_Developing_for_Mobile_with_jQuery__HTML5__and_CSS3.pdf

这几天用于示例的例子演示效果

正在上传到sae上,晚点发布地址

© 著作权归作者所有

打杂程序猿

打杂程序猿

粉丝 133
博文 41
码字总数 51561
作品 3
广州
程序员
私信 提问
加载中

评论(2)

打杂程序猿
打杂程序猿 博主

引用来自“bmdxyn”的评论

博主,我想问下,你上面的那幅简图,是用什么画的啊。。

这篇两年前写的文章都让你挖出来了。。。。火狐的插件,pencil。
b
bmdxyn
博主,我想问下,你上面的那幅简图,是用什么画的啊。。
9 个很有用的 jQuery Mobile 教程(英文)

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery ...

红薯
2011/04/27
3K
0
8 个优秀的 jQuery Mobile 教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新,但开发...

小编辑
2011/07/05
2.8K
6
jQuery Mobile 1.0 正式版发布

经过一年的努力,JQuery Mobile 1.0 终于正式发布了! jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一...

虫虫
2011/11/18
4.8K
24
18 个 jQuery Mobile 开发贴士和教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 Hardbo...

红薯
2011/12/11
3.7K
2
推荐 10 个很棒的 jQuery Mobile 插件

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。 jQuery Mobile 是 jQuery 的移动...

红薯
2011/08/15
7.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
51分钟前
4
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
4
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
13
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
14
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部