本网站只能被运行在支持JavaScript脚本的环境中

结合使用CSS 3与jQuery将商品展示区在网格展示形式与列表展示形式之间进行切换

本文介绍如何结合使用CSS 3与jQuery将商品展示区在网格展示形式与列表展示形式之间进行切换。

实际运行结果

当需要进行切换时,点击位于商品展示区右上角的图标。页面打开时以列表形式展示商品。点击商品展示区右上角的第一个图标按钮(用于将商品展示区切换为网格展示形式)后,以网格形式展示所有商品,点击商品展示区右上角的第二个图标按钮(用于将商品展示区切换为列表展示形式)后,以列表形式展示所有商品。当以网格形式展示商品时,当商品图片获得焦点时,显示“立刻购买”按钮与“加入购物车”按钮。

Grid List

我们的商品

  • default thumb

    商品名

    商品ID: 543J423
    45.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J424
    55.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J425
    32.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J426
    70.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J427
    99.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J428
    45.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J429
    25.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J430
    60.00元 立刻购买 加入购物车
  • default thumb

    商品名

    商品ID: 543J431
    102.00元 立刻购买 加入购物车

页面HTML代码

本示例中的HTML代码并不复杂。首先来看商品展示区右上角用于切换商品展示形式的图标部分的HTML代码。

<span class="list-style-buttons">
    <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a>
    <a href="#" id="listview" class="switcher active"><img src="images/list-view-active.png" alt="List"></a>
</span>

我们使用一个ul列表元素中的每一个li列表项元素来展示每一个商品,其中包括商品缩略图,商品说明文字、商品价格、“立刻购买”按钮与“加入购物车”按钮。

<!--第一行-->
<li class="clearfix">
    <section class="left">
        <img src="images/list-default-thumb.png" alt="default thumb" class="thumb">
        <h3>商品名</h3>
        <span class="meta">商品ID: 543J423</span>
    </section>
  
    <section class="right">
        <span class="price">45.00元</span>
        <span class="darkview">
        <a href="javascript:void(0);" class="firstbtn"><img src="images/buy-now.png" alt="立刻购买"></a>
        <a href="javascript:void(0);"><img src="images/add-to-cart-btn.png" alt="加入购物车"></a>
        </span>
    </section>
</li>

CSS样式代码

在CSS样式代码中,我们分别为网格展示形式与列表展示形式准备两种样式代码。

首先来看列表展示形式部分使用的样式代码。

/** 列表展示形式 **/
ul.list { 
    list-style: none; 
    width: 100%; 
}
ul.list li { 
    display: block; 
    background: #c9d0d1; 
    padding: 10px 15px; 
}
  
ul.list li.alt { 
    background: #d7dfe0; 
}
ul.list li section.left { 
    display: block; 
    float: left; 
    width: 300px; 
    position: relative; 
    padding-left: 20px; 
}
ul.list li section.right { 
    display: block; 
    float: right; 
    margin-right: 10px; 
    width: 300px; 
    text-align: right; 
}
ul.list li section.left img.thumb { 
    float: left; 
    margin-right: 10px; 
}
ul.list li section.left img.featured-banner { 
    position: absolute; 
    left: -18px; 
    top: 35px; 
} 
ul.list li section.left h3 { 
    font-weight: bold; 
    color: #707375; 
    font-size: 1.4em; 
    line-height: 1.6em; 
}
ul.list li section.left span.meta { 
    color: #93989b; 
    font-weight: normal; 
    font-size: 1.1em; 
}
  
ul.list li section.right span.price { 
    font-weight: bold; 
    display: block; 
    margin-bottom: 15px; 
    color: #ad3939; 
    font-size: 1.6em; 
    text-align: right; 
}
ul.list li section.right a.firstbtn { 
    margin-right: 7px; 
}

接下来来看网格展示形式部分使用的样式代码。

/** 网格展示形式 **/
ul.grid { 
    list-style: none; 
    margin: 0 auto; 
    padding-left: 25px; 
}
ul.grid li { 
    position: relative; 
    display: block; 
    float: left; 
    width: 220px; 
    height: 250px; 
    border-right: 1px solid #b6bdbe; 
    padding: 5px 22px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}
ul.grid li.third { 
    border: 0; 
}  
ul.grid li section.left { 
    position: relative; 
} 
ul.grid li section.left img.featured-banner { 
    position: absolute; 
    top: 0; 
}  
ul.grid li section.left h3 { 
    font-weight: bold; 
    color: #707375; 
    font-size: 1.4em; 
    line-height: 1.5em; 
}
ul.grid li section.left span.meta { 
    display: block; 
    color: #93989b; 
    font-weight: normal; 
    font-size: 1.1em; 
    margin-bottom: 7px; 
}  
ul.grid li section.right span.price { 
    font-weight: bold; 
    display: block; 
    margin-bottom: 5px; 
    color: #ad3939; 
    font-size: 1.75em; 
}
  
ul.grid li section.right span.darkview {
    opacity: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 150px;
    margin: 0 15px;
    border-radius: 6px;
    background: rgba(40, 45, 55, 0.75);
    overflow: hidden;
    text-align: center;
    padding-top: 35px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: opacity 0.2s linear 0s;
    -webkit-transition: opacity 0.2s linear 0s;
    -moz-transition: opacity 0.25s linear 0s;
    -o-transition: opacity 0.25s linear 0s;
}
ul.grid li:hover section.right span.darkview {
     opacity: 1; 
}
ul.grid li section.right span.darkview a.firstbtn { 
    display: block; 
    margin-bottom: 10px; 
}

jQuery代码

在本示例中,使用如下所示的jQuery代码来进行列表展示形式与网格展示形式之间的切换。

$(document).ready(function(){ 
    $("a.switcher").bind("click", function(e){
        e.preventDefault();
         
        var theid = $(this).attr("id");
        var theproducts = $("ul#products");
        var classNames = $(this).attr('class').split(' ');
         
        var gridthumb = "images/grid-default-thumb.png";
        var listthumb = "images/list-default-thumb.png";
         
        if($(this).hasClass("active")) {
            //如果点击的图标按钮已经拥有了active样式类(代表再次点击同一个图标按钮),则什么都不做
            return false;
        } else {
            //否则切换商品展示形式 
            if(theid == "gridview") {
                $(this).addClass("active");
                $("#listview").removeClass("active");
             
                $("#listview").children("img").attr("src","images/list-view.png");
             
                var theimg = $(this).children("img");
                theimg.attr("src","images/grid-view-active.png");
             
                //移除list样式类,增加grid样式类,从而实现将列表展示形式切换到网格展示形式
                theproducts.removeClass("list");
                theproducts.addClass("grid");
             
                //更新缩略图为大图
                $("img.thumb").attr("src",gridthumb);
            }
             
            else if(theid == "listview") {
                $(this).addClass("active");
                $("#gridview").removeClass("active");
                     
                $("#gridview").children("img").attr("src","images/grid-view.png");
                     
                var theimg = $(this).children("img");
                theimg.attr("src","images/list-view-active.png");
                     
                //移除grid样式类,增加list样式类,从而实现将网格展示形式切换到列表展示形式
                theproducts.removeClass("grid")
                theproducts.addClass("list");
                //更新缩略图为小图
                $("img.thumb").attr("src",listthumb);
            } 
        } 
    });
});