Ich habe gelernt, wie man JavaScript-Plug-Ins schreibt, und heute werde ich ein kleines Plug-In aufzeichnen, das ich geschrieben habe. Dieser Artikel stellt hauptsächlich den JavaScript-Plug-in-Tab-Effekt im Detail vor. Interessierte Freunde können darauf verweisen.
In diesem Artikel werden die grundlegende Verwendung, die implementierten Funktionen und der Code dieses Plug-Ins vorgestellt.
Werfen wir zunächst einen Blick auf den endgültigen Effekt:
Dies ist ein gewöhnliches Tab-Plug-in. Lassen Sie uns weiter unten über seine Implementierung sprechen . Welche Funktionen:
1. Unterstützen Sie verschiedene Mausereignisse, um Tab-Umschalteffekte auszulösen.
3 . Unterstützt die Standard-Anzeigenummernkonfiguration von Tabs;
4.
Das Beispiel ist sehr einfach und die erforderlichen Kenntnisse umfassen:
1. Grundkenntnisse in HTML und CSS
2.
Kurz gesagt geht es darum, verschiedene Effekte durch Parameterkonfiguration anzuzeigen.
Sehen wir uns an, wie man es verwendet:
1. $(".js-tab();
2 ") .etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
3. Tab. init( $(".js-tab"));
Dieses Plug-in unterstützt mehrere verschiedene Initialisierungsmethoden und der Code ist sehr einfach, ähnlich wie die Verwendung des BootStrap-Plug-ins. Der vollständige Code ist unten angegeben:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
<link href="tab.css" rel="stylesheet">
<style>
* {
margin:0;
padding:0;
}
body {
background-color: #323232;
font-size:12px;
font-family:微软雅黑;
padding:100px;
}
ul, li {
list-style-type: none;
}
</style>
<script src="../lib/jquery-1.11.3.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
<p class="js-tab tab">
<ul class="tab-nav">
<li class="active"><a href="#">新闻</a> </li>
<li><a href="#">电影</a> </li>
<li><a href="#">娱乐</a> </li>
<li><a href="#">科技</a> </li>
</ul>
<p class="content-wrap">
<p class="content-item current">
<h3>新闻</h3>
</p>
<p class="content-item">
<h3>电影</h3>
</p>
<p class="content-item">
<h3>娱乐</h3>
</p>
<p class="content-item">
<h3>科技</h3>
</p>
</p>
</p>
<script>
$(function() {
// Tab.init($(".js-tab"));
$(".js-tab").etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
$(".js-tab").etab();
});
</script>
</body>
</html>Nach dem Login kopieren
.tab {
width: 300px;
}
.tab .tab-nav {
height: 30px;
}
.tab .tab-nav li {
float: left;
margin-right:5px;
background-color:#767676;
border-radius:3px 3px 0 0;
}
.tab .tab-nav li a{
display:block;
height:30px;
padding:0 20px;
color: white;
line-height:30px;
text-decoration: none;
}
.tab .tab-nav .active {
background-color: #fff;
}
.tab .tab-nav .active a{
color: #777;
}
.tab .content-wrap{
background-color: white;
padding:5px;
height:200px
}
.tab .content-wrap .content-item {
position:absolute;
height: 200px;
display: none;
}
.tab .content-wrap .current {
height: 200px;
display: block;
}Nach dem Login kopieren
Endlich Listen Sie den Plug-In-Code auf, und in den Code wurden sehr detaillierte Kommentare geschrieben:
/**
* Created by Wu.lin on 2017/11/12.
*/
(function($){
var Tab = function(tab, _params) {
var _this = this;
//保存单个Tab组件
this.tab = tab;
this.params = _params;
//默认配置参数
this.config = {
//用来定义鼠标的出发类型 "click"/mouseover
"triggerType": "mouseover",
//用来定义内容切换效果，直接切换/淡入淡出
"effect": "default",
//默认展示第几个Tab
"invoke": "1",
//用来定义Tab是否自动切换，当指定了事件间隔，就表示自动切换，并指定了切换间隔
"auto": false
};
//如果配置参数存在，就扩展默认的配置参数
if(this.params){
$.extend(this.config, this.params);
}
//保存Tab标签列表，以及对应的内容列表
this.tabItem = this.tab.find("ul.tab-nav li");
this.contentItem = this.tab.find("p.content-wrap .content-item");
//保存配置参数
var config = this.config;
if(config.triggerType === "click") {
this.tabItem.bind(config.triggerType, function() {
_this.invoke($(this));
});
} else {
this.tabItem.mouseover(function(){
_this.invoke($(this));
});
}
//自动切换功能
if(config.auto) {
this.timmer = null;
//计数器
this.loop = 0;
this.autoPlay();
this.tab.hover(function() {
window.clearInterval(_this.timmer);
}, function() {
_this.autoPlay();
});
}
//设置默认显示第几个Tab
if(config.invoke > 1) {
this.invoke(this.tabItem.eq(config.invoke - 1));
}
};
Tab.prototype = {
//事件驱动函数
invoke: function(currentTab) {
/**
* 1、执行Tab选中状态，当前选中Tab加上Active,
* 2、切换对应Tab内容，根据配置参数effect参数default|fade
*/
var index = currentTab.index();
var conItem = this.contentItem;
//Tab切换
currentTab.addClass("active").siblings().removeClass("active");
//内容区域切换
var effect = this.config.effect;
if(effect === "fade") {
conItem.eq(index).fadeIn().siblings().fadeOut();
} else {
conItem.eq(index).addClass("current").siblings().removeClass("current");
}
//注意，如果配置了自动切换，记得把当前的loop值设置为当前的Tab的index
if(this.config.auto) {
this.loop = index;
}
},
//自动间隔切换
autoPlay: function() {
var _this_ = this,
tabItems = this.tabItem, //临时保存Tab列表
tabLength = tabItems.size(),
config = this.config;
this.timmer = window.setInterval(function() {
_this_.loop++;
if(_this_.loop >= tabLength) {
_this_.loop = 0;
}
tabItems.eq(_this_.loop).trigger(config.triggerType);
}, config.auto);
}
};
Tab.init = function(tabs) {
var _this_ = this;
tabs.each(function() {
new _this_($(this));
});
// var tab = new Tab($(".js-tab").eq(0));
};
//注册成JQuery方法
$.fn.extend({
etab: function(_param) {
this.each(function () {
new Tab($(this), _param);
});
return this;
}
});
window.Tab = Tab;
})(jQuery);Nach dem Login kopieren
Es scheint, dass es sehr einfach ist, versuchen wir es gemeinsam!
Verwandte Empfehlungen:
JS-Beispielcode zum Implementieren des Tab-Switching-Effekts
Verwenden Sie reines CSS3, um ein Tab-Tab-Switching-Beispiel zu implementieren
So machen Sie diesen Tab effect_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonInformationen zum Teilen von Tab-Effekten mit dem JavaScript-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
