From 4a72fbdb32bbddf835777bb232cc6c454c41a636 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 2 Jan 2011 16:34:16 -0500 Subject: [PATCH] docs : add Adding items docs and demo --- _includes/add-buttons.js | 28 +++++++++++++ _layouts/demo.html | 17 ++++++++ _layouts/elements.html | 29 +------------ _posts/demos/2011-01-03-adding-items.html | 50 +++++++++++++++++++++++ _posts/docs/2010-12-10-adding-items.mdown | 36 ++++++++++++++++ 5 files changed, 132 insertions(+), 28 deletions(-) create mode 100644 _includes/add-buttons.js create mode 100644 _layouts/demo.html create mode 100644 _posts/demos/2011-01-03-adding-items.html create mode 100644 _posts/docs/2010-12-10-adding-items.mdown diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js new file mode 100644 index 0000000..822b427 --- /dev/null +++ b/_includes/add-buttons.js @@ -0,0 +1,28 @@ + $('#insert a').click(function(){ + var i = Math.ceil( Math.random()*3 + 1 ), + newEls = ''; + // window.console && console.log( i ) + while ( i-- ) { + newEls += fakeElement.create(); + } + var $newEls = $( newEls ) + // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls ); + $demo.isotope( 'insert', $newEls ); + // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope(); + // $demo.isotope() + // console.log( next ) + + return false; + }); + + $('#append a').click(function(){ + var i = Math.ceil( Math.random()*3 + 1 ), + newEls = ''; + while ( i-- ) { + newEls += fakeElement.create(); + } + var $newEls = $( newEls ) + $demo.append( $newEls ).isotope( 'appended', $newEls ); + + return false; + }); \ No newline at end of file diff --git a/_layouts/demo.html b/_layouts/demo.html new file mode 100644 index 0000000..89ef849 --- /dev/null +++ b/_layouts/demo.html @@ -0,0 +1,17 @@ + + + + + {{ page.title }} + + + + + + +

{{ page.title }}

+ + {{ content }} + + + \ No newline at end of file diff --git a/_layouts/elements.html b/_layouts/elements.html index f7e8366..8471d69 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -151,34 +151,7 @@ {% include layout-change.js %} - $('#insert').find('a').click(function(){ - var i = Math.ceil( Math.random()*3 + 1 ), - newEls = ''; - // window.console && console.log( i ) - while ( i-- ) { - newEls += fakeElement.create(); - } - var $newEls = $( newEls ) - // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls ); - $demo.isotope( 'insert', $newEls ); - // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope(); - // $demo.isotope() - // console.log( next ) - - return false; - }); - - $('#append').find('a').click(function(){ - var i = Math.ceil( Math.random()*3 + 1 ), - newEls = ''; - while ( i-- ) { - newEls += fakeElement.create(); - } - var $newEls = $( newEls ) - $demo.append( $newEls ).isotope( 'appended', $newEls ); - - return false; - }); + {% include add-buttons.js %} $('#shuffle a').click(function(){ $demo.isotope('shuffle'); diff --git a/_posts/demos/2011-01-03-adding-items.html b/_posts/demos/2011-01-03-adding-items.html new file mode 100644 index 0000000..5274259 --- /dev/null +++ b/_posts/demos/2011-01-03-adding-items.html @@ -0,0 +1,50 @@ +--- +title: Adding items +layout: demo +category: demos +--- + +
+

Use the reLayout method to easily arrange item elements after a change.

+
+ +
+ +
+ +
+ {% for element in site.elements_best_of limit:10 %} + {% include element-partial.html %} + {% endfor %} +
+ + + + + + + + + \ No newline at end of file diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown new file mode 100644 index 0000000..513f74a --- /dev/null +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -0,0 +1,36 @@ +--- + +title: Adding items +category: docs +layout: doc + +--- + +If your application dynamically adds new content, Isotope provides several methods to add items. + +## addItems + +The `addItems` method adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element. + +{% highlight javascript %} + +var $newItems = $('
'); +$('#container').append( $newItems ).isotope({ 'addItems', $newItems }); + +{% endhighlight %} + +## insert + +More likely, you want to use the `insert` method, which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out. + +{% highlight javascript %} + +var $newItems = $('
'); +$('#container').isotope({ 'insert', $newItems }); + +{% endhighlight %} + +## appended + +The `appended` method is a convienence method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and not have it processed with filtering or sorting. `appended` is the best method to use with Infinite Scroll. +