【HTML5活动】jQuery Mobile框架施用简易指南 _HTML/CSS

【HTML5活动】jQuery Mobile框架使用简易指南

jQuery Mobile框架使用简易指南

jQuery Mobile 简介

jQuery Mobile 是针对智能手机和平板电脑开发的，并且对触摸事件进行优化的浏览器页面框架。
jQuery Mobile具有统一的UI，其UI系统覆盖了所有主流的移动终端平台，它建立在jQuery和jQuery UI坚实的基础上。它的轻量级的代码被很好的增强改进，能够进行灵活的、简单的设计开发。(原文：http://jquerymobile.com/ )

jQuery Mobile 使用

(ps:因为图片是自己手动截图的，不知道怎么添加到里面，所以如果大家要看有图版本请直接下载附件

)
1、引入jQuery Mobile
jQuery Mobile 页面必须声明DOCTYPE为HTML5，然后将相关的js包（本次采用的版本为1.0b3）和css引入页面的head中，引入之后如下：

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head> 

<body> 
...在body中开始加入各种元素...
</body>
</html>

2、组织页面结构
当完成上述工作后，终于可以开始设计自己的jQuery Mobile页面了。首先找到页面中的body，然后开始加入最基本的页面结构:

<div data-role=”page”>
	<div data-role=”header”></div>
        <div data-role=”content”></div>
	<div data-role=”footer”></div>
</div>

对上面的代码做一个简单的介绍：

a、每一个页面必须以<div data-role=”page”>开头，它表示这里开始是一个新的页面，而且不要在里面内嵌这个元素。（自己试过<div data-role=”dialog”>开头组织页面也可以，但是建议刚开始学习的时候不要乱用，按照最规范的来）

b、page里面有最基本的3个元素，即: header，content，footer。这三个元素分别对应着一个页面的头，内容和页脚。header和footer可以没有，但是content最好保留，因为你的页面元素都要放到里面。

3、组织页面header
页面的header在页面的最顶部，在这里经常放入一些操作按钮和Back按钮，所以组织header其实就是设计如何放置这些按钮。

注意：Back按钮是jQuery Mobile框架为你加到header中的，当然你可以使用data-backbtn=”true/false”或者data-add-back-btn=”true/false”来自己决定是否需要Back按钮。(但是有时候jQuery Mobile不是那么聪明，不能正确的添加，所以可以自己添加这个按钮。)

例如：想要放入一个Back按钮和Save按钮在header中（如下图）

实现代码：

<div data-role="header" data-backbtn="true">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>jQuery Mobile Page Two Header</h1>
<a href="#pageOne" data-icon="check" class="ui-btn-right">Save</a>
</div>

4、组织页面footer
页面的footer一般都作为一个导航栏，从这里可以链接到其他的页面。所以这里经常放一组button，这里引入jQueryMobile中的一个元素：<div data-role="navbar">。这里主要是说明页面元素footer，所以暂时不介绍navbar。
例如，我们想要创建一个如下图的导航栏

实现代码：

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a data-icon-iconpos="top" data-icon="info" href="#pageOne" class="ui-btn-active">One</a></li>
<li><a data-icon-iconpos="top" data-icon="info"href="#pageTwo">Two</a></li>
<li><a data-icon-iconpos="top" data-icon="info"href="#">Three</a></li>
<li><a data-icon-iconpos="top" data-icon="info"href="#">Four</a></li>
</ul>
</div>
</div>

5、组织页面content
页面的content其实就是显示在用户面前的东西，在里面需要显示什么，就在里面放入什么元素。这是页面最重要的一个部分，但其实也是不好举例的一个部分，因为这里放的是HTML5的各种元素和jQuery Mobile的样式组合，所以要做好这个部分就只有多看jQuery Mobile的Demo &Document。
jQuery Mobile控件简介
1、控件Button
jQuery Mobile Framework会自为将button标签或者input标签中type为a、submit、reset、button、image自动添加button的style。当你想为一个html标签也添加button样式是，则需要自己手动在标签内部添加属性data-role=”button”。
例如，需要将一个div标签做成一个button的样式
<div data-role=”button” data-theme=”a”>I’m button</div>
顺便列出一些button中的其他属性：
a、指定button的icon图标，添加属性data-icon=”{icon_name}”，常见的icon_name如下，icon_name:{delete, plus, minus, check, refresh, gear, back, grid, star, alert, info, home, search, arrow-r, arrow-l, arrow-u, arrow-d}

例如，为button添加一个指向右边的箭头，
<div data-role=”button” data-theme=”a” data-icon=”arrow-r”>I’m button</div>

b、指定button的icon位置，添加属性data-iconpos=”{position}”，position:{left, right, top, bottom, notext}
例如，需要将上面的箭头放在按钮的右边，
<div data-role=”button” data-theme=”a” data-icon=”arrow-r” data-iconpos=”right”>I’m button</div>

c、指定button的theme，添加属性data-theme=”{theme_name}”，jQuery Mobile自带的theme有{a, b, c, d, e}，需要什么样的theme则依照上述例子，为元素添加data-theme属性。

2、控件Collapsible
Collapsible是一个具有展开和关闭功能的空间，可以在里面放入各种各样的html元素。在页面中加入一个Collapsible是非常简单的，只需要在页面中加入如下代码，
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
默认情况下，Collapsible是关闭着的，如果想要让它在初始化是就是展开状态，则需要手动为控件添加属性：data-collapsed=”false”。代码如下
<div data-role="collapsible" data-collapsed=”false”>……</div>
注意，包含在这个标签内部的<h3>…..</h3>表示 collapsible显示的标题，可以换成h1,h2,h…..，但是必须是一个h{x}标签。

jQuery Mobile 方法changePage简介

jQuery Mobile Framework提供了一个非常重要的用来实现页面跳转的方法：changePage。这个方法可以用来实现一个request。例如在MVC框架中，需要请求controller中的一个action则可以在javascript中调用该方法

$.mobile.changePage(arguments);

arguments的详细说明请参照
http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

请求代码

$.mobile.changePage(‘controllerName/ActionName’)

或者是

$.mobile.changePage({
	url: ‘controllerName/ActionName’
})

同时我也自己做了一个在线的效果，希望能够更加形象的告诉大家该怎么样去使用jQuery Mobile. (http://jsfiddle.net/kiddYu619/4KPw6/)

…………………………………………………………………分割线……………………………………………………………
介绍就说道这里，其实还有很多的元素需要介绍，但是这些元素基本和jQuery Mobile官网上面介绍一致，就不做太多重复的工作，希望这个文档能够给大家带来一定的帮助。
Html5活动：http://html5.group.iteye.com/group/topic/28234
我承认我被那本书深深吸引了

1 楼 firefly_zp 2011-11-18

楼主，你可以这么做来上传文件：
1. BLOG 下方有一个Label为“附件”的内容，在里面有“选择文件”的按钮。
2. 点击此按钮，会弹出需要选择的文件，选择完毕后，等待一会（视文件大小而定）
3. 上传完毕后，将光标移动到你想要添加图片的地方，然后点击“附件”里的绿色按钮（一个向上的绿色箭头），图片将自动引用到指定位置。

图片的格式如下：

不用修改，直接引用这个地址即可。

2 楼 yanyanquan 2011-11-23

文章确实不错，受益匪浅

3 楼 cdtdx 2011-11-30

哈哈，我来顶小龙的。

4 楼 gteam.yu 2011-11-30

cdtdx 写道

哈哈，我来顶小龙的。

感谢啊。

5 楼 chenxingrui 2011-12-02

顶!html5越来越火了..