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

最新推荐文章于 2019-03-20 16:33:44 发布

转载最新推荐文章于 2019-03-20 16:33:44 发布 · 455 阅读

·

0

·

jquery-mobile 专栏收录该内容

1 篇文章

订阅专栏

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

1.文档事件

[html] view plain copy

print ?

(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之前。
[html] view plain copy
print ?
1. <head>
2. <meta charset=“utf-8” />
3. <title>My first jQuery Mobile code</title>
4. <link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css” />
5. <script src=“http://code.jquery.com/jquery-1.6.4.min.js”></script>
6. <script>$(document).bind(<span style=“background-color: rgb(51, 204, 255);”>“mobileinit”</span>, function() {
7. // Our initialization code here
8. });
9. <script>
10. <script src=“http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>
11. <!– CUSTOM INITIALIZATION CODE –>
12. <script src=“customcode.js”></script>
13. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
14. </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>
        
        <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全局配置

用户界面配置：
[html] view plain copy
print ?
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功能：
  [html] view plain copy
  print ?
  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.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全局属性来定义一个命名空间。例如上式使用后，页面模板就会变成：
    
    [html] view plain copy
    print ?
    
    <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加载外部页面时显示的加载消息、外部页面无法加载时的加载错误消息以及一些其他基于组件的消息。
    
    下面是各个消息的列表及默认值：
    
    [html] view plain copy
    print ?
    
    // Global strings
    .mobile.pageLoadErrorMessage = “Error Loading Page”;
    
    // 组件字符串
    .mobile.dialog.prototype.options.closeBtnText = “Close”
    .mobile.collapsible.prototype.options. collapseCueText = “ click to collapse contents”;
    .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文本方案：
    
    [html] view plain copy
    print ?
    
    $(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页面配置
    
    [html] view plain copy
    print ?
    
    改变页面默认主题：
    
    改变页面默认主题：
    
    [html] view plain copy
    print ?
    
    $(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
    
    [html] view plain copy
    print ?
    
    $(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; });
    
    [html] view plain copy
    print ?
    
    <strong>
    </strong>
    
    <strong> </strong>
    
    [html] view plain copy
    print ?
    
    <strong>3.实用工具</strong>
    
    <strong>3.实用工具</strong>
    
    3.1Data-*工具
    
    [html] view plain copy
    print ?
    
    取得页面上所有btn集合：
    
    取得页面上所有btn集合：
    
    [html] view plain copy
    print ?
    
    var  = $("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”]);
    
    [html] view plain copy
    print ?
    
    JQM添加了一个名为jqmData的过滤器，并会应用我们指定的命名空间，上面的代码可以更改为：
    
    JQM添加了一个名为jqmData的过滤器，并会应用我们指定的命名空间，上面的代码可以更改为：
    
    [html] view plain copy
    print ?
    
    <pre name=“code” class=“html”var  = $("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,例如：
    
    [html] view plain copy
    print ?
    
    $("a").jqmRemoveData("transition");  </span></span></li><li class=""><span>$ (“#button1”).jqmData(“theme”, “a”);
    
    $("a").jqmRemoveData("transition"); $("#button1").jqmData("theme", "a");
    
    3.2页面工具
    
    当前页面：
    
    [html] view plain copy
    print ?
    
    var  = $.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方法，它允许我们转向另一个页面，就像用户点击了相应的链接一样。
    
    加载外部页面：
    
    [html] view plain copy
    print ?
    
    $.mobile.changePage("external.html");  </span></span></li></ol></div><pre name="code" class="html" style="display: none;">$ .mobile.changePage(“external.html”);转向当前文档中已经存在的内部页面：
    
    [html] view plain copy
    print ?
    
    $.mobile.changePage($ (“#pageId”));
    
    $.mobile.changePage($("#pageId"));
    
    更改页面切换效果：
    
    [html] view plain copy
    print ?
    
    $.mobile.changePage($ (“#page2”), {
        transition: “slide”,
        reverse: true
    });
    
    $.mobile.changePage($("#page2"), { transition: "slide", reverse: true });
    示例：通过POST方式发送数据并加载一个外部页面：
    
    [html] view plain copy
    print ?
    
    <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后将其隐藏
    
    [html] view plain copy
    print ?
    
    $.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过渡类型：
    
    [html] view plain copy
    print ?
    
    .mobile.transitionHandlers.explode = explodeTransitionHandler;
    修改默认的过渡，将它赋值为任何其他处理函数
    
    [html] view plain copy
    print ?
    
    .mobile.defaultTransitionHandler = explodeTransitionHandler;
    
    [html] view plain copy
    print ?
    
    </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创建页面：
    
    [html] view plain copy
    print ?
    
    <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>
    
    [html] view plain copy
    print ?
    
    function addPages() {
      for (var i=1; i<5; i++) {
          var  = $("</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>      $ (“<“).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>      $ (“<“).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事件，修改框架对应的行为。
    
    [html] view plain copy
    print ?
    
    <!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元素转换为按钮：
    
    [html] view plain copy
    print ?
    
    $("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更新部件
    
    [html] view plain copy
    print ?
    
    动态添加内容后，需要刷新这个部件。
    
    动态添加内容后，需要刷新这个部件。
    
    [html] view plain copy
    print ?
    
    $("#list1").listview('refresh');  </span></span></li><li class=""><span>$ (“#checkbox”).val(‘true’).checkboxradio(‘refresh’);
    
    $("#list1").listview('refresh'); $("#checkbox").val('true').checkboxradio('refresh');
    
    6.创建网格
    用于创建CSS网格。
    
    [html] view plain copy
    print ?
    
    $("#element").grid();  </span></span></li></ol></div><pre name="code" class="html" style="display: none;">$ (“#element”).grid();
    
    [html] view plain copy
    print ?
    
    根据它的子元素的数目，框架将自动为该元素应用正确的ui-grid-<letter>类，为其子元素应用ui-block-<letter>类。
    
    根据它的子元素的数目，框架将自动为该元素应用正确的ui-grid-<letter>类，为其子元素应用ui-block-<letter>类。
    
    [html] view plain copy
    print ?
    
    </pre><pre name=“code” class=“html”>
    
    </pre><pre name="code" class="html">
    7.改变页面内容
    
    要刷新一个容器，只需要在页面上触发create事件，这时每个部件就会再次检查是否需要创建新的实例。
    
    [html] view plain copy
    print ?
    
    $("#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移除
    
    [html] view plain copy
    print ?
    
    $("#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：指定页面无法加载时执行
    
    这些事件处理程序都会受到两个参数，一个事件对象和一个数据对象。
    
    [html] view plain copy
    print ?
    
    $(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方向事件
    
    [html] view plain copy
    print ?
    
    $(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：从左划到右时触发
    
    [html] view plain copy
    print ?
    
    $(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); }

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。