开发jQuery插件方法总结

综述:在开发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,如果要添加别的方法,直接在原型上添加即可。

猜你喜欢

转载自blog.csdn.net/m0_37631322/article/details/83548233
今日推荐