插件的创建和使用

       　第三方插件可在：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));

View Code

    使用方法：

    <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）：使用步进器或者轮盘的方式进行事件日期的选择；