插件的创建和使用

 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));