Skip to content

Commit d2f33fd

Browse files
mar10mar10
committed
add demo
1 parent b1b2005 commit d2f33fd

File tree

3 files changed

+121
-3
lines changed

3 files changed

+121
-3
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.settings
2+
/.project

‎README.md

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
1-
jquery-contextmenu
2-
==================
1+
# jquery-contextmenu
32

4-
jQuery plugin that provedies a context menu (based on the jQueryUI menu widget)
3+
jQuery plugin that provides a context menu (based on the jQueryUI menu widget).
4+
5+
6+
## Status
7+
Pre-Alpha - not fit for production!
8+
9+
10+
## Features
11+
12+
* Themable
13+
* Use delegates
14+
15+
16+
## Demo
17+
[Sample page](http://mar10.github.com/jquery-contextmenu/sample-widget.html)
18+
19+
20+
## Usage
21+
22+
JavsScript:
23+
```js
24+
$("button#split").splitbutton({
25+
menu: "#splitOptions",
26+
click: function(event){
27+
alert("clicked default button");
28+
},
29+
select: function(event, ui){
30+
var menuId = ui.item.find(">a").attr("href");
31+
alert("select " + menuId);
32+
}
33+
});
34+
```
35+
36+
Markup:
37+
```html
38+
<button id="split">Default action</button>
39+
40+
<ul id="splitOptions">
41+
<li><a href="#action1">Action 1</a>
42+
<li><a href="#action2">Action 2</a>
43+
<li><a href="#action3">Action 3</a>
44+
<li><a href="#action4">Action 4</a>
45+
</ul>
46+
```

‎sample-widget.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
5+
<title>Widget test</title>
6+
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
8+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
9+
10+
<script src="jquery.contextmenu.js" type="text/javascript"></script>
11+
12+
<style type="text/css">
13+
body{
14+
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
15+
font-size: 62.5%;
16+
}
17+
.menuTargets span {
18+
border: 2px outset black;
19+
padding: 3px;
20+
}
21+
</style>
22+
23+
<!-- Add code to initialize the tree when the document is loaded: -->
24+
<script type="text/javascript">
25+
$(function(){
26+
$("button#split").contextmenu({
27+
menu: "#splitOptions",
28+
click: function(event){
29+
alert("clicked default button");
30+
},
31+
focus: function(event, ui){
32+
// alert("focus");
33+
var menuId = ui.item.find(">a").attr("href");
34+
$("#info").text("focus " + menuId);
35+
},
36+
blur: function(event, ui){
37+
// alert("blur");
38+
$("#info").text("");
39+
},
40+
select: function(event, ui){
41+
var menuId = ui.item.find(">a").attr("href");
42+
alert("select " + menuId);
43+
}
44+
});
45+
});
46+
</script>
47+
</head>
48+
49+
<body class="example">
50+
<h1>jquery.contextmenu.js</h1>
51+
<p><a href="https://github.com/mar10/jquery-contextmenu">View on GitHub</a></p>
52+
53+
54+
<div class="menuTargets">
55+
<span>Right-click me!</span>
56+
<span>No, me!</span>
57+
<span>Me first please!</span>
58+
</div>
59+
60+
<ul id="splitOptions">
61+
<li><a href="#action1">Action 1</a>
62+
<li><a href="#action2">Action 2</a>
63+
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
64+
<li>----
65+
<li><a>Extra</a>
66+
<ul>
67+
<li><a href="#action4">sub4</a>
68+
<li><a href="#action5">sub5</a>
69+
</ul>
70+
</ul>
71+
72+
<p id="info"></p>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)