-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
179 lines (134 loc) · 3.95 KB
/
demo.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing jMenu</title>
<link href="css/jMenu.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jMenu.js"></script>
<style>
#context_menu{
width: 600px;
height: 200px;
border: black 1px solid;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Testing jMenu</h1>
<pre>
jMenu allow user to create context menu or normal menu.
</pre>
<div id="context_menu">
<h2>Context menu</h2>
click anywhere on this block to display sample context menu
</div>
<table id="context_menu_table">
<tr>
<td>testing something</td>
<td><a>testing something</a></td>
<td><span>testing something</span></td>
<td><div class="jMenuIcon"></div></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><a href="#">testing something</a>testing something</td>
<td>testing something<span>testing something</span></td>
<td><div class="jMenuIcon"></div></td>
</tr>
<tr>
<td><input type="radio"/></td>
<td><select>
<option>a</option>
<option>b</option>
<option>c</option>
</select></td>
<td><input type="text"/></td>
<td><div class="jMenuIcon"></div></td>
</tr>
</table>
<pre>
</pre>
<script type="text/javascript">
var menus = [];
var menu1 = {
label : "Test Menu",//text displayed in the menu
tooltip : "print a message to console output",//title of the element
handlers : {
"click":function(){
console.log("Test context Menu");
}
},//list of all handler for each list items. "eventType":handler
href : "",//if it a hyper link
subMenu:[]
};
var menu2 = {
label:"Original item",
tooltip:"print the original item that trigger the menu",
handlers:{
"click":function(e,item){
console.log("Original item id: %s", item.get(0).id)
}
}
};
var subMenu31 = {
label: "sub item 1",
handlers:{
"click":function(){
console.log("sub item 1 clicked");
}
}
};
var subMenu32 = {
label: "sub item 2",
handlers:{
"click":function(event,item){
console.log("sub item 2 clicked with item menu: %s",item.get(0).id);
}
}
};
var menu3 = {
label: "Sub menu",
tooltip:"Sub menu item should be added",
handlers:{
"click":function(){
console.log("menu with sub items clicked");
}
},
subMenu:[subMenu31,subMenu32]
};
var menu4 = {
label: "Link to page",
tooltip: "menu create to link to a page",
href: "#test_link",
};
var menu5 = {
label: "Dynamic Link",
tooltip: "menu create a dynamic link depend on element click on",
href: function () { return "#test_link" + this.test; },
beforeRender: function () {
this.test = "something";
return true;
}
};
var menu6 = {
label: "Will not be rendered Link",
href: "google.com",
beforeRender: function () {
return false;
}
};
menus = [menu1, menu2, menu3,menu1, menu2,menu1, menu2, menu4, menu5, menu6];
$("#context_menu_table tr").jMenu({
trigger:"rightClick",
items: menus
});
$("div.jMenuIcon").jMenu({
trigger: "mouseover",
items: menus
});
</script>
</body>
</html>