html图片分类插件,Quicksand-jQuery超酷图片分类插件

Quicksand是一款使用 jQuery 和 html5 制作的超酷图片分类插件。

HTML结构

Quicksand会将一个列表项替换为另一个列表项。你需要做的就是提供两个列表。可以通过下面的几种方式来提供列表：

可以使用普通的HTML列表，如一个无序列表。

可以通过AJAX回调来添加一个列表。

通过javascript来改变原来的列表(例如重新排列它们)。

• iOS
• Android
• Windows Phone 7

• Mac OS X
• Mac OS 9
• iOS

第一个列表source是用户可见的列表，第二个列表是用于替换的列表。

你需要在列表项中使用HTML5 data-id 属性来描述同类元素以将它们进行分类。两个相同的data-id表示它们是同一个分类的元素。

javascript

然后就可以通过下面的代码来调用Quicksand。

$('#source').quicksand( $('#destination li') );

你可以为Quicksand添加回调函数：

$('#source').quicksand( $('#destination li'), function() {

// callback code

});

关于CSS样式的一些建议

1、当你在为列表项和它们的内容添加样式的时候，使用ID选择符可能会导致一些奇怪的结果。Quicksand通过克隆来模拟动画帧效果。由于可能两个元素会有同样的ID存在，所以应该避免使用ID选择符来编写样式。

2、Quicksand需要知道 body和容器及列表项之间的 margin。如果这些元素有它们自己的margins，请使用px(像素)为单位，不要使用ems。该插件目前不能理解em单位。

可用参数

你可以通过下面的参数修改Quicksand。调用参数的格式如下：

$('#source').quicksand( $('#destination li'), {

name: value

});

或者

$('#source').quicksand( $('#destination li'), {

name: value

}, function() {

// callback code

});

参数名称

默认值

描述

adjustHeight

'auto'

调整容器的高度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为false则保持容器的高度不变。

adjustWidth

'auto'

调整容器的宽度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为false则保持容器的宽度不变。

attribute

'data-id'

该属性用于匹配集合中的列表项。你可以提供自定义函数来获取唯一的值。

duration

750

动画持续时间，单位毫秒。

easing

'swing'

动画的Easing效果。可以在这里查看更多的jquery easing 插件的选项。

enhancement

function() {}

如果你想集成一些视觉增强功能(例如：替换文本)，可以指定一个函数来为列表项在图片分类动画时应用它们。

useScaling

false

是否使用 CSS3 缩放动画。如果你需要缩放图片的动画效果，需要添加这个插件。

retainExisting

true

默认情况下，Quicksand是重用已经存在的DOM元素而不是替换它们(1.3版本后已经更新)。设置该参数为false来强制在图片分类动画结束时替换和刷新它们。这个参数在大多数情况下是必须的。

maxWidth

0

隐藏所有CSS属性大于这个值的元素。设置为0关闭这个功能。

atomic

false

设置该参数为true会使DOM元素立刻交换。设置为false将会使图片分类动画有一些延时，但是如果你想在动画时修改DOM元素，建议设置为false。

集成其它插件

当你在列表项上使用其它一些插件功能(例如tooltips)时，请记住要使用回调函数来在新的复制元素上来使用它们。

$("#content").quicksand($("#data > li"),

{

duration: 1000,

}, function() { // callback function

$('#content a').tooltip();

}

);

当你在项目中使用了一些视觉增强功能(例如：替换字体)时，要在图片分类动画时使用enhancement来刷新和应用这些效果。

$("#content").quicksand($("#data > li"),

{

duration: 1000,

enhancement: function() {

Cufon.refresh('#content span');

}

}

);