jQuery Mobile學習筆記（十）——擴展框架

JQM如此好用的一個重要原因是JQM的插件非常豐富。可以在JQM官網插件庫中找自己需要的插件。

創建插件

JQM是基於JQuery UI的框架進行構建的，所以爲JQM創建插件的方式和爲JQuery UI創建插件一樣。

創建部件要做的第一件事是命名，應儘可能避免和未來的框架部件重名。
部件應該包含一個命名格式爲jquery.mobile..js的JavaScript文件，還可以包含一個格式爲jquery.mobile..css的CSS文件。

部件的模板：

(function($){
     // 把所有的代碼封裝在這個方法中以確保$是JQuery對象的引用

     // 部件的定義
     $.widget("mobile.ourWidgetName", $.mobile.widget, {
            options: {
            // 創建部件默認的選項
            },
            // 私有方法
            _create: function() {
                // 構造函數
            },


            // 公有方法

            enable: function() {
                // 啓用部件
            },
            disable: function() {
                // 禁用部件
            },
            refresh: function() {
                // 刷新部件
            }
    });
    // 部件定義結束

    // 自動初始化代碼
    $(document).bind("pagecreate", function(event) {
        // 找到相應的data-role然後應用初始化方法
        $(event.target).find(":jqmData(role='ourWidgetName')").ourWidgetName();

    });

}(jQuery));

部件的功能是動態提供不同尺寸的圖片。（基於Sencha IO Src提供的雲服務，這個服務能夠根據當前移動瀏覽器的大小幫你調整圖片的尺寸地址戳這裏）

部件的名稱：dynamicimage

實現方式：1.找到頁面上的所有img元素自動地應用dynamicimage調整大小；2.定義一個新的data-role，叫做dynamicimage，只針對data-role爲dynamicimage的img元素來調整大小。我們這裏只實現第二種方式。

部件：
每個部件都是一個帶有屬性和方法的JavaScript對象，以下劃線爲首字母命名的方法是私有方法。在方法內部，this指代的是當前部件對象，而this.element指代的是部件所對應的HTML元素

$.widget("mobile.dynamicimage", $.mobile.widget, {
    options: {
        width: "100%",
        margin: 0
    }
});

_create方法是部件的構造器。它只在初始化的時候被調用，我們可以通過this.option來獲得部件的各項配置。構造方法如下：

$.widget("mobile.dynamicimage", $.mobile.widget, {
    options: {
        width: 100,
        margin: 0
    },
    _create: function() {
        // 調用一個私有方法
        this._loadURL();
    }
});

每個公有方法（方法名不以下劃線開頭的）都可以通過部件的接口調用。通常來說，我們至少需要實現refresh、enable、disable這三個JQM裏的通用方法。

$.widget("mobile.dynamicimage", $.mobile.widget, {
    options: {
        width: 100,
        margin: 0
    },
    _create: function() {
        // We call a private function
        this._loadURL();
    },
    // Public methods
    enable: function() {
        // 啓用部件
          $(this.element).attr('disabled', '');
    },
    disable: function() {
        // 禁用部件
          $(this.element).removeAttr('disabled');
    },
    refresh: function() {
        // 刷新部件
          this._loadURL();
    }
});

最後是包含核心邏輯的私有方法_loadURL的定義

