There are a number of [options](options.html) you can specify. Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html), and [sort items](sorting.html).
There are a number of [options](options.html) you can specify. Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html), and [sort items](sorting.html).
@ -85,7 +85,9 @@ Setting a filter with show item elements that match the selector, and hide eleme
<dd class="option-type">Object</dd>
<dd class="option-type">Object</dd>
</dl>
</dl>
An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value.
An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value. See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
### Example
### Example
@ -158,10 +160,10 @@ See also docs on [Layout Modes](layout-modes.html).
Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...".
Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...". See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
## sortBy
## sortBy
@ -185,9 +189,9 @@ Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...
<dd class="option-type">String</dd>
<dd class="option-type">String</dd>
</dl>
</dl>
The property name of the method within the `getSortData` option to sort item elements.
The property name of the method within the `getSortData` option to sort item elements. See [docs on sorting](sorting.html) for more details.
Looking at the `getSortData` example above, valid values would be `'symbol'`, `'number'`, or `'name'`.
@ -34,9 +35,9 @@ Adds elements to the pool of item elements of the container, but does sort, filt
{% endhighlight %}
{% endhighlight %}
Adds elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. More details in [Adding items](adding-items.html).
Adds elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. See [Adding items](adding-items.html) for more details.
@ -56,7 +57,7 @@ Removes Isotope functionality completely. Returns element back to pre-init state
{% endhighlight %}
{% endhighlight %}
Appends elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. More details in [Adding items](adding-items.html).
Appends elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. See [Adding items](adding-items.html) for more details.
@ -39,7 +39,7 @@ In our example, each item element has several data points that can be used for s
## getSortData
## getSortData
In order to extract this data from the element, we need to pass in a function to get it via the `getSortData` option. This option accepts an object, whose values are the functions to extract the data.
In order to extract this data from the element, we need to pass in a function to get it via the [`getSortData`](options.html#getsortdata) option. This option accepts an object, whose values are the functions to extract the data.
Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.
Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.
@ -77,7 +77,7 @@ getSortData : {
{% endhighlight %}
{% endhighlight %}
The data extracted can be anything accessible in the item element via jQuery. To extract the category data, we can use the `.attr()`.
The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the `data-category` attribute, we can use the `.attr()`.
{% highlight javascript %}
{% highlight javascript %}
@ -90,6 +90,19 @@ getSortData : {
{% endhighlight %}
{% endhighlight %}
Get creative! You can sort the list in the [index page](../../) by the width of each item element.
{% highlight javascript %}
getSortData : {
// ...
width : function( $elem ) {
return $elem.width();
}
}
{% endhighlight %}
## sortBy
## sortBy
For every method set in `getSortData`, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.
For every method set in `getSortData`, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.
@ -12,7 +12,7 @@ Isotope was developed to take advantage of the best browser features available.
## animationEngine
## animationEngine
You can control how Isotope handles animation with the `animationEngine` option. This option has three values which control which jQuery method `.css()` or `.animate()` is used to apply styles.
You can control how Isotope handles animation with the [`animationEngine`](options.html#animationengine) option. This option has three values which control whether jQuery applies styles with`.css()` or `.animate()`.
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.