jQuery插件开发笔记

一 UI界面

二 代码

(function($){
var rtag = /{\w+}/ig;
var rtagname = /^{(\w+)}$/;

$.fn.db88imagemanager = function(options){
var opts = $.extend({},$.fn.db88imagemanager.defaults,options);
return this.each(function(){
$this = $(this);
$this.html(toMarkup(opts.data,opts.wrapformat,opts.dataformat,opts.buttonformat));
$this.find(".actions > li").live("click",function(){
$.fn.db88imagemanager.events[$(this).attr("action")]($(this).closest("div.img-item"),$this);
});
});
};

function setCursor(node,pos){
var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
if(!node){
return false;
}else if(node.createTextRange){
var textRange = node.createTextRange();
textRange.collapse(true);
textRange.moveEnd(pos);
textRange.moveStart(pos);
textRange.select();
return true;
}else if(node.setSelectionRange){
node.setSelectionRange(pos,pos);
return true;
}
return false;
}

function makeArray(obj){
return $.isArray(obj) ? obj :[obj];
}

function replaceTag(pattern,obj){
var ret='';
$.each(makeArray(obj),function(i,v){
ret += pattern.replace(rtag,function(word){
return v[rtagname.exec(word)[1]];
});
});
return ret;
}

function toMarkup(json,wrapformat,dataformat,buttonformat){
var ret='';
$.each(makeArray(json),function(i,v){
ret += replaceTag(wrapformat,{
index:i,
data:replaceTag(dataformat,v),
buttons:replaceTag(buttonformat,v.buttons)
});
});
return ret;
}

$.fn.db88imagemanager.defaults = {
data:'',
dataformat:'<div class="img-desc"><h3>{title}</h3><img src="{image}" alt="{title}" /><p>{tag}</p></div>',
buttonformat:'<li action="{action}"><a href="javascript:void(0)">{text}</a></li>',
wrapformat:'<div class="img-item" id="item{index}">{data}<ul class="actions">{buttons}</ul></div>'
};

$.fn.db88imagemanager.events = {
edit:function(obj,target){
return;
},
tag:function(obj,target){
return;
},
rename:function(obj,target){
return;
},
download:function(obj,target){
return;
},
getimageurl:function(obj,target){
return;
},
deleteimage:function(obj,target){
return;
}
};
})(jQuery);

三 插件使用　　

$("#imagelibrary").db88imagemanager({
data:[
{title:'test image 1',image:'http://preview1.88db.com/hk/html/images/logo_88db.jpg',tag:'88DB',buttons:[
{text:'Edit',enable:true,action:'edit'},
{text:'Rename',enable:false,action:'rename'}
]},
{title:'test image 2',image:'http://preview1.88db.com/hk/html/images/logo_88db.jpg',tag:'88DB,dev',buttons:[
{text:'Edit',enable:true,action:'edit'},
{text:'Rename',enable:true,action:'rename'}
]}
]
});