基于jQuery的插件开发
Posted seafwg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于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================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>Tab_test</title>
<style>
body{padding: 0;margin: 0;}
.btns{
width: 100%;
height: 3rem;
line-height: 3rem;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.btn{
width: 33%;
text-align: center;
}
.active{
background: deepskyblue;
color: white;
}
.conts{
width: 100%;
height: auto;
}
.cont{
height: 40rem;
display: none;
}
</style>
</head>
<body>
<article id="Tab">
<!--<section class="btns">-->
<!--<div class="btn active">按钮1</div>-->
<!--<div class="btn">按钮2</div>-->
<!--<div class="btn">按钮3</div>-->
<!--</section>-->
<!--<aside class="conts">-->
<!--<div class="cont">按钮1的内容</div>-->
<!--<div class="cont">按钮2的内容</div>-->
<!--<div class="cont">按钮3的内容</div>-->
<!--</aside>-->
</article>
<script src="../lib/scripts/jquery-1.12.4.js"></script>
<script>
$(function() {//通过插件提供的接口做自己的配置参数
$(‘#Tab‘).FnTabExe({
btn : [‘体育‘,‘娱乐‘,‘新闻‘,‘视频‘,‘关于我们‘],
cont : [‘体育11111111‘,‘娱乐123123123‘,‘新闻fffffff‘,‘视频ffffffggggg‘,‘关于我们123‘],
event : ‘mouseover‘
});
});
(function($) {
//1、置默认信息
//2、配置信息
//3、核心执行函数,包括创建函数，功能函数等
//4、通过$.fn.extend(),基于对象的扩展,提供对外扩展的函数接口
var defaults = {//1、置默认信息
btn : ["导航一","导航二","导航三"],
cont : ["导航一的内容","导航二的内容","导航三的内容"],
event : "click"
};
var settings = {};//2、配置信息
var $This = null;
function FnTabExe(options) {//3、核心执行函数,包括创建函数，功能函数等
$This = this;
settings = $.extend(settings,defaults,options);
Create();
FnTab();
}
function Create() {
var $section = $("<section>");
$section.addClass("btns");
$This.append($section);
for(var i = 0; i < settings.btn.length;i++) {
var $btn = $("<div>"+settings.btn[i]+"</div>");
$btn.addClass("btn");
if(i==0) {
$btn.addClass("active");
}
$section.append($btn);
}
var $aside = $("<aside>");
$aside.addClass("conts");
$This.append($aside);
for(var i = 0;i < settings.cont.length;i++) {
var $cont = $("<div class=‘cont‘>"+settings.cont[i]+"</div>");
if(i==0) {
$cont.css("display","block");
}
$aside.append($cont);
}
}
function FnTab() {
$This.find(".btn").on(settings.event,function() {
$This.find(".btn").removeClass("active");
$(this).addClass("active");
$This.find(".cont").css("display","none");
$This.find(".cont").eq( $(this).index() ).css("display","block");
});
}
$.fn.extend({//4、通过$.fn.extend(),基于对象的扩展,提供对外扩展的函数接口
FnTabExe : FnTabExe
});
})(jQuery);
</script>
</body>
</html>
以上是关于基于jQuery的插件开发的主要内容，如果未能解决你的问题，请参考以下文章