jQuery Wookmark-2 jQuery动态表格插件的效果展示

左手的ㄟ右手 2021-12-21 04:51 309阅读 0赞

之前在博客中写过一篇有关于Wookmark的文章，只能算是一个简单的介绍，至于它内部真正的用法和效果的展示，并没有具体的写出来，今天简单将其用法和效果的一些展示在这篇博客中介绍下，如果你想简单看下以前有关于Wookmark的介绍的话，可以访问地址：[http://blog.csdn.net/sunyingyuan/article/details/17613627][http_blog.csdn.net_sunyingyuan_article_details_17613627]

## 简介 ##

Wookmark是一个为了展示动态表格元素的一款非常实用的jQuery插件。

你可以到[http://www.wookmark.com/jquery-plugin][http_www.wookmark.com_jquery-plugin]查看其示例。

![SouthEast][]

如果你喜欢这个项目的话，同时也可以向这个项目捐助：[捐助][Link 1]

## 配置 ##

1.jQuery版本1.4.3或更高版本（最好不是2.0及以上版本）

2.将jquery.wookmark.js引入

## 用法 ##

该插件可以被jQuery以不同的方式调用

可以用默认的方式调用，这也是官方推荐的方式：

$('.myElements').wookmark();

其中myElements是你做的表格的，并且想让它成为wookmark这种动态表格元素展示的 class 样式

## 配置项 ##

$('.myElements').wookmark({
      align: 'center',
      autoResize: false,
      comparator: null,
      container: $('body'),
      direction: undefined,
      ignoreInactiveItems: true,
      itemWidth: 0,
      fillEmptySpace: false,
      flexibleWidth: 0,
      offset: 2,
      onLayoutChanged: undefined,
      outerOffset: 0,
      resizeDelay: 50,
      possibleFilters: []
    });

其中上边这些配置项中提及到的参数，在我们之前写的博客上也有所提及，大家可以在那边看： [http://blog.csdn.net/sunyingyuan/article/details/17613627][http_blog.csdn.net_sunyingyuan_article_details_17613627]

### itemWidth 和 flexibleWidth ###

这两个字段的值可以设置为数字类型（这时是被当做像素值来处理的），当然也可以设置成百分比，当 flexibleWidth 设置成itemWidth != 0 是被用作列的最小宽度（这个地方我也没怎么看懂英文，等我好好实验下，然后再做修改）。

### 更新 trigger ###

元素被隐藏了是一直不可见的一直到它被设置为可视状态的时候，如果你在一个隐藏的选项卡上设置成wookmark属性，并不会立刻得到效果，当然你也可以手动触发触发器使得你的wookmark是可见的。

$('#myContent').trigger('refreshWookmark');

### fillEmptySpace ###

有时候为了创建一个合适的布局，比如说在底部创建一个占位符。你可以在官方示例中的 example-placeholder 查看其具体使用方法，占位符需要使用到的class是 wookmark-placeholder ，当然你也可以覆盖class样式来满足你的个性化需求。

### ignoreInactiveItems ###

当你设置 ignoreInactiveItems 为false的时候，不活动的项依然会展示。这个方法可以用来淡出过滤项目的方式。你可以查看这个示例。

### comparator ###

你可以通过这个选项提供一个普通的比较函数作为一个排序的方式，你可以查看 example-sort or example-stamp 查看如何使用它。

那么，暂时，我们先写到这里，同样，我会像前几篇博客那样，将一些使用心得在评论中说给大家，这里主要是让大家知道在jQuery插件中有这么个东西，大家到时候做网站的时候看看能不能用得上，同时也避免大家重复造轮子。

转载于:https://www.cnblogs.com/sunyingyuan/p/3686209.html

[http_blog.csdn.net_sunyingyuan_article_details_17613627]: http://blog.csdn.net/sunyingyuan/article/details/17613627
[http_www.wookmark.com_jquery-plugin]: http://www.wookmark.com/jquery-plugin
[SouthEast]: /images/20211221/ec97cf5d7adc4d43b6f7ac8ccc584a67.png
[Link 1]: https://www.paypal.com/de/cgi-bin/webscr?cmd=_flow&SESSION=Qs29JN87dLsctl_IWANEFEbJzJtJ7DwvotLWJ9JOF0yp90lkwrkriJLoXU0&dispatch=5885d80a13c0db1f8e263663d3faee8def8934b92a630e40b7fef61ab7e9fe63