自定义Tab组件的实现

最新推荐文章于 2024-07-13 16:46:11 发布

Angela㐅cc

最新推荐文章于 2024-07-13 16:46:11 发布

阅读量188

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zaijianghu/p/tab.html

版权

在上一篇博文中，我发表了自定义表格的实现，今天说下tab组件，Tab组件在MIS系统中很常用，而且实现逻辑较为简单。

不多说废话，

最终效果图如下：

以下为实现代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
.ITab {

}

.ITab .TabContent {
    border:1px solid #CECECE;
    border-top: 0;
    padding: 10px;
}
.ITab > .TabBar {
    height:32px;
    border-bottom: 1px solid #CECECE;
}

.ITab > .TabBar  a {
    text-decoration: none;
    padding-left: 20px;
}

.ITab > .TabBar > ul{
    list-style-type: none;
    margin: 0 0 -1px 0;
    padding-left: 0px;
}

.ITab > .TabBar > ul > li {
    float: left;
    padding: 0 20px 0 10px;
    line-height: 30px;
    border-top:2px solid #34A637;
    border-radius: 5px 5px 0 0;
}

.ITab > .TabBar > ul > li:hover {
    background-color: #EEEEEE;
}

.ITab .borderBottom {
    border-bottom: 1px solid #CECECE;
}

.ITab .activeBorder {
    border-bottom: 1px solid #fff;
}

.ITab .borderRight {
    border-right: 1px solid #CECECE;
}

.ITab .borderLeft {
    border-left: 1px solid #CECECE;
}

.s-sicon {
background-image: url(http://s0.hao123img.com/res/skin/v4/lv.png);
background-position: -26px -357px;
background-repeat: no-repeat;

}
  </style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    function ITab(id) {
        this.id = id;

        this.init();
    }

    ITab.prototype.init = function() {
        var thisObj = this;
        $("#" + this.id + " .TabContent div").hide();
        $("#" + thisObj.id + " .TabContent div").eq(0).show();
        $("#" + this.id + " .TabBar ul li:eq(0)").addClass("activeBorder");

        $("#" + this.id + " .TabBar ul li a").on("click", function() {
            var index = $(this).parent().index();

            var oldTabItem = $("#" + thisObj.id + " .TabBar ul .activeBorder");
            var oldIndex = oldTabItem.index();
            oldTabItem.removeClass("activeBorder");
            $(this).parent().addClass("activeBorder");

            $("#" + thisObj.id + " .TabContent div").hide();
            $("#" + thisObj.id + " .TabContent div").eq(index).show();
        });
    }


$(function() {
    new ITab("itabtest");
});
</script>
</head>
<body>
<div class="ITab" id="itabtest">
<div class="TabBar">
<ul>
<li class="borderLeft borderRight borderBottom"><a class="s-sicon" href="#">Lorem</a></li>
<li class="borderRight borderBottom"><a href="#">Sed</a></li>
</ul>
</div>
<div class="TabContent">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis mi vel nulla condimentum, accumsan fermentum quam varius. Mauris et semper tortor. Curabitur porta pretium lectus, vel eleifend dui maximus eu. Aliquam sit amet velit massa. Nullam eu pulvinar velit. Praesent vestibulum, ipsum ac molestie condimentum, neque ligula sagittis nisl, nec interdum dui nisi aliquet nulla. Quisque nec justo ipsum. Maecenas elit leo, finibus quis mattis nec, suscipit non nulla. Praesent ac tincidunt magna. Nullam vitae ipsum non nunc volutpat laoreet non a nisi. Donec tempor eu tortor id commodo. Etiam pretium, sapien sit amet commodo porttitor, diam ligula posuere justo, non pharetra quam tellus ut lectus. Mauris vel elit metus. Morbi ullamcorper aliquet purus, sit amet elementum est faucibus quis. Sed porttitor sodales quam, euismod ultricies odio.</div>
    <div>Sed quis accumsan dui. Donec scelerisque orci sit amet velit ornare sodales. Aenean fringilla viverra quam, in scelerisque diam lobortis sed. Curabitur vulputate dictum laoreet. In hac habitasse platea dictumst. Pellentesque vel orci vehicula, efficitur lacus sit amet, convallis quam. Quisque sit amet quam sed mauris vehicula eleifend. Etiam ac feugiat neque.</div>
</div>
</div>
</body>
</html>

转载注明在江湖，谢谢！