jQuery Mobile学习笔记（六）——jQuery Mobile API
来源：互联网 发布：windows怎么截图窗口 编辑：程序博客网 时间：2024/06/07 06:23
页面部分的介绍基本结束。有了框架之后，我们要考虑的页面中的数据通信和交互。jQuery Mobile（JQM）使用了JavaScript与框架通信以及进行内容管理的API。
1.文档事件
- (document).bind('mobileinit', function() { </span></span></li><li class=""><span> // Initialization code here </span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(‘mobileinit’, function() { // Initialization code here});mobileinit事件会在jQueryMobile框架载入内存之后，UI元素被渲染之前触发，可以使用它来改变一些UI全局选项。
JQM文档事件的执行顺序通常是：mobileinit - ready - load
放置位置：jQuery.js之后，jQueryMobile.js之前。
- <head>
- <meta charset=“utf-8” />
- <title>My first jQuery Mobile code</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>$(document).bind(<span style=“background-color: rgb(51, 204, 255);”>“mobileinit”</span>, function() {
- // Our initialization code here
- });
- <script>
- <script src=“http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>
- <!– CUSTOM INITIALIZATION CODE –>
- <script src=“customcode.js”></script>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- </head>
<head> <meta charset="utf-8" /> <title>My first jQuery Mobile code</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>$(document).bind(<span style="background-color: rgb(51, 204, 255);">"mobileinit"</span>, function() { // Our initialization code here }); <script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <!-- CUSTOM INITIALIZATION CODE --> <script src="customcode.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
2.配置（.mobile代替jQuery中的 ）.mobile.<widget_name>.prototype用于访问相应的原型。例如.mobile.page.prototype.options可用于定义应用到每个页面实例（data-role=”page”）的默认属性。这些设置全局或部件默认属性的设置要放在mobileinit事件中。
2.1全局配置
用户界面配置：
- (document).bind("mobileinit", function() { </span></span></li><li class=""><span> // We change default values </span></li><li class="alt"><span> $<span class="attribute">.mobile.defaultPageTransition</span><span> = </span><span class="attribute-value">"fade"</span><span>; </span></span></li><li class=""><span> $<span class="attribute">.mobile.minScrollBack</span><span> = </span><span class="attribute-value">150</span><span>; </span></span></li><li class="alt"><span> $<span class="attribute">.mobile.activeBtnClass</span><span> = </span><span class="attribute-value">"active-button"</span><span>; </span></span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“mobileinit”, function() { // We change default values
.mobile.defaultPageTransition=“fade”; .mobile.minScrollBack = 150; $.mobile.activeBtnClass = “active-button”;});minScrollBack默认页面最小滚动值为250像素高。
activePageClass/activeBtnClass修改当前活动页面或激活按钮的类名。
命名空间和Ajax功能：- (document).bind("mobileinit", function() { </span></span></li><li class=""><span> // We change default values </span></li><li class="alt"><span> $<span class="attribute">.mobile.ns</span><span> = </span><span class="attribute-value">"firt"</span><span>; </span></span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“mobileinit”, function() { // We change default values $.mobile.ns = “firt”;});为了避免框架间的冲突，可以使用ns全局属性来定义一个命名空间。例如上式使用后，页面模板就会变成：
- <div data-firt-role=“page”>
- <div data-firt-role=“header” data-firt-theme=“a”>
- </div>
- <div data-firt-role=“content”>
- </div>
- </div>
<div data-firt-role="page"> <div data-firt-role="header" data-firt-theme="a"> </div> <div data-firt-role="content"> </div></div>
如果定义了命名空间，则需要手动修改CSS文件(包括结构和主题文件)以便识别。
$.mobile.ajaxEnabled = false:禁用所有Ajax功能，所有外部页面将通过浏览器使用完整的HTTP请求加载。
默认情况下，XMLHttpRequest不支持跨域请求，但是可以通过$.mobile.allowCrossDomainPages=true来开启跨域。
本地化字符串
使用Ajax加载外部页面时显示的加载消息、外部页面无法加载时的加载错误消息以及一些其他基于组件的消息。
下面是各个消息的列表及默认值：
- // Global strings
- <span class="attribute">.mobile.loadingMessage</span><span> = </span><span class="attribute-value">"loading"</span><span>; </span></span></li><li class="alt"><span>.mobile.pageLoadErrorMessage = “Error Loading Page”;
- // 组件字符串
- <span class="attribute">.mobile.page.prototype.options.backBtnText</span><span> = </span><span class="attribute-value">"Back"</span><span>; </span></span></li><li class="alt"><span>.mobile.dialog.prototype.options.closeBtnText = “Close”
- <span class="attribute">.mobile.collapsible.prototype.options.expandCueText</span><span> = </span></span></li><li class="alt"><span> <span class="attribute-value">" click to expand contents"</span><span>; </span></span></li><li class=""><span>.mobile.collapsible.prototype.options. collapseCueText = “ click to collapse contents”;
- <span class="attribute">.mobile.listview.prototype.options.filterPlaceholder</span><span> = </span><span class="attribute-value">"Filter items..."</span><span>; </span></span></li><li class=""><span>.mobile.selectmenu.prototype.options.closeText = “Close”;
// Global strings$.mobile.loadingMessage = "loading";$.mobile.pageLoadErrorMessage = "Error Loading Page";// 组件字符串$.mobile.page.prototype.options.backBtnText = "Back";$.mobile.dialog.prototype.options.closeBtnText = "Close"$.mobile.collapsible.prototype.options.expandCueText = " click to expand contents";$.mobile.collapsible.prototype.options. collapseCueText = " click to collapse contents";$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";$.mobile.selectmenu.prototype.options.closeText = "Close";
创建一个类似的中文版本的JQM文本方案：- (document).bind('mobileinit', function() { </span></span></li><li class=""><span> // Global strings </span></li><li class="alt"><span> $<span class="attribute">.mobile.loadingMessage</span><span> = </span><span class="attribute-value">"正在加载"</span><span>; </span></span></li><li class=""><span> $<span class="attribute">.mobile.pageLoadErrorMessage</span><span> = </span><span class="attribute-value">"加载页面出错"</span><span>; </span></span></li><li class="alt"><span> </span></li><li class=""><span> // Widget strings </span></li><li class="alt"><span> $<span class="attribute">.mobile.page.prototype.options.backBtnText</span><span> = </span><span class="attribute-value">"后退"</span><span>; </span></span></li><li class=""><span> $<span class="attribute">.mobile.dialog.prototype.options.closeBtnText</span><span> = </span><span class="attribute-value">"关闭"</span><span> </span></span></li><li class="alt"><span> $<span class="attribute">.mobile.collapsible.prototype.options.expandCueText</span><span> = </span><span class="attribute-value">"点击展开"</span><span>; </span></span></li><li class=""><span> $.mobile.collapsible.prototype.options. <span class="attribute">collapseCueText</span><span> = </span><span class="attribute-value">" 点击收起 "</span><span>; </span></span></li><li class="alt"><span> $<span class="attribute">.mobile.listview.prototype.options.filterPlaceholder</span><span> = </span><span class="attribute-value">" 过滤 "</span><span>; </span></span></li><li class=""><span> $<span class="attribute">.mobile.selectmenu.prototype.options.closeText</span><span> = </span><span class="attribute-value">" 关闭 "</span><span>; </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(‘mobileinit’, function() { // Global strings
.mobile.loadingMessage=“正在加载”; .mobile.pageLoadErrorMessage = “加载页面出错”; // Widget strings.mobile.page.prototype.options.backBtnText=“后退”; .mobile.dialog.prototype.options.closeBtnText = “关闭”.mobile.collapsible.prototype.options.expandCueText=“点击展开”; .mobile.collapsible.prototype.options. collapseCueText = ” 点击收起 “;.mobile.listview.prototype.options.filterPlaceholder=”过滤“; .mobile.selectmenu.prototype.options.closeText = ” 关闭 “;});
2.2页面配置- 改变页面默认主题：
改变页面默认主题：
- (document).bind('mobileinit', function() { </span></span></li><li class=""><span> $<span class="attribute">.mobile.page.prototype.options.addBackBtn</span><span> = </span><span class="attribute-value">true</span><span>; </span></span></li><li class="alt"><span> $<span class="attribute">.mobile.page.prototype.options.backBtnTheme</span><span> = </span><span class="attribute-value">"e"</span><span>; </span></span></li><li class=""><span> $<span class="attribute">.mobile.page.prototype.options.headerTheme</span><span> = </span><span class="attribute-value">"b"</span><span>; </span></span></li><li class="alt"><span> $<span class="attribute">.mobile.page.prototype.options.footerTheme</span><span> = </span><span class="attribute-value">"d"</span><span>; </span></span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(‘mobileinit’, function() {
.mobile.page.prototype.options.addBackBtn=true; .mobile.page.prototype.options.backBtnTheme = “e”;.mobile.page.prototype.options.headerTheme=“b”; .mobile.page.prototype.options.footerTheme = “d”;});
2.3部件配置JQM中的每个部件widget都有自己的默认配置属性，可以通过部件的prototype属性中的options对象来改变部件的默认配置，接口为$.mobile.<部件名>.prototype.options
- (document).bind('mobileinit', function() { </span></span></li><li class=""><span> // 在所有listviews中启用过滤 </span></li><li class="alt"><span> $<span class="attribute">.mobile.listview.prototype.filter</span><span> = </span><span class="attribute-value">true</span><span>; </span></span></li><li class=""><span> </span></li><li class="alt"><span> // 在所有选择框上启用非原生菜单 </span></li><li class=""><span> $<span class="attribute">.mobile.selectmenu.prototype.nativeMenu</span><span>=</span><span class="attribute-value">false</span><span>; </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(‘mobileinit’, function() { // 在所有listviews中启用过滤
.mobile.listview.prototype.filter=true;//在所有选择框上启用非原生菜单 .mobile.selectmenu.prototype.nativeMenu=false;});- <strong>
- </strong>
<strong></strong>
- <strong>3.实用工具</strong>
<strong>3.实用工具</strong>
3.1Data-*工具- 取得页面上所有btn集合：
取得页面上所有btn集合：
- var buttons = ("a[</span><span class="attribute">data-role</span><span>=</span><span class="attribute-value">button</span><span>"]); </span></span></li></ol></div><pre name="code" class="html" style="display: none;">var buttons =(“a[data-role=button”]);
- JQM添加了一个名为jqmData的过滤器，并会应用我们指定的命名空间，上面的代码可以更改为：
JQM添加了一个名为jqmData的过滤器，并会应用我们指定的命名空间，上面的代码可以更改为：
- <pre name=“code” class=“html”>var buttons = ("a:jqmData(</span><span class="attribute">role</span><span>=</span><span class="attribute-value">'button'</span><span>)"); </span></span></li></ol></div><pre name="code" class="html" style="display: none;"><pre name="code" class="html">var buttons =(“a:jqmData(role=’button’)”);同时，在JQM集合对象上应该使用jqmData和jqmRemoveData来代替原来的jQuery函数data和removedata,例如：
- ("a").jqmRemoveData("transition"); </span></span></li><li class=""><span>(“#button1”).jqmData(“theme”, “a”);
$("a").jqmRemoveData("transition");$("#button1").jqmData("theme", "a");
3.2页面工具当前页面：
- var currentPageId = .mobile.activePage.id; </span></span></li></ol></div><pre name="code" class="html" style="display: none;">var currentPageId =.mobile.activePage.id;可以通过
.mobile.pageContainer属性访问当前页面的容器（通常为body元素），框架中最有用的工具是 .mobile.changePage方法，它允许我们转向另一个页面，就像用户点击了相应的链接一样。加载外部页面：
- .mobile.changePage("external.html"); </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.changePage(“external.html”);转向当前文档中已经存在的内部页面：
.mobile.changePage( (“#pageId”));
$.mobile.changePage($("#pageId"));
更改页面切换效果：.mobile.changePage( (“#page2”), {- transition: “slide”,
- reverse: true
- });
$.mobile.changePage($("#page2"), { transition: "slide", reverse: true});示例：通过POST方式发送数据并加载一个外部页面：- <script>
- function viewProduct(idProduct) {
- $.mobile.changePage(“productdetail.php”, {
- method: “post”,
- data: {
- action: ‘getProduct’,
- id: idProduct
- },
- transition: “fade”
- });
- }
- </script>
- <!– … –>
- <a href=“javascript:viewProduct(5200)” data-role=“button”>Product details</a>
<script>function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct', id: idProduct }, transition: "fade" });}</script><!-- ... --><a href="javascript:viewProduct(5200)" data-role="button">Product details</a>
3.3平台、路径、UI工具
$.mobile对象中用于查询当前平台的工具。getDocumentUrl（）：返回原始文档的RU
$.mobile.path访问路径管理工具。
parseUrl(url)：返回一个对象，各个属性对应该URL的各个部分
makePathAbsolute（relativePath，absolutePate）：基于相对路径返回绝对路径
makeURLAbsolute（relativeUrl，absoluteUrl）：基于相对URL返回绝对URL
isSameDomain（Url1，Url2）：如果两个URL同域名则返回true
isRelativeUrl（Url）：如果URL是相对地址则返回true
isAbsolute（Url）：如果URL是绝对地址则返回true
$.mobile.silentScroll(y)可以将页面滚动到任意位置，同时不显示动画，也不触发任何时间。
// 显示加载信息，并在2s后将其隐藏
- .mobile.showPageLoadingMsg(); </span></span></li><li class=""><span>setTimeout(function() { </span></li><li class="alt"><span> $.mobile.hidePageLoadingMsg(); </span></li><li class=""><span>}, 2000); </span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.showPageLoadingMsg();setTimeout(function() { .mobile.hidePageLoadingMsg();
}, 2000);.mobile.fixedToolbars.show()/.hide():显示、隐藏固定工具栏
4.自定义过渡
添加一个explode过渡类型：- </span><span class="attribute">.mobile.transitionHandlers.explode</span><span> = </span><span class="attribute-value">explodeTransitionHandler</span><span>; </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.transitionHandlers.explode = explodeTransitionHandler;
修改默认的过渡，将它赋值为任何其他处理函数- </span><span class="attribute">.mobile.defaultTransitionHandler</span><span> = </span><span class="attribute-value">explodeTransitionHandler</span><span>; </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.defaultTransitionHandler = explodeTransitionHandler;
- </pre><pre name=“code” class=“html”>过渡处理函数是一个JavaScript函数，接受四个参数：过渡名，reverse（如果设置为true，表示本过渡将反转调用），toPage（指向目标页面的jQuery DOM对象），fromPage（指向原始页面的jQuery DOM对象）
</pre><pre name="code" class="html">过渡处理函数是一个JavaScript函数，接受四个参数：过渡名，reverse（如果设置为true，表示本过渡将反转调用），toPage（指向目标页面的jQuery DOM对象），fromPage（指向原始页面的jQuery DOM对象）
设置过渡效果后，记得更改$.mobile.activePageClass，来更改当前页面。
5.动态内容：5.1创建页面：
- <div data-role=“page”>
- <div data-role=“header”>
- <h1>Dynamic page</h1>
- </div>
- <div data-role=“content”>
- <a id=“button1” href=“javascript:addPages()” data-role=“button”>Add Pages</a>
- <ul id=“list1”>
- </ul>
- </div>
- </div>
<div data-role="page"> <div data-role="header"> <h1>Dynamic page</h1> </div> <div data-role="content"> <a id="button1" href="javascript:addPages()" data-role="button">Add Pages</a> <ul id="list1"> </ul> </div></div>
- function addPages() {
- for (var i=1; i<5; i++) {
- var page = ("</span><span class="tag"><</span><span class="tag-name">div</span><span class="tag">></span><span>").jqmData("role", "page").attr("id", "page" + i); </span></span></li><li class=""><span> // header </span></li><li class="alt"><span> (“<div>“).attr(“data-role”, “header”).append(("</span><span class="tag"><</span><span class="tag-name">h1</span><span class="tag">></span><span>") </span></span></li><li class=""><span> .html("Page " + i)).appendTo(page); </span></li><li class="alt"><span> // content </span></li><li class=""><span> (“<div>“).attr(“data-role”, “content”).append(("</span><span class="tag"><</span><span class="tag-name">p</span><span class="tag">></span><span>") </span></span></li><li class="alt"><span> .html("Contents for page " + i)) </span></li><li class=""><span> .appendTo(page); </span></li><li class="alt"><span> </span></li><li class=""><span> (“body”).append(page);
- ("<span class="tag"><</span><span class="tag-name">li</span><span class="tag">></span><span>").append((“<a>“).attr(“href”, ”#page”+i).html(“Go to page ” + i))
- .appendTo(“#list1”);
- }
- $(“#button1”).hide();
- };
function addPages() { for (var i=1; i<5; i++) { var page = $("<div>").jqmData("role", "page").attr("id", "page" + i); // header $("<div>").attr("data-role", "header").append($("<h1>") .html("Page " + i)).appendTo(page); // content $("<div>").attr("data-role", "content").append($("<p>") .html("Contents for page " + i)) .appendTo(page); $("body").append(page); $("<li>").append($("<a>").attr("href", "#page"+i).html("Go to page " + i)) .appendTo("#list1"); } $("#button1").hide();};
动态创建页面有一个缺点：如果用户在某个新建的页面上刷新当前页面，必须监听mobileinit并检查（通过读取页面地址中的散列值或某个页面事件）用户是否正在加载某个动态页面，否则无法刷新。第二次加载时，动态页面将不存在，需要重新创建。创建动态页面的最佳方法是只连接它们，例如：连到#page1并捕获pagebeforechange事件，修改框架对应的行为。
- <!DOCTYPE html>
- <html xmlns=“http://www.w3.org/1999/xhtml”>
- <head>
- <meta charset=“UTF-8” />
- <title>jQuery Mobile</title>
- <script src=“jquery.js”></script>
- <link rel=“stylesheet” type=“text/css” href=“jquery.mobile-1.0.css”>
- <script src=“jquery.mobile-1.0.js”></script>
- <script>
- (document).bind('pagebeforechange', function(event, data) { </span></li><li class="alt"><span> // 从data.toPage中收到目标页面，将它标准化 </span></li><li class=""><span> var <span class="attribute">url</span><span> = .mobile.path.parseUrl(data.toPage).hash; </span></span></li><li class="alt"><span> </span></li><li class=""><span> if (url!=undefined && url.length<span class="tag">></span><span>5 && url.substring(0, 5)=="#page") { </span></span></li><li class="alt"><span> // We dynamically inject a new page </span></li><li class=""><span> var <span class="attribute">id</span><span> = </span><span class="attribute-value">url</span><span>.substring(5); </span></span></li><li class="alt"><span> </span></li><li class=""><span> // 使用DOM中已经存在的页面模板 </span></li><li class="alt"><span> ("#pageTemplate h1").html("Page " + id); </span></li><li class=""><span> </span></li><li class="alt"><span> //转向真实的页面模板，同时不在访问历史上使用的真实页面 </span></li><li class=""><span> .mobile.changePage($(“#pageTemplate”), {dataUrl: data.toPage});
- // 阻止正常页面过渡
- event.preventDefault();
- }
- });
- </script>
- <meta name=“viewport” content=“width=device-width,user-scalable=no”>
- </head>
- <body>
- <div data-role=“page”>
- <div data-role=“header”>
- <h1>Dynamic pages</h1>
- </div>
- <div data-role=“content”>
- <a id=“button1” href=“#page1” data-role=“button”>Page 1</a>
- <a id=“button1” href=“#page2” data-role=“button”>Page 2</a>
- <a id=“button1” href=“#page3” data-role=“button”>Page 3</a>
- <a id=“button1” href=“#page4” data-role=“button”>Page 4</a>
- </div>
- </div>
- <div data-role=“page” id=“pageTemplate”>
- <div data-role=“header”>
- <h1>Header</h1>
- </div>
- <div data-role=“content”>Content</div>
- <div data-role=“footer”>
- <h4>Footer</h4>
- </div>
- </div>
- </body>
- </html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" /><title>jQuery Mobile</title><script src="jquery.js"></script><link rel="stylesheet" type="text/css" href="jquery.mobile-1.0.css"><script src="jquery.mobile-1.0.js"></script><script>$(document).bind('pagebeforechange', function(event, data) { // 从data.toPage中收到目标页面，将它标准化 var url = $.mobile.path.parseUrl(data.toPage).hash; if (url!=undefined && url.length>5 && url.substring(0, 5)=="#page") { // We dynamically inject a new page var id = url.substring(5); // 使用DOM中已经存在的页面模板 $("#pageTemplate h1").html("Page " + id); //转向真实的页面模板，同时不在访问历史上使用的真实页面 $.mobile.changePage($("#pageTemplate"), {dataUrl: data.toPage}); // 阻止正常页面过渡 event.preventDefault(); }});</script><meta name="viewport" content="width=device-width,user-scalable=no"></head><body><div data-role="page"> <div data-role="header"> <h1>Dynamic pages</h1> </div> <div data-role="content"> <a id="button1" href="#page1" data-role="button">Page 1</a> <a id="button1" href="#page2" data-role="button">Page 2</a> <a id="button1" href="#page3" data-role="button">Page 3</a> <a id="button1" href="#page4" data-role="button">Page 4</a> </div></div><div data-role="page" id="pageTemplate"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content">Content</div> <div data-role="footer"> <h4>Footer</h4> </div></div></body></html>
5.2创建部件动态创建部件需要调用部件对应的构造器。每个部件都有自己的构造器，它们就是与部件名同名的jQuery函数，例如执行$(“#list1”).listview()，则该ul将马上被转换并渲染为一个列表视图。
将a元素转换为按钮：
- ("a").button(); </span></span></li><li class=""><span> //或 </span></li><li class="alt"><span>var <span class="attribute">button</span><span> = (“<a>“).attr(“href”, “somewhere.html”).button();
$("a").button(); //或var button = $("<a>").attr("href", "somewhere.html").button();
5.3更新部件- 动态添加内容后，需要刷新这个部件。
动态添加内容后，需要刷新这个部件。
- ("#list1").listview('refresh'); </span></span></li><li class=""><span>(“#checkbox”).val(‘true’).checkboxradio(‘refresh’);
$("#list1").listview('refresh');$("#checkbox").val('true').checkboxradio('refresh');
6.创建网格用于创建CSS网格。
- ("#element").grid(); </span></span></li></ol></div><pre name="code" class="html" style="display: none;">(“#element”).grid();
- 根据它的子元素的数目，框架将自动为该元素应用正确的ui-grid-<letter>类，为其子元素应用ui-block-<letter>类。
根据它的子元素的数目，框架将自动为该元素应用正确的ui-grid-<letter>类，为其子元素应用ui-block-<letter>类。
- </pre><pre name=“code” class=“html”>
</pre><pre name="code" class="html">
7.改变页面内容要刷新一个容器，只需要在页面上触发create事件，这时每个部件就会再次检查是否需要创建新的实例。
- ("#content").html(newHTMLcontentWithWidgets); </span></span></li><li class=""><span>(“#page1”).trigger(“create”);
$("#content").html(newHTMLcontentWithWidgets);$("#page1").trigger("create");通常每个部件的构造器都会响应页面的create事件，以便检查是否需要创建对应的控件。8.处理事件
8.1页面事件要全局处理页面事件，可以调用
(document).bind，也可以调用更明确的 (“:jqmData(role=’page’)”).bind。创建事件：
pagebeforecreate：页面已插入DOM，但是组件还未创建
pagecreate:页面已被创建，但组件还未渲染
pageinit:页面已完全加载
pageremove:页面已从DOM移除
- ("#page2").live("pageinit", function(event) { </span></span></li><li class=""><span> </span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(“#page2”).live(“pageinit”, function(event) {});
加载事件：
pagebeforeload：在所有Ajax请求完成之前执行pageload：当新页面已被加载并插入到DOM后执行
pageloadfailed：指定页面无法加载时执行
这些事件处理程序都会受到两个参数，一个事件对象和一个数据对象。
- (document).bind("pageloadfailed", function(event, data) { </span></span></li><li class=""><span> data.preventDefault();//阻止默认行为 </span></li><li class="alt"><span> // Custom error management </span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“pageloadfailed”, function(event, data) { data.preventDefault();//阻止默认行为 // Custom error management});
显示事件：pagebeforechange：在页面改变发生之前以及过渡开始之前执行
pagechange：在页面改变完成之后执行
pagechangefailed：页面改变无法完成时执行
toPage：如果目标页面是外部页面，则值为目标页面的URL字符串；如果是内部页面，则值为目标页面的DOM对象
options：与发送到$.mobile.changePage的选项相同
pagebeforeshow：在过渡并显示页面之前执行（页面仍然处于隐藏状态）
pageshow：在页面已完成加载过渡并正显示在屏幕上时执行
pagebeforehide：在页面隐藏之前执行
pagehide：页面已完成卸载过渡并已隐藏时执行
8.2方向事件
- (document).bind("orientationchange", function(orientation) { </span></span></li><li class=""><span> if (<span class="attribute">orientation</span><span>=="landscape") { </span></span></li><li class="alt"><span> // 现在是纵向 </span></li><li class=""><span> } else { </span></li><li class="alt"><span> // 现在是横向 </span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“orientationchange”, function(orientation) { if (orientation==”landscape”) { // 现在是纵向 } else { // 现在是横向 }});
8.4手势事件tap：在屏幕上快速触摸一下时触发
taphold：触摸屏幕并持续按住1s时触发
swipeleft：从右划到左时触发
swiperight：从左划到右时触发
- (document).bind("mobileinit", function() { </span></span></li><li class=""><span> $("#page2").live("swiperight", goBackToPage1); </span></li><li class="alt"><span>}); </span></li><li class=""><span> </span></li><li class="alt"><span>function goBackToPage1() { </span></li><li class=""><span> $.mobile.changePage("#page1", { reverse: true }); </span></li><li class="alt"><span> $("#page2").unbind("swiperight", goBackToPage1); </span></li><li class=""><span>} </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“mobileinit”, function() { (“#page2”).live(“swiperight”, goBackToPage1);
});
function goBackToPage1() {.mobile.changePage(“#page1”, { reverse: true }); $(“#page2”).unbind(“swiperight”, goBackToPage1);}
- (document).bind("mobileinit", function() { </span></span></li><li class=""><span> $("#page2").live("swiperight", goBackToPage1); </span></li><li class="alt"><span>}); </span></li><li class=""><span> </span></li><li class="alt"><span>function goBackToPage1() { </span></li><li class=""><span> $.mobile.changePage("#page1", { reverse: true }); </span></li><li class="alt"><span> $("#page2").unbind("swiperight", goBackToPage1); </span></li><li class=""><span>} </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“mobileinit”, function() { (“#page2”).live(“swiperight”, goBackToPage1);
- (document).bind("orientationchange", function(orientation) { </span></span></li><li class=""><span> if (<span class="attribute">orientation</span><span>=="landscape") { </span></span></li><li class="alt"><span> // 现在是纵向 </span></li><li class=""><span> } else { </span></li><li class="alt"><span> // 现在是横向 </span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“orientationchange”, function(orientation) { if (orientation==”landscape”) { // 现在是纵向 } else { // 现在是横向 }});
- (document).bind("pageloadfailed", function(event, data) { </span></span></li><li class=""><span> data.preventDefault();//阻止默认行为 </span></li><li class="alt"><span> // Custom error management </span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“pageloadfailed”, function(event, data) { data.preventDefault();//阻止默认行为 // Custom error management});
- </span><span class="attribute">.mobile.defaultTransitionHandler</span><span> = </span><span class="attribute-value">explodeTransitionHandler</span><span>; </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.defaultTransitionHandler = explodeTransitionHandler;
- </span><span class="attribute">.mobile.transitionHandlers.explode</span><span> = </span><span class="attribute-value">explodeTransitionHandler</span><span>; </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.transitionHandlers.explode = explodeTransitionHandler;
- .mobile.changePage("external.html"); </span></span></li></ol></div><pre name="code" class="html" style="display: none;">.mobile.changePage(“external.html”);转向当前文档中已经存在的内部页面：
- (document).bind('mobileinit', function() { </span></span></li><li class=""><span> // 在所有listviews中启用过滤 </span></li><li class="alt"><span> $<span class="attribute">.mobile.listview.prototype.filter</span><span> = </span><span class="attribute-value">true</span><span>; </span></span></li><li class=""><span> </span></li><li class="alt"><span> // 在所有选择框上启用非原生菜单 </span></li><li class=""><span> $<span class="attribute">.mobile.selectmenu.prototype.nativeMenu</span><span>=</span><span class="attribute-value">false</span><span>; </span></span></li><li class="alt"><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(‘mobileinit’, function() { // 在所有listviews中启用过滤
- (document).bind("mobileinit", function() { </span></span></li><li class=""><span> // We change default values </span></li><li class="alt"><span> $<span class="attribute">.mobile.ns</span><span> = </span><span class="attribute-value">"firt"</span><span>; </span></span></li><li class=""><span>}); </span></li></ol></div><pre name="code" class="html" style="display: none;">(document).bind(“mobileinit”, function() { // We change default values $.mobile.ns = “firt”;});为了避免框架间的冲突，可以使用ns全局属性来定义一个命名空间。例如上式使用后，页面模板就会变成：
阅读全文
0 0
- jQuery Mobile学习笔记（六）——jQuery Mobile API
- jQuery Mobile学习笔记（六）——jQuery Mobile API
- jquery mobile 学习笔记——listview
- JQuery Mobile学习笔记
- jquery mobile学习笔记
- jquery-mobile学习笔记
- JQuery Mobile学习笔记
- jquery mobile 学习笔记——入门基础（一）
- jquery mobile学习笔记——navbar（导航条）
- jQuery Mobile学习笔记（一）——移动平台
- jQuery Mobile学习笔记（二）——框架起步
- jQuery Mobile学习笔记（三）——UI组件
- jQuery Mobile学习笔记（四）——列表
- jQuery Mobile学习笔记（五）——表单组件
- jQuery Mobile学习笔记（九）——实例
- jQuery Mobile学习笔记（十）——扩展框架
- jQuery Mobile学习笔记（二）——框架起步
- jQuery Mobile学习笔记（三）——UI组件
- 指针和数组名
- Spring Boot中的return new ModelAndView("xxx") 和 return "xxx"的区别
- boost :: scoped_ptr的和std ::的unique_ptr的区别 是之间的唯一不同boost::scoped_ptr<T>和std::unique_ptr<T>的事实std::uni
- WEB前端性能优化
- 完全卸载GitLab
- jQuery Mobile学习笔记（六）——jQuery Mobile API
- .NET及.NET Core系统架构
- poj 1260 Java实现
- Java applet can't open files under Safari 7
- Spring @Validate 报 :"No validator could be found for type: java.lang.Long" 异常
- 读书笔记∣元数据：用数据的数据管理你的世界 Ch.3-4
- java web出现405已经导入jar包的正确方式
- mysql用命令修改数据库的用户名和密码
- Glide设置圆角图片后设置ImageVIew的scanType="centerCrop"无效解决办法
