今天更新一个tab标签切换的方法，是使用jquery库实现的，第一种流水形式，但是怎么能满足呢，要往更高的一层技术迈进，实现了jquery插件的封装。
先看第一种，原理很简单，就不在赘述了，只是交流一下模块化开发的经验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.bar{
width: 500px;
height: 50px;
border: 1px solid black;
}
.bar ul li {
list-style-type: none;
float: left;
}
.bar ul li a {
width: 70px;
display: block;
text-decoration: none;
height: 30px;
margin: 10px;
text-align: center;
line-height: 30px;
float: left;
}
.select{
background: red;
}
.container {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.container .contentBox{
display: none;
}
.container .contentBox img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="bar">
<ul>
<li><a href="#" class="select">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div class="container">
<div class="contentBox"><img src="image/1.jpg" alt=""/></div>
<div class="contentBox"><img src="image/2.jpg" alt=""/></div>
<div class="contentBox"><img src="image/3.jpg" alt=""/></div>
<div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
var list=$(".bar ul li a");
var content=$(".contentBox");
var time;
var flag=0;
var now;
var nowNumber;
var move= function () {
time=setInterval(function () {
flag++;
for(var i=0;i<list.length;i++){
list.eq(i).removeClass("select");
content.eq(i).css({display:'none'});
}
if(flag>3){
flag=0;
list.eq(flag).addClass("select");
content.eq(flag).css({display:'block'});
}else{
list.eq(flag).addClass("select");
content.eq(flag).css({display:'block'});
}
},1000);
};
list.hover(function () {
clearInterval(time);
now=$(this);
nowNumber=list.index(now);
list.removeClass("select");
$(this).addClass("select");
content.css({display:'none'});
content.eq(nowNumber).css({display:'block'});
}, function () {
nowNumber=list.index($(this));
flag=nowNumber;
move();
});
move();
content.hover(function () {
clearInterval(time);
}, function () {
move();
});
})
</script>
</html>
第二种是jquery 插件开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.bar{
width: 500px;
height: 50px;
border: 1px solid black;
}
.bar ul li {
list-style-type: none;
float: left;
}
.bar ul li a {
width: 70px;
display: block;
text-decoration: none;
height: 30px;
margin: 10px;
text-align: center;
line-height: 30px;
float: left;
}
.select{
background: red;
}
.container {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.container .contentBox{
display: none;
}
.container .contentBox img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="bar">
<ul>
<li><a href="#" class="select">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div class="container">
<div class="contentBox"><img src="image/1.jpg" alt=""/></div>
<div class="contentBox"><img src="image/2.jpg" alt=""/></div>
<div class="contentBox"><img src="image/3.jpg" alt=""/></div>
<div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
<script type="text/javascript">
(function ($) {
$.fn.tabs= function (options) {
var that=this;
var flag=0;
var time=null;
var index=null;
var defalut={
deplay:1000,
};
var setting= $.extend(defalut,options);
var tab={
play: function () {
var _that_=this;
_that_.list=$(".bar ul li a");
_that_.contentBox=$(".contentBox");
_that_.autoPlay( _that_.list,_that_.contentBox);
_that_.hover1(_that_.list,_that_.contentBox);
_that_.hover2(_that_.list,_that_.contentBox);
},
/*运行函数*/
autoPlay: function (element1,element2) {
var _that_=this;
time=setInterval(function () {
var len=element1.length;
flag++;
for(var i=0;i<len;i++){
element1.eq(i).removeClass("select");
element2.eq(i).css({display:'none'});
}
flag=flag%len;
element1.eq(flag).addClass("select");
element2.eq(flag).css({display:'block'});
},defalut.deplay);
},
hover1: function (element1,element2) {
var _that_=this;
element1.hover(function () {
clearInterval(time);
var now=$(this);
index=element1.index(now);
element1.removeClass("select");
element2.css({display:'none'});
element1.eq(index).addClass("select");
element2.eq(index).css({display:'block'});
}, function () {
flag=index;
clearInterval(time);
_that_.autoPlay(element1,element2);
})
},
hover2: function (element1,element2) {
var _that_=this;
element2.hover(function () {
clearInterval(time);
}, function () {
clearInterval(time);
_that_.autoPlay(element1,element2);
})
}
};
return this.each(function () {
tab.play();
})
}
})(jQuery);
$(".bar").tabs();
</script>
</html>
一定不要忘了，把插件的内部的执行函数return出来，并且使用this.each(function () {....} )
这样才会给每个符合的jquery对象上实现插件的效果
第三种方法：将要实现RequireJS的实现方法
让大家久等了，来更新了，这个使用requirejs写的，应该很好理解，如果不明白，请看我requirejs那个例子哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/require.js" data-main="js/main"></script>
<link rel="stylesheet" href="style/style.css"/>
</head>
<body>
<div class="bar">
<ul>
<li><a href="#" class="select">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div class="container">
<div class="contentBox"><img src="image/1.jpg" alt=""/></div>
<div class="contentBox"><img src="image/2.jpg" alt=""/></div>
<div class="contentBox"><img src="image/3.jpg" alt=""/></div>
<div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
</html>
下面是css文件
*{
padding: 0;
margin: 0;
}
.bar{
width: 500px;
height: 50px;
border: 1px solid black;
}
.bar ul li {
list-style-type: none;
float: left;
}
.bar ul li a {
width: 70px;
display: block;
text-decoration: none;
height: 30px;
margin: 10px;
text-align: center;
line-height: 30px;
float: left;
}
.select{
background: red;
}
.container {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.container .contentBox{
display: none;
}
.container .contentBox img{
width: 200px;
height: 200px;
}
下面是main入口文件
require.config({
baseUrl:'js/',
paths: {
jquery: 'jquery-2.1.4.min'
}
});
require(["jquery","b","a"],function($,fun,tab){
fun();
});
下面两个分别是tab切换函数的封装和启动函数
define(['jquery','a'], function ($,tab) {
var move= function () {
tab.play($(".bar ul li a"),$(".contentBox"));
};
return move();
});
define(['jquery'], function ($) {
var tab={
time:null,
flag:0,
number:0,
play: function (element1,element2) {
this.autoPlay(element1,element2);
this.hover1(element1,element2);
this.hover2(element1,element2);
},
autoPlay: function (element1,element2) {
var that=this;
that.time=setInterval(function (){
element1.removeClass("select");
element2.css({display:'none'});
that.flag++;
that.flag=that.flag%4;
element1.eq(that.flag).addClass("select");
element2.eq(that.flag).css({display:'block'});
},1000)
},
hover1: function (element1, element2) {
var that=this;
element1.hover(function () {
clearInterval(that.time);
that.number=element1.index($(this));
element1.removeClass('select');
element2.css({display:'none'});
element1.eq(that.number).addClass('select');
element2.eq(that.number).css({display:'block'});
}, function () {
clearInterval(that.time);
that.flag=that.number;
that.autoPlay(element1,element2);
});
},
hover2: function (element1, element2) {
var that=this;
element2.hover(function () {
clearInterval(that.time);
}, function () {
clearInterval(that.time);
that.autoPlay(element1, element2);
})
}
};
return tab;
});
