doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
99 lines (89 loc) • 2.71 kB
HTML
<html lang="en">
<head>
<title>destroyed demo</title>
<style type='text/css'>
ul.menu {
padding: 0px; margin: 0px;
border: solid 1px black;
width: 100px;
position: absolute;
list-style: none;
background-color: white;
}
.menu li{
padding: 1px; margin: 0px;
font-size: 1px;
}
#remove {
color: red;
}
</style>
</head>
<body>
<p>This demo creates a single, reusable menu for multiple elements.
Click each "Show Menu" button to see the menu expand. By clicking
the "Remove" button, it removes a "Show Menu". When
all "Show Menu" buttons are gone, the elment is removed.
After removing all the "Show Me" elements,
the menu will be removed completely. This is done with the help of the
destroyed special event.
</p>
<div id='demo-html'>
<a href='javascript://' class='context'>Show Menu 1</a>
<a href='javascript://' class='context'>Show Menu 2</a>
<a href='javascript://' class='context'>Show Menu 3</a>
<br/>
<a id='remove' href="javascript://">Remove a "Show Menu"</div>
</div>
<script type='text/javascript' src='../../../steal/steal.js?jquerypp/event/destroyed/destroyed.js'></script>
<script type='text/javascript' id='demo-source'>
steal(function() {
//create a contextmenu plugin
jQuery.fn.reusemenu = function(options){
//create menu and put in dom
var ul = $("<ul/>")
.addClass("menu")
.html(options.length ? "<li>"+options.join("</li><li>")+"</li>" :"" )
.appendTo(document.body),
//save a reference to our handler so we can remove it
hideHandler = function(){
ul.find("li").animate({fontSize: 1, padding: 1});
},
//the number of elements that remain
count = this.length;
//take out the hide handler when we
//no longer have the ul
ul.bind("destroyed", function(){
$(document).unbind("click",hideHandler )
})
$(document).click(hideHandler)
//for each menu
this.each(function(){
var me = $(this);
//position menu on click
me.click( function(ev) {
ul.offset({
top: ev.pageY+20,
left: ev.pageX+20
}).find("li").animate({fontSize: 12, padding: 10});
ev.stopPropagation();
})
//if last element, remove menu
.bind("destroyed", function() {
count--;
if(!count){
ul.remove();
ul = null;
}
})
})
};
$(".context").reusemenu(["reuse","able","menu"])
$("#remove").click(function(){
$(".context:first").remove()
});
})
</script>
</body>
</html>