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

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

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

配置

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

2.将jquery.wookmark.js引入

用法

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

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

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

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

配置项

view
source

print?

01.

[javascript]
view plaincopy在CODE上查看代码片派生到我的代码片

02.

03.

$(

'.myElements'

).wookmark({

04.

align:

'center'

,

05.

autoResize:

false

,

06.

comparator:

null

,

07.

container:
$(

'body'

),

08.

direction:
undefined,

09.

ignoreInactiveItems:

true

,

10.

itemWidth:
0,

11.

fillEmptySpace:

false

,

12.

flexibleWidth:
0,

13.

offset:
2,

14.

onLayoutChanged:
undefined,

15.

outerOffset:
0,

16.

resizeDelay:
50,

17.

possibleFilters:
[]

18.

});

其中上边这些配置项中提及到的参数，在我们之前写的博客上也有所提及，大家可以在那边看：/article/1609418.html

itemWidth 和 flexibleWidth

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

更新 trigger

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

view
source

print?

1.

[javascript]
view plaincopy在CODE上查看代码片派生到我的代码片

2.

3.

$(

'#myContent'

).trigger(

'refreshWookmark'

);

fillEmptySpace

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

ignoreInactiveItems

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

comparator

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