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

来源:CSDN博客 | 时间:2014-03-28 14:18:22 | 阅读数:
[导读] Wookmark是一个为了展示动态表格元素的一款非常实用的jQuery插件。你可以到http: www wookmark com jquery-plugin查看其示例。配置1 jQuery版本1 4 3或更高版本(最好不是2 0及以上版本)2 将jquery wookmark j

 

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 样式

配置项

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片 $('.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  

itemWidth 和 flexibleWidth

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

更新 trigger

元素被隐藏了是一直不可见的一直到它被设置为可视状态的时候,如果你在一个隐藏的选项卡上设置成wookmark属性,并不会立刻得到效果,当然你也可以手动触发触发器使得你的wookmark是可见的。 [javascript] view plaincopy在CODE上查看代码片派生到我的代码片 $('#myContent').trigger('refreshWookmark');
 

fillEmptySpace

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

ignoreInactiveItems

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

comparator

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

手机扫描下方二维码,关注php100官方微信。

同步官网每日更新,为您带来随时随地的资讯与技术信息。
更有不定期的互动抽奖活动,赢取实用贴心的小礼物。
除非特别声明,PHP100新闻均为原创或投稿报道,转载请注明作者及原文链接
原文地址:

延伸阅读 More

粤ICP备15117877号-3
99uu优优