(function($) { //1、设置默认信息 //2、设置空的配置信息 //3、设置核心执行函数，包括配置信息的继承，元素的创建，功能函数的执行。 //4、通过扩展对象插件的方法对外提供函数接口 var defaults = { //1、设置默认信息 }; var settings = {};//2、设置空的配置信息 //3、设置核心执行函数，包括配置信息的继承，元素的创建，功能函数的执行。 var This = null;//设置全局的This function FnExe(options) { This = this;//在目标对象下赋值 settings = $.extend(settings,defaults,option);//配置信息的继承 Create();//元素的创建 Fn();//功能函数 } function Create() {}//创建的时候通过配置参数的数据对创建的元素进行渲染 function Fn() {} $.fn.extend({//通过扩展对象插件的方法对外提供接口函数 FnExe : FnExe }); }(jQuery); //自己配置函数部分： $(function() { $("#id").FnExe({ //自己配置信息。 }); });
================demo================
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta content="width=device-width,initial-scale=1" name="viewport"> 6 <title>Tab_test</title> 7 <style> 8 body{padding: 0;margin: 0;} 9 .btns{ 10 width: 100%; 11 height: 3rem; 12 line-height: 3rem; 13 display: flex; 14 flex-direction: row; 15 justify-content: space-around; 16 } 17 .btn{ 18 width: 33%; 19 text-align: center; 20 } 21 .active{ 22 background: deepskyblue; 23 color: white; 24 } 25 .conts{ 26 width: 100%; 27 height: auto; 28 } 29 .cont{ 30 height: 40rem; 31 display: none; 32 } 33 </style> 34 </head> 35 <body> 36 <article id="Tab"> 37 <!--<section class="btns">--> 38 <!--<div class="btn active">按钮1</div>--> 39 <!--<div class="btn">按钮2</div>--> 40 <!--<div class="btn">按钮3</div>--> 41 <!--</section>--> 42 <!--<aside class="conts">--> 43 <!--<div class="cont">按钮1的内容</div>--> 44 <!--<div class="cont">按钮2的内容</div>--> 45 <!--<div class="cont">按钮3的内容</div>--> 46 <!--</aside>--> 47 </article> 48 <script src="../lib/scripts/jquery-1.12.4.js"></script> 49 <script> 50 $(function() {//通过插件提供的接口做自己的配置参数 51 $('#Tab').FnTabExe({ 52 btn : ['体育','娱乐','新闻','视频','关于我们'], 53 cont : ['体育11111111','娱乐123123123','新闻fffffff','视频ffffffggggg','关于我们123'], 54 event : 'mouseover' 55 }); 56 }); 57 (function($) { 58 //1、置默认信息 59 //2、配置信息 60 //3、核心执行函数,包括创建函数，功能函数等 61 //4、通过$.fn.extend(),基于对象的扩展,提供对外扩展的函数接口 62 var defaults = {//1、置默认信息 63 btn : ["导航一","导航二","导航三"], 64 cont : ["导航一的内容","导航二的内容","导航三的内容"], 65 event : "click" 66 }; 67 var settings = {};//2、配置信息 68 var $This = null; 69 function FnTabExe(options) {//3、核心执行函数,包括创建函数，功能函数等 70 $This = this; 71 settings = $.extend(settings,defaults,options); 72 Create(); 73 FnTab(); 74 } 75 function Create() { 76 var $section = $("<section>"); 77 $section.addClass("btns"); 78 $This.append($section); 79 for(var i = 0; i < settings.btn.length;i++) { 80 var $btn = $("<div>"+settings.btn[i]+"</div>"); 81 $btn.addClass("btn"); 82 if(i==0) { 83 $btn.addClass("active"); 84 } 85 $section.append($btn); 86 } 87 var $aside = $("<aside>"); 88 $aside.addClass("conts"); 89 $This.append($aside); 90 for(var i = 0;i < settings.cont.length;i++) { 91 var $cont = $("<div class='cont'>"+settings.cont[i]+"</div>"); 92 if(i==0) { 93 $cont.css("display","block"); 94 } 95 $aside.append($cont); 96 } 97 } 98 function FnTab() { 99 $This.find(".btn").on(settings.event,function() { 100 $This.find(".btn").removeClass("active"); 101 $(this).addClass("active"); 102 $This.find(".cont").css("display","none"); 103 $This.find(".cont").eq( $(this).index() ).css("display","block"); 104 }); 105 } 106 $.fn.extend({//4、通过$.fn.extend(),基于对象的扩展,提供对外扩展的函数接口 107 FnTabExe : FnTabExe 108 }); 109 })(jQuery); 110 </script> 111 </body> 112 </html>