过滤块

我们工作中的一位电子商务客户有一些产品，他们希望在网上进行促销。每个产品都有不同的“原因”使其成为特价商品。也许它已停产，也许是特价，也许是免运费。最初，他们希望为一种新的折扣类型构建一个特殊的页面：“回滚定价”。我们认为，一般来说，网站上的访问者并不真正关心产品为什么在打折，只关心它是否在打折，并且将特价页面拆分成不同的页面可能会适得其反。

相反，我们折衷了将特价页面保留为单个页面，但允许产品同时显示，或按其特价类型进行过滤。一点 jQuery 总是可以胜任的！

 

查看演示   下载文件

 

标记

每个块都有一个包装 div。它具有一个与所有其他块共享的类，用于通用样式，以及一个与其“类型”唯一的类。Div 没有 href 元素，但它们可以具有 rel 属性，我用它来存储 URL。在演示中，div 的可点击性没有实现，但代码在 JavaScript 中只是被注释掉了，因此您可以看到如何在其中实现这一点。

<div class="discounted-item reduced" rel="/store/catalog/Dryline_Markers-47-1.html">

    <img src="images/discountthumb-streamliner.jpg" alt="streamliner" />
    
    <div class="reasonbar">
        <div class="prod-title">Streamliner Field Chalkers</div>
        <div class="reason">Rollback Pricing</div>
    </div>

    <div class="discount-bar">
        Price lower than catalog. Save $30!
    </div>

</div>

“过滤”菜单只是一系列链接。每个链接都有一个 ID，与它打算按其过滤的类型的类匹配

<p id="catpicker">
<a href="#" id="allcat" class="current">VIEW ALL</a> | 
<a href="#" id="reduced" class="filter">Rollback Pricing</a> | 
<a href="#" id="freeshipping" class="filter">Free Shipping</a> | 
<a href="#" id="discontinued" class="filter">Closeout</a> | 
<a href="#" id="webonly" class="filter">Web Only</a>
</p>

CSS

CSS 中没有什么太复杂的操作，但为了保险起见，我在这里放一下。

*                           { margin: 0; padding: 0; }
html                        { overflow-y: scroll; }
body                        { font: 12px Georgia; }

#page-wrap                  { width: 690px; margin: 20px auto; }

h1                          { font: 30px Georgia; margin: 0 0 10px 0;  }

.discounted-item            { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer;
                              height: 79px; }

.discount-bar               { padding: 10px 0 10px 150px; font: italic 18px Georgia, Serif; }

.reasonbar                  { padding: 4px 0 4px 150px; overflow: hidden;
                              width: 540px; color: white; }
                 
.prod-title                 { width: 49%; float: left; font: bold 17px Helvetica, Sans-Serif; }
.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; 
                              letter-spacing: 2px; padding: 0 5px 0 0; }
                              
.discounted-item img        { position: absolute; top: 0; left: 0; }

.reduced                    { border: 2px solid #A34427; }
.reduced .reasonbar         { background: #A34427; }
.reduced .discount-bar      { color: #A34427; background: white; }

需要注意的一些随机事项

• 由于页面的高度会增大和缩小，因此最好强制使用垂直滚动条，以避免水平居中时的跳跃。
• 图像使用绝对定位放置。对于此，易于使用且稳定的布局技术，无需浮动。
• Div 应用了指针光标，因为在实际场景中它们将是可点击的。

jQuery JavaScript

添加了一些不透明度悬停操作。（此外，这是您可以使 div 可点击的区域，请参阅示例中的实际 JS）。

$(".discounted-item")
        .css("opacity","0.8")
       .hover(function(){
           $(this).css("opacity","1");
       }, function() {
           $(this).css("opacity","0.8");
});

并使过滤工作

$("#allcat").click(function(){
       $(".discounted-item").slideDown();
       $("#catpicker a").removeClass("current");
       $(this).addClass("current");
       return false;
});
   
$(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".discounted-item").slideUp();
        $("."+ thisFilter).slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
});

“查看全部”按钮的代码略有不同，因为它只需要显示所有内容。

在实时演示中，还有一些“随机”操作，以便特价的顺序在每次页面加载时都会随机化，这要归功于 James Padolsey 的 DOM 洗牌器。

类似教程

Trevor Davis 之前在 NETTUTS 上做了一个 非常类似的演示。