Quicksand is a jquery based plug-in, the elements on the page can be reordered and filtered, and has a very good shuffle transition animation effect, can be applied in many projects to enhance the user experience. In this paper, practical project application to explain the use of quicksand.
Xhtml
<div id= "NAV" >
<ul>
<li id= "All" class= "cur" > All function Modules </li>
<li id= "App" > Applications </li>
<li id= "SYS" > System management </li>
</ul>
</div>
<ul id= "list" class= "Image-grid" >
<li id= "id-1" class= "app" >
<strong> Birthday Blessings </strong></li>
<li id=" id-2 "class=" app ">
< IMG src= "images/festival.gif" width= "height=" "alt=" "/>
<strong> Holiday Blessings </strong></li>
<li id= "id-3" class= "sys" >
Integral management </strong></li> ...
. n + li
</ul>
The XHTML structure consists of a navigation bar and a list of content. In the Content list #list, I added an id attribute to each Li to facilitate Quicksand plug-in invocation.
Css
#nav {height:36px; margin:10px auto; border-bottom:1px solid #36c}
#nav ul{list-style:none; padding-left:120px}
#nav ul li{float:left; height:34px; line-height:34px; margin-left:6px
; padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3;
border-top:1px solid #d3d3d3; Background: #f7f7f7; Cursor:pointer}
#nav ul li.cur{height:35px background: #36c; color: #fff}
. image-grid{zoom:1}
. Image-grid li{width:82px; height:100px margin:20px 0 0 35px; float:left;
Text-align:center; Line-height:18px;color: #686f74; overflow:hidden;}
. Image-grid Li Img,.image-grid li Strong{display:block;
I set the tab style for the navigation bar #nav and set the selected state #nav UL li.cur style. The list content area also sets the fixed height and width of each picture.
Jquery
First, copy the contents of the list area:
Then, to implement the tab style, when you click on the navigation, add the selected style to the currently clicked item, while the other item removes the selected state style:
$ ("#nav ul li"). Click (function () {
$ (this). AddClass ("cur");
$ (this). Siblings (). Removeclass ("cur");
Next, continue in the click Time, get the ID of the current click option, get the data source $source by judging the ID value, and finally call the Quicksand plug-in. The complete code is as follows:
$ ("#nav ul li"). Click (function () {
$ (this). AddClass ("cur");
$ (this). Siblings (). Removeclass ("cur");
var id = $ (this). attr ("id");
if (id== ' all ') {
var $source = $data. Find ("Li");
else{
var $source = $data. Find ("li[class=" +id+ "]");
$ ("#list"). Quicksand ($source, {
duration:1000,
attribute: ' id ',
easing: ' Swing '
}
);});
The Quicksand plug-in provides several parameters to configure:
Duration: The time of the transition animation, in milliseconds.
Attribute: property of the associated data, this example is set to ID.
Easing: Animation buffering mode.
There is also a method Enhancement:function (c) {} can customize a function call.
Incidentally, there is no transition animation effect under IE6, ie7+, and other advanced browsers are tested through.
The above mentioned is the entire content of this article, I hope you can enjoy.