<link rel="stylesheet" title="Sunburst" href="http://code.riiv.net/assets/styles/sunburst.css">
<script type="text/javascript" src="http://code.riiv.net/assets/scripts/jquery-1.2.6.pack.js"></script><script type="text/javascript" src="http://github.com/raid-ox/chain.js/tree/v0.1-stable/build/chain.js?raw=true"></script><script type="text/javascript" src="http://code.riiv.net/assets/scripts/jquery-noconflict.js"></script><p style="background:#eee; padding:4px 2px;">[[Demos]] > <strong>Linking Multiple Items</strong></p>
<p>Type e.g. <em>isa</em> in the textfield. The Umatched/hidden items will be displayed on the second list.</p>
<div style="background:#DCE9F4;padding:0.5em;margin-bottom:1em;">
<div style="margin-bottom:0.5em; border:1px solid #BBB;">
<input style="margin: 0.5em;" type="text" id="demo-input-filter" />
</div>
<p><strong>Matched:</strong></p>
<div style="margin-bottom: 1em;background:white;color:#444;border:1px solid #BBB;" id="demo-persons">
<div style="background:#DCE9F4;padding: 0.3em;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<p><strong>Unmatched:</strong></p>
<div style="margin-top:1em;min-height:20px;background:white;color:#444;border:1px solid #BBB;" id="demo-filtered">
<div style="background:#DCE9F4;padding: 0.3em;margin:1px;" class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
</div>
<h3>Source</h3>
<pre>
<code class="html"><div>
<input id="input-filter" type="value" />
</div>
<div id="persons">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="filtered">
<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
</code></pre>
<pre>
<code class="javascript">$('#persons')
.items([
{first:'Isaac', last:'Newton'},
{first:'Johannes', last:'Keppler'},
{first:'Alessandro', last:'Volta'},
{first:'Blaise', last:'Pascal'},
{first:'Niels', last:'Bohr'},
{first:'Albert', last:'Einstein'},
{first:'Stephen', last:'Hawking'}
])
.chain();
$('#input-filter').keyup(function(){
$('#persons').items('filter', $(this).val());
})
// Hidden means, that the hidden collection should be showed.
// Other options would be 'all' and 'visible'
// Collections are user extensible
$('#filtered').items('link', '#persons', 'hidden').chain();
</code></pre>
<script type="text/javascript" src="http://code.riiv.net/assets/scripts/wiki-demo.js"></script><script type="text/javascript">
demo.itemsLinking();
</script><script type="text/javascript" src="http://code.riiv.net/assets/scripts/highlight.js"></script>
2008-08-16T12:27:41-07:00
46016
demo-linking-multiple-items
41994
Demo: Linking Multiple Items
2008-08-16T12:31:15-07:00
20353