面向对象思想开发选项卡插件

最新推荐文章于 2024-11-07 13:38:59 发布

小鑫a

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量211

点赞数

分类专栏： jquery 文章标签： javascript jquery 选项卡 jquery插件

本文链接：https://blog.csdn.net/qq_38605121/article/details/86745586

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

面向对象思想开发选项卡插件 - 小鑫

参数	说明
triggerType	触发事件的类型
effect	切换的效果，只支持淡入淡出(fadeIn)和default
auto	是否自动切换，数值为自动切换
invoke	默认显示第几个选项卡

完整代码如下(部分有注释)：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    body {
	    	background: #323232
	    }
		.tab-sub {
			width: 200px;
			height: 150px;
			background: red;
			text-align: center;
			line-height: 150px;
			display: none;
			position: absolute;
		}
		div.actived {
			display: block;
		}

		button {
			border: 1px solid #000
		}

		.tab-sub:nth-child(1) {
			background: url(http://c.hiphotos.baidu.com/image/pic/item/8cb1cb13495409230f1c949d9f58d109b2de49d8.jpg) center center;
		}
		.tab-sub:nth-child(2) {
			background: url(http://c.hiphotos.baidu.com/image/pic/item/f636afc379310a55a12e3018ba4543a9832610d7.jpg) center center;
		}
		.tab-sub:nth-child(3) {
			background: url(http://h.hiphotos.baidu.com/image/pic/item/7dd98d1001e939015e5e48d476ec54e737d196f8.jpg) center center;
		}

		.tab2 {
			margin: 100px 250px;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="tab">
		<div class="nav">
			<button class="btn">1</button>
			<button class="btn">2</button>
			<button class="btn">3</button>
		</div>
		<div class="tabItems">
			<div class="tab-sub actived">1</div>
			<div class="tab-sub">2</div>
			<div class="tab-sub">3</div>
		</div>
	</div>
	<div class="tab tab2">
		<div class="nav">
			<button class="btn">1</button>
			<button class="btn">2</button>
			<button class="btn">3</button>
		</div>
		<div class="tabItems">
			<div class="tab-sub actived">1</div>
			<div class="tab-sub">2</div>
			<div class="tab-sub">3</div>
		</div>
	</div>

	<script>
		$(document).ready(function() {
			$('.tab').tab({
					triggerType: 'click',
					effect: 'fadeIn',
					auto: 1500,
					invoke: 1
				})
		});
		!function($) {
			function Tab(tab, setConfig) {
				// 获取元素盒子
				this.tab = tab;
				// 获取元素的导航
				this.menu = this.tab.find('.nav button');
				// 获取元素的切换内容
				this.tab_content = this.tab.find('.tabItems div');

				// 保存本身
				var _this = this;

				// 默认参数
				this.config = {
					triggerType: 'click',
					effect: 'fadeIn',
					auto: false,
					invoke: 2
				};
				// 如果输入了参数 就替换 否则就使用默认参数
				$.extend(this.config, setConfig);
				
			    // 定时器
				this.Timer = null;
				// 计数器
				this.loop = 0;

				if (this.config.auto) {
					this.autoPlay()
				}

				if (this.config.invoke) {
					this.invoke(this.config.invoke)
				}

				this.trigger(this.config.triggerType);
			}

			Tab.prototype = {
				test: function() {
					console.log('test success');
					console.log(this.menu)
				},
				change: function(index, effect) {
					if (this.config.effect == 'fadeIn') {
						this.tab_content.eq(index).fadeIn().siblings().fadeOut();
					}else {
						this.tab_content.eq(index).css({display: 'block'}).siblings().css({display: 'none'});
					}
					this.menu.eq(index).css({background: 'red'}).siblings().css({background: '#fff'})
				},
				trigger: function(triggerType) {
					var _this_ = this;
					this.menu.on(triggerType, function() {
						var index = $(this).index();
						console.log(_this_);
						// 点击的时候把定时器的索引值更新为当前点击的索引
						_this_.loop = index;
						_this_.change(index, _this_.config.effect);
					});
				},
				autoPlay: function() {
					var _this_ = this;
					this.Timer = setInterval(function() {

						_this_.loop++;

						if (_this_.loop == 3) {
							_this_.loop = 0;
						}

						_this_.change(_this_.loop, _this_.config.effect)
						console.log(_this_.loop)
					}, this.config.auto);

				},
				invoke: function(index) {
					this.menu.eq(index-1).css({background: 'red'});
					this.tab_content.eq(index-1).css({display: 'block'})
				}
			};

			// //调用直接new
			// Tab.init = function(tabs){
			// 	var _this = this;
			// 	tabs.each(function(){
			// 		new _this($(this));
			// 	});
			// }

			$.fn.extend({
				tab: function(config) {
					console.log($(this));
					// 获取到的元素都new一次Tab函数
					$(this).each(function() {
						new Tab($(this), config);
					})
					// console.log(config)
				}
			})

		}(jQuery)
	</script>
</body>
</html>