Skip to content

Add button as Parent indicator #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KingGeneral wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add button as Parent indicator #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbe2de2
add autoheight feature + example
KingGeneral Mar 16, 2017
1bf15e2
add collapsible feature + example
KingGeneral Mar 16, 2017
a316d83
add fontawesome + showButton feature + example
KingGeneral Mar 16, 2017
07ff5a9
special thanks + markdown + clean space
KingGeneral Mar 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion example/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,17 @@ a:hover{
font-size : 10px;
line-height : 11px;
padding : 2px;
}
}

/* f0fe, f0dd, f103, f078, f13a */
.add_btn:before{
font-family: "FontAwesome";
font-size: 30px;
content: "\f078";
color: #9F20B3;
position: relative;
left: 40px;
top: 57px;
float: right;
width: 0px;
}
2 changes: 1 addition & 1 deletion example/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
dragAndDrop : true,
});
});
</script>
Expand Down
122 changes: 122 additions & 0 deletions example/example_with_autoHeight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jOrgChart - A jQuery OrgChart Plugin</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="prettify.js"></script>

<!-- jQuery includes -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script src="jquery.jOrgChart.js"></script>

<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true,
autoHeight : true,
});
});
</script>
</head>

<body onload="prettyPrint();">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li><a href="http://github.com/wesnolte">Github</a></li>
<li><a href="http://twitter.com/wesnolte">Twitter</a></li>
<li><a href="http://th3silverlining.com">Blog</a></li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>

<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>Pumpkin</li>
<li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>

<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>
123 changes: 123 additions & 0 deletions example/example_with_collapsible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jOrgChart - A jQuery OrgChart Plugin</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="prettify.js"></script>

<!-- jQuery includes -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script src="jquery.jOrgChart.js"></script>

<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true,
// autoHeight : true,
collapsible : false
});
});
</script>
</head>

<body onload="prettyPrint();">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li><a href="http://github.com/wesnolte">Github</a></li>
<li><a href="http://twitter.com/wesnolte">Twitter</a></li>
<li><a href="http://th3silverlining.com">Blog</a></li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>

<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>Pumpkin</li>
<li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>

<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>
Loading