_loadURL: function() {
        // this.element就是我們的img元素

        var url; // 用來定義Sencha IO Src服務的URL
        url = "http://src.sencha.io/";

        var parameters = "";
        if (!isNaN(this.options.width)) {
                parameters += "x" + this.options.width;
        }
        if ((!isNaN(this.options.margin)) && this.options.margin>0) {
                parameters += "-" + this.options.margin;
        }
        if (parameters.length>0) {
                url += parameters + "/";
        }

        // Sencha IO needs an absolute URL
        var originalUrl = $(this.element).jqmData("src");
        if (originalUrl.length>1) {
                var newUrl = "";
                if ($.mobile.path.isAbsoluteUrl(originalUrl)) {
                        // 圖片的URL是絕對路徑
                        newUrl = originalUrl;
                } else {
                    // 圖片的URL是相對路徑，我們來計算它的絕對路徑
                        var baseUrl = $.mobile.path.parseUrl(location.href);
                        var baseUrlWithoutScript = baseUrl.protocol + "//" + 
                            baseUrl.host + baseUrl.directory;
                        newUrl = $.mobile.path.makeUrlAbsolute(originalUrl, 
                            baseUrlWithoutScript);
                }

                url += newUrl;

                $(this.element).attr("src", url);
        }

自動初始化代碼：
頁面會查找所有帶date-role=“dynamicimage”屬性的元素來創建dynamicimage實例。

$(document).bind("pagecreate", function(event) {
    //找到相應的data-role，調用dynamicimage的構造器
    $(event.target).find("img:jqmData(role='dynamic-image')").dynamicimage();
});

使用插件：

<script src="jquery.mobile-dynamicimage-1.0.js"></script>

<-- Image taking the device's 100% width -->
<img data-src="images/photo.png" data-role="dynamic-image">

<-- Image taking the device's 40% width -->
<img data-src="images/photo.png" data-role="dynamic-image" data-width="40">

<-- Image taking the device's 100% width with 20 pixels of margin -->
<img data-src="images/photo.png" data-role="dynamic-image" data-margin="50">

完整代碼：

(function($){
     // Widget definition
     $.widget( "mobile.dynamicimage", $.mobile.widget, {
            options: {
                   margin: 0, width: 100
            },
            _create: function() {
                   this._loadURL();
            },

                // Private methods
                _loadURL: function() {
                     // this.element will be our +img+ element

                      var url; // we create the service URL
                      url = "http://src.sencha.io/";

                      var parameters = "";
                      if (!isNaN(this.options.width)) {
                              parameters += "x" + this.options.width;
                      }
                      if ((!isNaN(this.options.margin)) && this.options.margin>0) {
                              parameters += "-" + this.options.margin;
                      }
                      if (parameters.length>0) {
                              url += parameters + "/";
                      }

                      // Sencha IO needs an absolute URL
                      var originalUrl = $(this.element).jqmData("src");
                      if (originalUrl.length>1) {
                          var newUrl = "";
                          if ($.mobile.path.isAbsoluteUrl(originalUrl)) {
                                  // The image URL is already absolute
                                  newUrl = originalUrl;
                          } else {
                                  // The image URL is relative, we create an 
                                  // absolute one
                                  var baseUrl = $.mobile.path.parseUrl(location.href);
                                  var baseUrlWithoutScript = baseUrl.protocol + "//" 
                                      + baseUrl.host + baseUrl.directory;
                                  newUrl = $.mobile.path.makeUrlAbsolute(originalUrl, 
                                      baseUrlWithoutScript);
                          }

                          url += newUrl;

                          $(this.element).attr("src", url);
                      }
                },

                // Public methods
            enable: function() {
                // Enable the widget
                        $(this.element).attr('disabled', '');
            },
            disable: function() {
                // Disable the widget
                        $(this.element).removeAttr('disabled');
            },
            refresh: function() {
                // Refresh the widget
                        this._loadURL();
            }
    });
    // End of widget definition

    // Auto-initialization code
    $(document).bind("pagecreate", function(event) {
        // We find data-role's and apply our widget constructor
        $(event.target).find("img:jqmData(role='dynamic-image')").dynamicimage();

    });

}(jQuery));

介紹完了插件的製作，下面介紹一下常用的插件

插件精粹

1.分頁插件：
對內容（圖片）進行分頁，左右箭頭翻頁。地址
包含jquery.mobile.pagination.css和jquery.mobile.pagination.js兩個文件。
使用方法：

<ul data-role="pagination">
   <li class="ui-pagination-prev"><a href="1.html">Prev</a></li>
   <li class="ui-pagination-next"><a href="3.html">Next</a></li>
</ul>

2.Bartender插件
提供一個類似於ios應用程序底部的標籤導航。地址
使用方法：

<div data-role="navbar" data-grid="d">
   <ul class="apple-navbar-ui comboSprite">
      <-- elements -->
   </ul>
</div>

支持<span class = "ui-li-count">XXX</span>方式顯示計數氣泡。

3.DateBox插件
提供一個日期選擇器。地址
使用方法：

<input type="date" data-role="datebox">

4.Simple Dialog插件
使用JQM風格的窗口代替windos.alert、windows.confirm、windows.prompt來獲得用戶的輸入。地址
使用方法：
alert

$("#button").click(function() {
    $(this).simpledialog({
        mode: 'bool',  // For normal alert or confirm
        prompt: "We could not open the file",
        useModal: true,
        buttons: [
            'Ok':  {
               theme: "c", icon: "check"
            }
        ]
    });
});

confirm

$("#button").click(function() {
    $(this).simpledialog({
        mode: 'bool',
        prompt: "Do you want to delete this file?",
        useModal: true,
        buttons: [
            'Yes':  {
               theme: "c", icon: "delete",
               click: function() { // Delete }
            },
            'No':  {
               theme: "a", icon: "cancel"
            },
        ]
    });
});

prompt

$("#button").click(function() {
    $(this).simpledialog({
        mode: 'string',
        prompt: "What is your name?",
        useModal: true,
        buttons: [
            'No':  {
               theme: "c", icon: "delete",
               click: function() {
                   alert("Your name is " + $("#button").jqmData("string");
               }
            }
        ]
    });
});

5.Action Sheet插件
模態的彈出菜單。地址
使用方法：

<a data-role="actionsheet" data-sheet="share" data-icon="plus">Share</a>

<div id="share">
   <a href="facebook.html" data-role="button">Share in Facebook</a>
   <a href="twitter.html" data-role="button">Share in Twitter</a>
   <a href="google.html" data-role="button">Share in Google+</a>
   <a data-rel="close" data-role="button">Cancel</a>
</div>

6.平板使用的插件
SplitView插件地址
利用這個插件可以把頁面分成兩個區域（面板），橫屏時會顯示，豎屏時會隱藏。使用方法：

<body>
  <div data-role="panel" data-id="menu">
    <div data-role="page">

    </div>
  </div>
  <div data-role="panel" data-id="main">
    <div data-role="page">

    </div>
  </div>
</body>
<a href="demo.html" data-panel="main">Demos</a>

MultiView插件
與SplitView的功能差不多，實現不同。地址

其它插件
Photoswipe地址
創建照片畫廊的插件

Diapo地址
很棒的CSS動畫效果的幻燈片畫廊

jQuery UI Maps地址
Web應用中集成Google地圖的插件

MobiScroll地址
使用步進器或者輪盤的方式進行時間日期的選擇