guillaume
/
jOrgChart
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

panel that shows underlying html list now updates when node elements are rearranged

master
Wes 2011-12-02 14:22:14 +00:00
parent b39c765332
commit beba805557
1 changed files with 33 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
example/example.html
View File

@ -20,21 +20,6 @@
chartElement : '#chart', chartElement : '#chart',
dragAndDrop : true dragAndDrop : true
}); });
/* Extra Code */
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
}); });
</script> </script>
</head> </head>
@ -52,46 +37,7 @@
<div class="pull-right"> <div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div> <div class="alert-message info" id="show-list">Show underlying list.</div>
<pre class="prettyprint lang-html" id="list-html" style="display:none">&lt;ul id="org" style="display:none"&gt; <pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
&lt;li&gt;
Food
&lt;ul&gt;
&lt;li&gt;Beer&lt;/li&gt;
&lt;li&gt;Vegetables
&lt;ul&gt;
&lt;li&gt;Pumpkin&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://tquila.com" target="_blank"&gt;Aubergine&lt;/a&gt;
&lt;p&gt;A link and paragraph is all we need.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Fruit
&lt;ul&gt;
&lt;li&gt;Apple
&lt;ul&gt;
&lt;li&gt;Granny Smith&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Berries
&lt;ul&gt;
&lt;li&gt;Blueberry&lt;/li&gt;
&lt;li&gt;&lt;img src="images/raspberry.jpg" alt="Raspberry"/&gt;&lt;/li&gt;
&lt;li&gt;Cucumber&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Bread&lt;/li&gt;
&lt;li&gt;Chocolate
&lt;ul&gt;
&lt;li&gt;Topdeck&lt;/li&gt;
&lt;li&gt;Reese's Cups&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</pre>
</div> </div>
</div> </div>
</div> </div>
@ -139,5 +85,36 @@
</ul> </ul>
<div id="chart" class="orgChart"></div> <div id="chart" class="orgChart"></div>
<script>
jQuery(document).ready(function() {
/* Custom jQuery for the example */
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
$('#list-html').text($('#org').html());
$("#org").bind("DOMSubtreeModified", function() {
$('#list-html').text('');
$('#list-html').text($('#org').html());
prettyPrint();
});
});
</script>
</body></html> </body>
</html>