现在的位置: 主页 > 联系方式 > 文章列表

js自定义插件-选项卡

作者:合肥瑶海区海美电器服务部 来源:www.an128l.com 未知发布时间:2017-09-08 19:00:44
js自定义插件-选项卡

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

页面:

选项1

选项2

选项3

选项1

选项2

选项3

选项1

选项2

选项3

自定义插件:

该插件遵循固定模板:

;(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);

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄石网站建设 http://huangshi.45qun.com

上一篇:Python time时间模块学习 下一篇:最后一页