mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
7.7 KiB
181 lines
7.7 KiB
14 years ago
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>jQuery Mercutio › Appending new elements</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/style.css" media="screen" />
|
||
|
|
|
||
|
|
<!-- scripts are located at the bottom of the markup -->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="site-nav">
|
||
|
|
<h1>jQuery Mercutio</h1>
|
||
|
|
<ul>
|
||
|
|
<li><a href=".">Primer</a></li>
|
||
|
|
<li><a href="basic-single-column.html">Basic single-column</a></li>
|
||
|
|
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
|
||
|
|
<li><a href="tumblelog.html">Tumblelog</a></li>
|
||
|
|
<li class="selected"><a href="appending.html">Appending</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#content">Top</a></li>
|
||
|
|
<li><a href="#code">Code</a></li>
|
||
|
|
<li><a href="#demo">Demo</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
|
||
|
|
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
|
||
|
|
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
|
||
|
|
<li><a href="filtering.html">Filtering</a></li>
|
||
|
|
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="content">
|
||
|
|
|
||
|
|
<h1>Appending new elements</h1>
|
||
|
|
|
||
|
|
<div class="copy">
|
||
|
|
<p>New elements can be appended to ‘masoned’ containers and then arranged to the layout using the <code>appendedContent</code> option. <code>appendedContent</code> accepts the a jQuery object of the newly appended elements. In this example, each time <a href="#append_new_bricks">the button</a> is clicked, new <code>box</code> elements are created and then together made into a jQuery object. This object is first appended to the wrapping container, then the boxes are rearranged with a <code>.mercutio()</code> call. Finally, using the callback function, the new boxes are dynamically styled. </p>
|
||
|
|
<p>In the click function, <code>appendedContent</code> was the only option to specify in the mercutio configuration since Mercutio saves all previous options. Using <code>appendedContent</code>, the Mercutio script saves some processing time as it only rearranges the box(es) inside that appended container.</p>
|
||
|
|
|
||
|
|
<pre id="code"><code><span class="comment">// cache mercutio wrap</span>
|
||
|
|
<span class="storage">var</span> <span class="keyword">$</span>wall <span class="keyword">=</span> <span class="keyword">$</span>(<span class="string">'#demo'</span>).find(<span class="string">'.wrap'</span>);
|
||
|
|
|
||
|
|
<span class="keyword">$</span>wall.mercutio({
|
||
|
|
columnWidth: <span class="constant">100</span>,
|
||
|
|
itemSelector: <span class="string">'.box'</span>
|
||
|
|
});
|
||
|
|
|
||
|
|
<span class="keyword">$</span>(<span class="string">'#append_new_bricks'</span>).click(<span class="storage">function</span>() {
|
||
|
|
<span class="storage">var</span>
|
||
|
|
newEls <span class="keyword">=</span> [],
|
||
|
|
elCount <span class="keyword">=</span> <span class="keyword">Math</span>.random()*<span class="constant">4</span>
|
||
|
|
;
|
||
|
|
<span class="keyword">for</span> (<span class="storage">var</span> i=0; i < elCount; i++ ) {
|
||
|
|
<span class="storage">var</span>
|
||
|
|
colClass <span class="keyword">=</span> <span class="string">'col'</span> <span class="keyword">+</span> <span class="keyword">Math</span>.<span class="storage">ceil</span>( <span class="keyword">Math</span>.<span class="stroage">random</span>()*<span class="constant">3</span> ),
|
||
|
|
<span class="comment">// create new box</span>
|
||
|
|
<span class="keyword">$</span>box <span class="keyword">=</span> <span class="keyword">$</span>( <span class="keyword">document</span>.<span class="storage">createElement</span>(<span class="string">'div'</span>) )
|
||
|
|
.addClass(<span class="string">'box '</span> <span class="keyword">+</span> colClass).text( randoLoremText() )
|
||
|
|
;
|
||
|
|
<span class="comment">// add box DOM node to array of new elements</span>
|
||
|
|
newEls.<span class="storage">push</span>( <span class="keyword">$</span>box[<span class="constant">0</span>] );
|
||
|
|
}
|
||
|
|
|
||
|
|
<span class="comment">// create jQuery object</span>
|
||
|
|
<span class="keyword">$</span>boxes <span class="keyword">=</span> <span class="keyword">$</span>( newEls );
|
||
|
|
|
||
|
|
<span class="keyword">$</span>wall
|
||
|
|
<span class="comment">// append new elements</span>
|
||
|
|
.append( <span class="keyword">$</span>boxes )
|
||
|
|
<span class="comment">// arrange new elements</span>
|
||
|
|
.mercutio( { appendedContent: <span class="keyword">$</span>boxes } ,
|
||
|
|
<span class="comment">// using a callback to style new elements</span>
|
||
|
|
<span class="storage">function</span>() {
|
||
|
|
<span class="keyword">$</span>(<span class="constant">this</span>).css({background: <span class="string">'#222'</span>, color: <span class="string">'#EEE'</span> });
|
||
|
|
}
|
||
|
|
)
|
||
|
|
;
|
||
|
|
}</code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div><!-- .copy -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id="demo">
|
||
|
|
|
||
|
|
<p><button id="append_new_bricks">Append new bricks</button></p>
|
||
|
|
|
||
|
|
<div class="wrap">
|
||
|
|
|
||
|
|
<div class="box col2">
|
||
|
|
<p>Sit amet mi ullamcorper vehicula</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box col1">
|
||
|
|
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box col2">
|
||
|
|
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
|
||
|
|
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box col3">
|
||
|
|
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box col1">
|
||
|
|
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="box col1">
|
||
|
|
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div> <!-- .wrap -->
|
||
|
|
|
||
|
|
</div> <!-- #demo -->
|
||
|
|
|
||
|
|
<p id="footer">
|
||
|
|
jQuery Mercutio by <a href="http://desandro.com/">David DeSandro</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div> <!-- #content -->
|
||
|
|
|
||
|
|
<script src="js/jquery-1.4.2.min.js"></script>
|
||
|
|
<script src="../jquery.mercutio.js"></script>
|
||
|
|
<script src="js/rando-lorem-text.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
// cache mercutio wrap
|
||
|
|
var $wall = $('#demo').find('.wrap');
|
||
|
|
|
||
|
|
$wall.mercutio({
|
||
|
|
columnWidth: 100,
|
||
|
|
itemSelector: '.box'
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#append_new_bricks').click(function() {
|
||
|
|
var
|
||
|
|
newEls = [],
|
||
|
|
elCount = Math.random()*4
|
||
|
|
;
|
||
|
|
for (var i=0; i < elCount; i++ ) {
|
||
|
|
var
|
||
|
|
colClass = 'col' + Math.ceil( Math.random()*3 ),
|
||
|
|
// create new box
|
||
|
|
$box = $( document.createElement('div') ).addClass('box ' + colClass).text( randoLoremText() )
|
||
|
|
;
|
||
|
|
// add box DOM node to array of new elements
|
||
|
|
newEls.push( $box[0] );
|
||
|
|
}
|
||
|
|
|
||
|
|
// create jQuery object
|
||
|
|
$boxes = $( newEls );
|
||
|
|
|
||
|
|
$wall
|
||
|
|
// append new elements
|
||
|
|
.append( $boxes )
|
||
|
|
// arrange new elements
|
||
|
|
.mercutio( { appendedContent: $boxes } ,
|
||
|
|
// using a callback to style new elements
|
||
|
|
function() {
|
||
|
|
$(this).css({background: '#222', color: '#EEE' });
|
||
|
|
}
|
||
|
|
)
|
||
|
|
;
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|