基于jQuery的插件开发

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