http://www./jQuery/Layout-Interface/201501171219.html 这是一款非常实用的 jQuery 内容过滤器插件。一个设计良好的内容过滤系统能够为用户带来最佳的体验和方便。如果你的网站有大量不同类别的内容,例如一个商务网站,那么使用这个内容过滤器系统能够使客户非常容易的就找到他们想要的商品。 在这个内容过滤器系统中使用了 jQuery、CSS3 Transitions 和 CSS3 Transformations 来制作。 该jQuery内容过滤器插件中集成了一款强大的内容过滤插件- MixItUp 。MixItUp是一个能够提供过滤和排序的jQuery插件。 HTML结构这个jQuery内容过滤器插件的HTML结构稍微有点复杂。首先,它有两个主要的内容块:<header>和<main>。<main> 用于页面主体部分,它包裹了图片画廊.cd-gallery和过滤器选项面板.cd-filter。另外,还有一个标签导航(嵌套了两层 你还会注意到有很多的class和 注意:代码中通过在.cd-gallery使用text: justify;属性,然后联合.cd-gallery下面的.gap元素来制作画廊的网格。你需要创建最大行数-1个.gap元素。
CSS样式这里要说的一个有趣的问题是:如何通过jQuery来定义和使用一些class来改变它们的行为。 例如:在所有的设备上,内容过滤器导航条被固定在窗口的顶部,为了达到这种效果,我们在<main>元素上使用 .is-fixed class,这样我们就可以控制它的子元素。特别的是, .cd-tab-filter-wrapper 的position是static的,而 .cd-filter 和 .cd-filter-trigger 的position是absolute的(相对于 .cd-main-content 元素)。当我们在 .cd-main-content 上使用 .is-fixed 类的时候,我们将所有这些元素的position都修改为Fixed的。
另外值得一提的是,.filter-is-visible class。当用户触发内容过滤器面板时它被一些元素所使用。在所有的设备上,它被用于修改 .cd-filter 的 JAVASCRIPT为了实现内容过滤器功能,我们集成了jQuery MixItUp 插件。要在画廊中初始化这个插件,我们使用 mixItUp() 方法,并定义 buttonFilter 来包含所有过滤器的自定义功能。 我们使用jQuery来打开和关闭内容过滤器面板,并将它固定在屏幕的左侧位置,不随页面向下滚动。 |
|
来自: 绝笔斓姗 > 《jquery之家-网站》