From cbe4dd6724c5dc2c590cad0f49d5b3c42dbdd26d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 30 Dec 2010 17:15:56 -0500 Subject: [PATCH] docs : add Filtering doc --- _layouts/elements.html | 3 +- _posts/demos/2010-12-30-filtering.html | 13 ++--- _posts/demos/2010-12-30-sorting.html | 2 +- _posts/docs/2010-12-03-options.mdown | 6 ++- _posts/docs/2010-12-06-filtering.mdown | 71 ++++++++++++++++++++++++++ css/style.css | 2 +- 6 files changed, 84 insertions(+), 13 deletions(-) create mode 100644 _posts/docs/2010-12-06-filtering.mdown diff --git a/_layouts/elements.html b/_layouts/elements.html index 6b85961..6b86dfe 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -14,7 +14,7 @@

{{ page.title }}

Filters

- + @@ -61,13 +62,9 @@ category: demos }); // filter buttons - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = $(this).attr('data-filter'); - // var filterTest = 'filter ' + filterName; - // console.time( filterTest ); - $demo.isotope({ filter: filterName }) - // console.timeEnd( filterTest ); + $('#filters a').click(function(){ + var selector = $(this).attr('data-filter'); + $demo.isotope({ filter: selector }); return false; }); diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html index 5ea5e2a..21bfe28 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -27,7 +27,7 @@ category: demos -
+
{% for element in site.elements_best_of %} {% include element-partial.html %} {% endfor %} diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index 1c79cd9..6d69e9d 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -23,7 +23,7 @@ body_class: option-def Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation. -### Values +### Values {#animationEngine-values} + `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`. @@ -73,6 +73,10 @@ The class applied to the container element. Setting a filter with show item elements that match the selector, and hide elements that do not match. +### Values {#filter-values} + ++ `'*'` Shows all item elements + ## getSortData
diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown new file mode 100644 index 0000000..f36dff6 --- /dev/null +++ b/_posts/docs/2010-12-06-filtering.mdown @@ -0,0 +1,71 @@ +--- + +title: Filtering +category: docs +layout: doc + +--- + +Isotope can hide and show item elements via the `filter` option. The `filter` option accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden. + +[**See Demo: Filtering**](../demos/filtering.html) + +## Markup + +Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc. + +{% highlight html %} + +
+
...
+
...
+
...
+
...
+
...
+
...
+
...
+ ... +
+ +{% endhighlight %} + +## jQuery script + +To show only `.metal` items, the jQuery script would be: + +{% highlight javascript %} + +$('#demo').isotope({ filter: '.metal' }); + +{% endhighlight %} + +Filtering selectors work just as expected. `.alkali, alkaline-earth` with show both `.alkali` AND ` .alkaline-earth` items, and hide all others. `.metal:not(.transition)` will show `.metal` item elements that are not `.transition`. + +## Buttons + +Let's use a basic list for our buttons + +{% highlight html %} + + + +{% endhighlight %} + +Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter secltor. + +{% highlight javascript %} + +$('#filters a').click(function(){ + var selector = $(this).attr('data-filter'); + $('#demo').isotope({ filter: selector }); + return false; +}); + +{% endhighlight %} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 49ed927..2cfc274 100644 --- a/css/style.css +++ b/css/style.css @@ -320,7 +320,7 @@ body.doc { } pre { - padding: 0.5em; + padding: 10px; } pre, code {