jQuery Mobel 学习相关资料整理(一)

　　在Jquery Mobile中，一个页面"就是一个data-role属性被设为"page"的容器(通常为div容器)，里面包含了"header", "content",“footer"三个容器，各自可以容纳普通的html元素，表单和自定义的Jquery Mobile组件

1、一个标准的Jquery Mobile页面的样板。

<!DOCTYPE html> <html> <head> <title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" /><script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script><script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script></head> <body> <div data-role="page"><div data-role="header"><h1>Page Title</h1></div><!-- /header --><div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --><div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page --></body></html>

2、想要支持中文，添加以下meta标签。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

3、一个页面中包含多个页面，支持Ajax的跳转的页面。

<body> <!-- Start of first page --><div data-role="page" id="foo"><div data-role="header"><h1>Foo</h1></div><!-- /header --><div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!-- /content --><div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page --><!-- Start of second page --><div data-role="page" id="bar"><div data-role="header"><h1>Bar</h1></div><!-- /header --><div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p><a href="#foo">Back to foo</a></p> </div><!-- /content --><div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page --></body>

4、后退链接属性。(后退的行为，会无视链接的herf) data-rel="back"

<a href="index.html" data-rel="back">后退</a>

5、页面跳转效果属性。 data-transition="*"

<a href="index.html" data-transition="pop">跳转</a>

data-transition="fade"
data-transition="pop"
data-transition="flip"
data-transition="turn"
data-transition="flow"
data-transition="slidefade"
data-transition="slide"
data-transition="slideup"
data-transition="slidedown"
data-transition="none"

6、在页面上层的弹出对话框属性。 data-rel="dialog"

<a href="foo.html" data-rel="dialog">Open dialog</a>

7、页面预加载属性。data-prefetch

<a href="prefetchThisPage.html" data-prefetch> ... </a>

你可以预加载随意多个页面，只需要将要预加载的链接加上data-prefetch属性。或者你，可以在js里调用$.mobile.loadPage()方法来设置预加载。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

8、不使用jQuery Mobel 提供的 DOM 缓存机制属性。data-dom-cache="true"

<div data-role="page" id="cacheMe" data-dom-cache="true">

通过js控制。

$.mobile.page.prototype.options.domCache = true;

通过程序控制。

pageContainerElement.page({ domCache: true });

DOM缓存的缺点是DOM可能会变得很大，某些设备上会导致变慢或者内存问题。

转载于:https://www.cnblogs.com/liluping860122/archive/2013/05/08/3067258.html

jQuery Mobel 学习相关资料整理(一)相关推荐

epoll相关资料整理
http://www.cppblog.com/converse/archive/2008/10/13/63928.html epoll相关资料整理学习epoll有一段时间了,最近终于有一个服务器采用 ...
PRML：Pattern Recognition And Machine Learning 相关资料整理与下载
Pattern Recognition And Machine Learning 相关资料整理与下载前言一.PRML英文原文二.PRML中文翻译版三.PRML勘误与附加评论四.读者整理的笔记 ...
转：基于iOS上MDM技术相关资料整理及汇总
转自:http://www.mbaike.net/mdm/6.html 一.MDM相关知识: MDM (Mobile Device Management ),即移动设备管理.在21世纪的今天,数据是企 ...
Scaleform相关资料整理
Scaleform相关资料整理官方教程: http://udn.epicgames.com/Three/Scaleform.html 麻将桌的视频: http://gameware.autodesk ...
深度学习相关资料总结
FROM:http://blog.csdn.net/chenyusiyuan?viewmode=contents 近这两年里deep learning技术在图像识别和跟踪等方面有很大的突破,是一大研究 ...
【软件测试】学习路线资料整理摆脱迷茫，突破瓶颈（送给我迷茫的朋友）
引言写这篇博客原因:一位朋友突然很丧,然后找到了我,聊了许久之后,还是觉得没有大的效果,因为迷茫期不是那么容易就过去的.答应整理一份软测学习路线&资料,于是就有了这一篇文章.废话少说,进入正 ...
Citrix 相关资料整理
转载请注明 http://blog.csdn.net/u011046042/article/details/72638345 思杰相关的资料整理: 官方网站 https://www.citrix.co ...
无人机相关资料整理-备忘
近期一直在学习无人机相关基础知识以及平台搭建方面的知识,搜集了很多网站的相关信息,有一些比较有用的github.中英文资料.谈论区网址.还收藏了一些免费的课程,以及自己已购买的课程的链接.有些普及的教 ...
源码分析工具Joern的相关资料整理
随着对joern的了解,发现这个工具的潜能挺大的.但实际上手起来还是有点难度.这里列举一些对学习joern有帮助的相关资料博客. joern官方文档:https://docs.joern.io/ jo ...

jQuery Mobel 学习相关资料整理(一)

jQuery Mobel 学习相关资料整理(一)相关推荐

最新文章

热门文章