第三方插件可在：http：//jquerymobile.com/resources/#Plugins中查找，jQuery Mobile支持多种形式的扩展：
-
- 主题：一个CSS文件，或一组图片，或者两者兼容。
- 插件：一个JavaScript文件，一个css文件，为框架增添新的部件（data-role）。
- 扩展：一个JavaScript文件，为现有的jQuery Mobile部件和核心功能增加新的行为。
创建插件要认识到以下问题：
-
- 用户在使用插件时，只需在页面插入一个JavaScript文件和一个css文件。
- 插件应能无缝地兼容现有的自定义命名空间以及主题切换。
- 插件应和框架中的其他部分一样自动进行初始化
- 尽可能地避免使用通用的名字来命名自定义的data-role，以避免与框架后续版本中的命名发生冲突。
基础模板
-
- 自动初始化，即借助data-role或者带有语义的html5代码的声明，自动地初始化部件。
- 显示地通过jQuery语法调用部件的构造函数进行初始化。例如：$("#myelement").widgetname();
部件的模板：
(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));
自我理解：_create方法是部件的构造器。它只在初始化的时候被调用。因为这个是扩展，所以肯定有继承，父类的方法中有create方法，方法加个_变成子类的用法很常见。
实例：
例如定义一个dynamicimage。两种实现方式：
第一种是找到页面上的所有img元素自动地应用dynamicimage调整大小。
第二种是定义一个新的data-role，叫做dynamicimage，只针对data-role为dynamicimage的img元素来调整大小。
通常需要实现refresh、enable和disable这三个jQuery Mobile里的通用方法。例如，程序通过JavaScript改变图片的URL后，需要用$("#ourImag").dynamicimage("refresh")调用公有方法refresh来触发部件的刷新行为。
1 (function($){
2 //小部件的定义
3 $.widget("mobile.dynamicimage",$.mobile.widget,{
4 options:{
5 margin:0,width:100
6 },
7 _create:function(){
8 this._loadURL();
9 },
10 //私有方法
11 _loadURL:function(){
12 //this.element就是我们的img元素
13 var url;//原来定义Seccha IO Src服务的URl
14 url="http://src.sencha.io/";
15 var parameters="";
16 if(!isNaN(this.options.width)){
17 parameters+="X"+this.options.width;
18 }
19 if((!isNaN(this.options.margin))&&this.options
20 .margin>0){
21 parameters+="-"+this.options.margin;
22 }
23 if(parameters.length>0){
24 url+=parameters+"/";
25 }
26 //Sencha Io 需要提供URl的绝对路径
27 //使用jqmDat而不是attr，可以使代码兼容自定义命名空间。元素中所有
28 //data-*属性都会自动匹配到部件对象的this.optons；
29 var originalUrl=$(this.element).jqmData("src");
30 if(originalUrl.length>1){
31 var newUrl="";
32 if($.mobile.path.isAbsoluteUrl(originalUrl)){
33 //图片的Url是绝对路径
34 newUrl=originalU;
35 }else{
36 //图片url是相对路径，我们计算绝对路径
37 var baseUrl=$.mobile.path.parseUrl(location.href);
38 var baseUrlWithoutScript=baseUrl.protocol+"//"+baseUrl.host+baseUrl.directory;
39 newUrl=$.mobile.path.makeUrlAbsolute(originalUrl,baseUrlWithoutScript);
40 }
41 url+=newUrl;
42 $(this.element).attr("src",url);
43 }
44 },
45 //公有方法
46 enable:function(){
47 //启用小部件
48 $(this.element).attr(‘disabled‘,‘‘);
49 },
50 disable:function(){
51 //禁用小部件
52 $(this.element).removeAttr("disable");
53 },
54 refresh:function(){
55 //刷新小部件
56 this._loadURL();
57 }
58 });
59 //小部件定义结束
60 //自动化初始化代码，页面会查找所有data-role=“dynamicimage”属性的元素来创建dynamicimage实例。
61 $(document).bind(‘pagecreate‘,function(event){
62 //找到相应的data-role，调用dynamicimage的构造器
63 $(event.target).find("img:jqmData(role=‘dynamic-image‘)").dynamicimage();
64 });
65 }(jQuery));
使用方法：
<script src="jquery.mobile-dynamicimage-1.0.js"></script>
我们只需创建配置正确参数的img元素就可以了：
<!--占据屏幕全部宽度的图片-->
<img data-src="images/photo.png" data-role="dynamic-image">
<!--占据屏幕40%宽度的图片-->
<img data-src="images/photo.png" data-role="dynamic-image" data-width="40">
<!--占据屏幕100%宽度并且带20个像素的外边距的图片-->
<img data-src="images/photo.png" data-role="dynamic-image" data-width="40" data-margin="50">
插件推荐：
分页插件：http://filamentgroup.com/lab/jquery_mobile_pagination_plugin，可以对内容（比如图片）进行分页。
使用：创建一个data-role="pagination"的ul元素。每个jQuery Mobile页面都应该包含一个分页小部件。
例子：
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="1.html">prev</a></li>
<li class="ui-pagination-next"><a href="2.html">next</a></li>
</ul>
其它：
类似于ios应用程序底部的标签导航：http://www.stokkers.mobi/valuables/bartender.html
DateBox插件：http://dev.jtsage.com/jQM-DateBox
Simple Dialog插件（弹窗）：http://dev.jtsage.com/jQM-SimpleDialog
Action Sheet插件（模拟弹出菜单）：https://github.com/hiroprotagonist/jquery.mobile.actionsheet
供平板使用的插件：
SplitView插件可以在：http://asyraf9.github.com/jquery-mobile找到，利用它可以把页面分成两块区域，这两个区域也叫做面板。
MultiView插件：http://www.stokkers.mobi/valuables/multiview/page1.html和上面的差不多。但包括四个面板：菜单面板；主面板；全屏面板（可选，横屏时可用）；弹出面板（可选，竖屏时可用）；
兼容的jQuery UI插件：
photoswipt（http://photoswipe.com），创建照片画廊；
Diapo（http://www.pixedelic.com/plugins/diapo），很棒的css动画效果的幻灯片画廊；
jQuery UI Maps（http://code.google.com/p/jquery-ui-map），在移动web应用中集成Google地图的插件；
MobiScroll（http://www.mobiscroll.com）：使用步进器或者轮盘的方式进行事件日期的选择；