JS实现商品筛选（3）

最新推荐文章于 2023-10-11 22:07:21 发布

lhw135864

最新推荐文章于 2023-10-11 22:07:21 发布

阅读量2.3k

点赞数 1

分类专栏： JS 文章标签：商品筛选

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这一次要分享的是以前写过的tab切换+分页，只是这次以面向对象的形式写出来。代码是基于jquery的，当然你也可以用原生JS来实现，不过得封装一些函数，不然甚是麻烦。

先说tabs组件，基于简单的考虑，我这个组件，只需要传两个参数，一个是触发器的元素数组，一个是切换内容的元素数组。个人感觉更好的，应该是要再传一个外层容器的ID，因为有时候可能触发器的class值会有重复的使用。当然，我的代码已经简单有了雏形，也懒得做出修改，大家可以在我的基础上进行再次加工。

page组件，无非考虑的是外层容器、分页容器、每页几条、根据什么元素来划分。当然这个分页算是一个假分页，因为真正的分页都是ajax请求。

好了，还是贴一下代码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>tab切换+分页</title>
    <style type="text/css">
       body{margin:0; font:12px/1.5 '\5b8b\4f53',sans-serif; color:#333;background:#eeefd3;padding:10px 10px 10px 50px;}
       h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0;}
       ul,ol{padding-left:0;list-style-type:none;}
       .tab_nav ul{zoom:1;}
       .tab_nav ul:after{clear: both;display: block;content:'';font-size:0;visibility: hidden;}
       .tab_nav li{float:left;width:100px;line-height:30px;cursor: pointer;border: red solid 1px;margin-right:10px;text-align: center;}
       .tab_nav .current{color: green;background: red;}
       .tab_content{margin-top:20px;width: 440px;height:170px;overflow: hidden;position: relative;}
       .tab_content p{margin-bottom: 10px;}
       .page{position: absolute;right:10px;bottom:0;text-align: right;}
       .page a{display: inline-block;padding: 0 5px;margin: 0 3px;}
       .page .current{color:red;}
    </style>
</head>
<body>
<div class="tab_nav">
    <ul>
        <li class="current">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
</div>
<div id="content1" class="tab_content">
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <div id="page1" class="page"></div>
</div>
<div id="content2" class="tab_content" style="display: none">
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <div id="page2" class="page"></div>
</div>
<div id="content3" class="tab_content" style="display: none">
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <div id="page3" class="page"></div>
</div>
<div id="content4" class="tab_content" style="display: none">
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第一条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第二条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第三条数据</p>
    <p class="item">第四条数据</p>
    <p class="item">第四条数据</p>
    <p class="item">第四条数据</p>
    <div id="page4" class="page"></div>
</div>
<script type="text/javascript" src="http://pc1.gtimg.com/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    /**
     * 简单的Tab组件
     * @param tabnav 导航元素数组
     * @param tabcon  内容元素数组
     */
    var Tabs = function(tabnav, tabcon) {
        this.tabnav = tabnav;
        this.tabcon = tabcon;
        this.init.apply(this,arguments);
    };
    Tabs.prototype = {
        init:function() {
            var _this = this;
            this.tabnav.each(function(i, oli) {
                $(oli).click(function() {
                    _this.tabnav.removeClass("current");
                    $(this).addClass("current");
                    _this.tabcon.css("display", "none");
                    _this.tabcon.eq(i).css("display", "block");
                })
            })
        }
    };
    /**
     * 简单分页组件
     * @param config
     * maxpage 每页几条 必须
     * box 容器ID
     * dataclass 按什么元素来划分，通常取class，因为有时候不一定以li元素为划分
     * pagebox 分页容器ID
     */
    var Page = function(config) {
        this.maxpage = config.maxpage || 10;
        this.containbox = $(config.containbox);
        this.dataclass = config.dataclass || "item";
        this.pagebox = $(config.pagebox);
        this.linum = $(this.dataclass,this.containbox).length;
        this.init.apply(this,arguments);
    }
    Page.prototype = {
        init:function() {
            //先清空分页元素里面的内容
            this.pagebox.html("");
            var totalpage = this.linum / this.maxpage;
            //向上舍入，比如有8条数据，8除6是1点几，Math.ceil的作用是让它变成2
            totalpage = Math.ceil(totalpage);
            //如果只有一页，那么没必要有这个分页的内容
            if (totalpage <= 1) {
                return;
            }
            this.current = 1;//存储当前页
            this.totalpage = totalpage;//存储总页数
            var str = "";
            for (var i = 0; i < this.totalpage; i++) {
                var c = "";
                if (i == 0) {
                    c = " current";
                }
                str += '<a href="javascript:;" class="pagenum' + c + '">' + (i + 1) + '</a>';
            }
            str = '<a class="prebtn" href="javascript:;"><< 上一页</a>' + str + '<a class="nextbtn" href="javascript:;">下一页 >></a>';
            this.pagebox.html(str);
            this.pagenums = $(".pagenum",this.containbox);
            var _this = this;
            this.goPage(1);
            this.pagenums.each(function(i,npage){
                $(npage).click(function(){
                    _this.goPage(this.innerHTML);
                });
            })
            $(".prebtn",this.containbox).click(function(){
                _this.goPrev(_this.current);
            });
            $(".nextbtn",this.containbox).click(function(){
                _this.goNext(_this.current);
            });
        },
        goPage:function(num) {
            this.current = num;
            this.pagenums.removeClass("current");
            this.pagenums.eq(num-1).addClass("current");
            var dataobjs = $(this.dataclass,this.containbox);
            dataobjs.each(function(i,itemdata){
                $(itemdata).css("display","none");
            });
            for (var i = (num - 1) * this.maxpage; i < num * this.maxpage; i++) {
                if (i < this.linum) {
                    dataobjs.eq(i).css("display","block");
                }
            }
        },
        goPrev:function(num) {
            if (num == 1) {
                return;
            }
            this.current --;
            this.goPage(this.current);
        },
        goNext:function(num) {
            if (num == this.totalpage) {
                return;
            }
            this.current ++;
            this.goPage(this.current);
        }
    };
    (function() {
        //tab切换的代码
        var tab = new Tabs($(".tab_nav li"), $(".tab_content"));
        //分页的代码
        var page1 = new Page({
            containbox:"#content1",
            maxpage:"6",
            dataclass:".item",
            pagebox:"#page1"
        });
        var page2 = new Page({
            containbox:"#content2",
            maxpage:"6",
            dataclass:".item",
            pagebox:"#page2"
        });
        var page3 = new Page({
            containbox:"#content3",
            maxpage:"6",
            dataclass:".item",
            pagebox:"#page3"
        });
        var page4 = new Page({
            containbox:"#content4",
            maxpage:"6",
            dataclass:".item",
            pagebox:"#page4"
        });
    })();
</script>
</body>
</html>

lhw135864

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实现商品筛选（3）

这一次要分享的是以前写过的tab切换+分页，只是这次以面向对象的形式写出来。代码是基于jquery的，当然你也可以用原生JS来实现，不过得封装一些函数，不然甚是麻烦。先说tabs组件，基于简单的考虑，我这个组件，只需要传两个参数，一个是触发器的元素数组，一个是切换内容的元素数组。个人感觉更好的，应该是要再传一个外层容器的ID，因为有时候可能触发器的class值会有重复的使用。当然，我的代码已经
复制链接

扫一扫