jquerypp/event/destroyed/destroyed_menu.html at documentjs · Yesplan/jquerypp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>