$.fn.hilight = function(options){
//build main options before element interation
var opts = $.extend({},$.fn.hilight.defaults,options);
return this.each(function(){
var $this = $(this);
//build element specific options
var o = $.meta ? $.extend({},opts,$this.data()) : opts;
//一般句话，搞定支持元数据 功能
});
}
几行的变化完成了以下几件事：
1、检测元数据是否已经配置
2、如果已配置，将配置属性与额外的元数据进行扩展
复制代码 代码如下:
<!-- markup -->
<div>
Have a nice day!这是元数据
</div>
<div>
Have a nice day!在标签中配置
</div>
<div>
Have a nice day!
</div>
然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签：
复制代码 代码如下:
$('.hilight').hilight();
最后，将全部代码放在一起：
复制代码 代码如下:
//
//create closure
//
(function($){
//
// plugin definition
//
$.fn.hilight = function(options){
debug(this);
//build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
//iterate and reformat each matched element
return this.each(function(){
$this = $(this);
//build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
//call our format function
});
}
//
// private function for debugging
//
function debug($obj){
if(window.console && window.console.log){
window.console.log('hilight selection count: ' + $obj.size());
}
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt){
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground : 'red',
background : 'yellow'
};
//
// end of clousure
//
})(jQuery);
转载请注明出处
比较希望大家开发jquery plugin的时候可以在最后把方法开放出来
return {
method1: funcion() {},
method2: funcion() {}
}
这样我们在使用的时候就可以用如下方式调用
var plugin = $("<div/>").plugin();
plugin.mehtod1();
plugin.method2();
您可能感兴趣的文章: