注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的分类排序和筛选插件应用-Shuffle

jQuery插件 fishcity 3222浏览

这是一款基于jquery的流模式布局的分类排序和筛选插件应用-Shuffle,动画效果非常强大,插件简单易用,参数设置灵活。

特点

        快速 – 只有一个强迫同步布局(又名回流)的初始化,排序,或随机播放。

        使用CSS过渡!

        响应(尝试调整窗口的大小!)

        按组筛选项目

        项目可以有多个组和具有不同的尺寸

        排序项

        高级过滤(如搜索)

选项

设置您可以更改(这是默认值)

// 重载的选择
Shuffle.options = {
    group: 'all', // 过滤器组
    speed: 250, // 转换/动画速度(毫秒)
    easing: 'ease-out', // css的缓动函数
    itemSelector: '', // e.g. '.picture-item'
    sizer: null, // sizer element. Can be anything columnWidth is
    gutterWidth: 0, // 它告诉插件列之间的排水沟有多宽是(以像素为单位)
    columnWidth: 0, // 它告诉插件列的宽度是(以像素为单位)
    delimeter: null, // 如果你的小组是不是JSON,并且是逗号delimeted,你可以设置分隔符为','
    buffer: 0, // 根据百分比高度有用的,当他们可能不永远是完全相同的(以像素为单位)
    initialSort: null, // 随机播放可以用一种对象初始化。这是给sort方法对同一对象
    throttle: $.throttle || null, // 默认情况下,洗牌将试图扼杀resize事件。此选项将改变它所使用的方法
    throttleTime: 300, // 多久洗牌可以要求调整大小(以毫秒为单位)
    sequentialFadeDelay: 150, // 延迟每个新增项目时消失在项目之间
    supported: Modernizr.csstransforms && Modernizr.csstransitions // 支持过渡和转换
};

没有选项需要被指定,但itemSelector应该被使用。其他常见的选项来改变是速度,缓动,gutterWidth和columnWidth中(或筛)。

构建html,代码中起关键性的就是data-groups属性,它把字符转换成了valid JSON 形式,这样就可以根据数据来进行排序或筛选。当然,本例子中使用了 Twitter Bootstrap,也使用到了 BEM.

<div id="grid" class="row-fluid">
  <figure class="span3 picture-item" data-groups='["photography"]'>
    <img src="/img/baseball.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Baseball</figcaption>
      <p class="picture-item__tags">photography</p>
    </div>
  </figure>
  <figure class="span6 picture-item" data-groups='["wallpaper","3d"]'>
    <img src="/img/tennis-ball.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Tennis</figcaption>
      <p class="picture-item__tags">wallpaper, 3d</p>
    </div>
    <p class="picture-item__description">Some description here.</p>
  </figure>
  <figure class="span3 picture-item" data-groups='["wallpaper","3d"]'>
    <img src="/img/imac.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">iMac</figcaption>
      <p class="picture-item__tags">wallpaper, 3d</p>
    </div>
  </figure>
  <figure class="span3 picture-item picture-item--h2" data-groups='["graphics"]'>
    <img src="/img/master-chief.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Master Chief</figcaption>
      <p class="picture-item__tags">graphics</p>
    </div>
    <p class="picture-item__description">Some description here.</p>
  </figure></div>

更多的参数请参考官方文档。

转载请注明:jQ酷 » 基于jquery的分类排序和筛选插件应用-Shuffle

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。