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地址
使用步进器或者轮盘的方式进行时间日期的选择