网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

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

时间:2024-11-12 19:26:40

1、该插件可以被jQuery以不同的方式调用可以用默认的方式调用,这也是官方推荐的方式:$('.myElements').wookmark();其中myElements是你做的表格的,并且想让它成为wookmark这种动态表格元素展示的 class 样式

2、配置项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.});

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

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

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

6、当你设置ignoreInactiveItems 为false的时候,不活动的项依然会展示。这个方法可以用来淡出过滤项目的方式。你可以查看这个示例。comparator你可以通过这个选项提供一个普通的比较函数作为一个排序的方式,你可以查看example-sort or example-stamp 查看如何使用它。

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com