综述:在开发tip小组件的时候的思考,对核心点进行总结,加深理解
1.核心知识点总结
$.extend()用于给$类添加方法,另一个用于给jquery对象添加方法,就是通过$获取到的对象
var defaultAttr={
opacity:0.9,
content:'',
size:'medium',
position:'bottom',
theme:'dark',
trigger:'hover',
animation: 'none',
confirm: false,
sure: '确定',
cancel: '取消',
finalMessage: '',
finalMessageDuration:1000,
childrenElement:"",
onSure:function(){},
onCancel:function(){}
};
//给jQuery对象,逐个添加该方法
$.fn.opsTipUtil=function(options){
this.each(function(){
options = $.extend({},defaultAttr,options);
//将默认的配置项和外界传入的配置项进行合并,外部的大于内部的
var tooltip = new OpsTipUtil($(this),options);
//$(this)=触发tip的元素,option=配置的内容
tooltip.activate();
});
};
2.其他工作
上边已经将怎样扩展一个jQuery方法的核心功能进行展示,下面就构造函数OpsTipUtil()进行简单介绍
function OpsTipUtil(element, options){
this.boundElement = element; //当前需要触发tip的元素
this.options = options; //tip配置内容
}
OpsTipUtil.prototype={
//显示tip
show: function(){
//页面上,一次只能显示一个tip,在开启前,先关闭其他的
$('ins.tipOfOps').hide();
this.tooltip.css('display', 'block');
},
//隐藏tip
hide: function(){
this.tooltip.hide();
}
}
这是一个核心demo,如果要添加别的方法,直接在原型上添加即可。