您的位置：首页 > Web前端 > JQuery

使用自定义 jQuery 插件的一个选项卡Demo

2013-10-27 19:15 826 查看

前几天闲着没事，想着编写一个 jQuery 插件，或许这将是一个美好的开始。

这里是html页面：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="GB2312" />
<title>选项卡</title>
<link href="css/tabs.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#mytabs").tabs();
});
</script>
</head>
<body>
<div id="mytabs">
<ul>
<li><a href="#tabs1">选项1</a></li>
<li><a href="#tabs2">选项2</a></li>
<li><a href="#tabs3">选项3</a></li>
<li><a href="#tabs4">选项4</a></li>
</ul>
<div id="tabs1">First</div>
<div id="tabs2">Second</div>
<div id="tabs3">Third</div>
<div id="tabs4">Fourth</div>
</div>
</body>
</html>

下面看面按照顺序给出引用的内容。

首先是样式文件css/tabs.css ：

body {
background-color: #EEE;
}
.tabsDiv {
width: 500px;
height: 350px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
.tabsDiv ul {
width: 500px;
height: 30px;
list-style: none;
margin: 0px;
padding: 0px;
}
.tabsDiv li {
width:25%;
height:30px;
line-height:30px;
}
.tabsDiv div {
background-color: yellow;
height:20px;
width:60px;
text-align: center;
margin: 50px auto;
}
.tabsSeletedLi {
background-color: white;
float: left;
text-align: center;
}
.tabsSeletedLi a {
color: black;
text-decoration: none;
font-weight:bold;
}
.tabsSeletedLi a:hover {
color: grey;
}
.tabsUnSeletedLi {
background-color: black;
float: left;
text-align: center;
}
.tabsUnSeletedLi a {
color: white;
text-decoration: none;
font-weight:bold;
}
.tabsUnSeletedLi a:hover {
color: grey;
}

需要引用的 js/jquery.min.js 是必不可少的，这里就不提供了，大家可以自己去下载。

接下来是自定义jQuery插件 js/tabs.js ：

(function($) {
$.fn.tabs =    function() {
var    opts = {
switchingMode: "mouseover"  // or "click"
};
var obj = $(this);
var clickIndex = 0;
obj.addClass("tabsDiv");
$("ul li:first", obj).addClass("tabsSeletedLi");
$("ul li", obj).not(":first").addClass("tabsUnSeletedLi");
$("div", obj).not(":first").hide();
$("ul li", obj).bind(opts.switchingMode,
function() {
if (clickIndex != $("ul li", obj).index($(this))) {
clickIndex = $("ul li", obj).index($(this));
$(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
$(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
var    divid = $("a", $(this)).attr("href").substr(1);
$("div", obj).hide();
$("#" + divid, obj).show();
};
});
};
})(jQuery);

这个插件的最大好处就是可以更改 tabs 的切换方式，试着把 switchingMode: "mouseover" 改成 switchingMode: "click" 然后看看有什么效果？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航