jQuery Mobile学习笔记（六）——jQuery Mobile API

最新推荐文章于 2021-03-09 14:43:04 发布

不安分的johnscorpio

最新推荐文章于 2021-03-09 14:43:04 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/zhangjun123878/article/details/41924441

版权

Jquery Mobile 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

页面部分的介绍基本结束。有了框架之后，我们要考虑的页面中的数据通信和交互。jQuery Mobile（JQM）使用了JavaScript与框架通信以及进行内容管理的API。

1.文档事件

$(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>

2.配置（$.mobile代替jQuery中的$）

$.mobile.<widget_name>.prototype用于访问相应的原型。例如$.mobile.page.prototype.options可用于定义应用到每个页面实例（data-role="page"）的默认属性。这些设置全局或部件默认属性的设置要放在mobileinit事件中。

2.1全局配置

用户界面配置：

$(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() {
        // 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>

如果定义了命名空间，则需要手动修改CSS文件(包括结构和主题文件)以便识别。

$.mobile.ajaxEnabled = false:禁用所有Ajax功能，所有外部页面将通过浏览器使用完整的HTTP请求加载。

默认情况下，XMLHttpRequest不支持跨域请求，但是可以通过$.mobile.allowCrossDomainPages=true来开启跨域。

本地化字符串

使用Ajax加载外部页面时显示的加载消息、外部页面无法加载时的加载错误消息以及一些其他基于组件的消息。

下面是各个消息的列表及默认值：

// 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() {
  // 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() {
  $.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() {
    // 在所有listviews中启用过滤
    $.mobile.listview.prototype.filter = true;

    // 在所有选择框上启用非原生菜单
    $.mobile.selectmenu.prototype.nativeMenu=false;
});

<strong>
</strong>

<strong>3.实用工具</strong>

3.1Data-*工具

取得页面上所有btn集合：

var buttons = $("a[data-role=button"]);

JQM添加了一个名为jqmData的过滤器，并会应用我们指定的命名空间，上面的代码可以更改为：

<pre name="code" class="html">var buttons = $("a:jqmData(role='button')");

同时，在JQM集合对象上应该使用jqmData和jqmRemoveData来代替原来的jQuery函数data和removedata,例如：

$("a").jqmRemoveData("transition");
$("#button1").jqmData("theme", "a");

3.2页面工具

当前页面：

var currentPageId = $.mobile.activePage.id;

可以通过$.mobile.pageContainer属性访问当前页面的容器（通常为body元素），框架中最有用的工具是$.mobile.changePage方法，它允许我们转向另一个页面，就像用户点击了相应的链接一样。

加载外部页面：

$.mobile.changePage("external.html");

转向当前文档中已经存在的内部页面：

$.mobile.changePage($("#pageId"));

更改页面切换效果：

$.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>

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();
setTimeout(function() {
    $.mobile.hidePageLoadingMsg();
}, 2000);

$.mobile.fixedToolbars.show()/.hide():显示、隐藏固定工具栏

4.自定义过渡

添加一个explode过渡类型：

$.mobile.transitionHandlers.explode = explodeTransitionHandler;

修改默认的过渡，将它赋值为任何其他处理函数

$.mobile.defaultTransitionHandler = explodeTransitionHandler;

</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>

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) {
        // 从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();
    //或
var button = $("<a>").attr("href", "somewhere.html").button();

5.3更新部件

动态添加内容后，需要刷新这个部件。

$("#list1").listview('refresh');
$("#checkbox").val('true').checkboxradio('refresh');

6.创建网格

用于创建CSS网格。

$("#element").grid();

根据它的子元素的数目，框架将自动为该元素应用正确的ui-grid-<letter>类，为其子元素应用ui-block-<letter>类。

</pre><pre name="code" class="html">

7.改变页面内容

要刷新一个容器，只需要在页面上触发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) {

});

加载事件：
pagebeforeload：在所有Ajax请求完成之前执行

pageload：当新页面已被加载并插入到DOM后执行

pageloadfailed：指定页面无法加载时执行

这些事件处理程序都会受到两个参数，一个事件对象和一个数据对象。

$(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) {
    if (orientation=="landscape") {
         // 现在是纵向
    } else {
         // 现在是横向
    }
});

8.4手势事件

tap：在屏幕上快速触摸一下时触发

taphold：触摸屏幕并持续按住1s时触发

swipeleft：从右划到左时触发

swiperight：从左划到右时触发

$(document).bind("mobileinit", function() {
   $("#page2").live("swiperight", goBackToPage1);
});

function goBackToPage1() {
   $.mobile.changePage("#page1", { reverse: true });
   $("#page2").unbind("swiperight", goBackToPage1);
}

不安分的johnscorpio

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile学习笔记（六）——jQuery Mobile API

页面部分的介绍基本结束。有了框架之后，我们要考虑的页面中的数据通信和交互。jQuery Mobile（JQM）使用了JavaScript与框架通信以及进行内容管理的API。1.文档事件$(document).bind('mobileinit', function() { // Initialization code here});mobileinit事件会在jQueryMobil
复制链接

扫一扫

专栏目录