js自定义插件-选项卡

页面导航:首页 > 网络编程 > JavaScript > js自定义插件-选项卡

js自定义插件-选项卡

来源: 作者: 时间:2016-02-01 09:32 【

该功能比较简单,巩固一下jquery插件写法,注意引入的jquery js 、 自定义插件路径代码如下:页面:*{margin:0;padding:0;border:0;} banner{width:600px;height:144px;margin:70px 150px;di

该功能比较简单,巩固一下jquery插件写法,注意引入的jquery.js 、 自定义插件路径代码如下:

页面:

 







自定义插件:

 

该插件遵循固定模板:

;(function($){
/**入口函数**/
$.fn.optionChange = function(opts){

};
/**插件内部逻辑函数**/
$.fn.optionChange.methods = {

};
/**默认参数块**/
$.fn.optionChange.defaults = {

};
/**属性参数**/
$.fn.optionChange.parseOptions = function(target){

};
})(jQuery);

 

;(function($){
	/**入口函数**/
	$.fn.optionChange = function(opts){
		this.each(function(){
			opts.currObj = $(this);
			opts = $.extend({},$.fn.optionChange.defaults,opts,$.fn.optionChange.parseOptions);
			var tobjlen =  opts.currObj.find('.'+opts.triggerObjClass).length;
			var lobjlen =  opts.currObj.find('.'+opts.linkObjClass).length;
			if(tobjlen && lobjlen && tobjlen === lobjlen){
				$.fn.optionChange.methods.init(opts);
			}
		});
	};
	/**插件内部逻辑函数**/
	$.fn.optionChange.methods = {
		init:function(opts){
			var event = opts.event;
			var triggerObjClass = opts.triggerObjClass;
			var linkObjClass = opts.linkObjClass;
			var currObj = opts.currObj;
			var linkSelectFn = opts.linkSelectFn;
			currObj.find('.'+triggerObjClass).on(event,function(){
				$this = $(this);
				$this.addClass(opts.triggerSelectCss).siblings().removeClass(opts.triggerSelectCss);
				var _linkObj = currObj.find('.'+opts.linkObjClass).eq($this.index());
				_linkObj.addClass(opts.linkSelectCss).siblings().removeClass(opts.linkSelectCss);
			});
		}
	};
	/**默认参数块**/
	$.fn.optionChange.defaults = {
		event:'',
		triggerObjClass:'tiggerClass',
		triggerSelectCss:'',
		linkObjClass:'linkClass',
		linkSelectCss:'',
		currObj:{}
	};
	/**属性参数 该功能用不到属性参数 故返回空对象**/
	$.fn.optionChange.parseOptions = function(target){
		return {};
	};
})(jQuery);
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<