実行結果
Right click for the standard context menu
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Context Menu Plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.contextMenu.js"></script>
<script type="text/javascript">
$(function() {
// Show menu when #myDiv is clicked
$("#myDiv").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
// Show menu when a list item is clicked
$("#myList UL LI").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).text() + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
// Disable menus
$("#disableMenus").click( function() {
$('#myDiv, #myList UL LI').disableContextMenu();
$(this).attr('disabled', true);
$("#enableMenus").attr('disabled', false);
});
// Enable menus
$("#enableMenus").click( function() {
$('#myDiv, #myList UL LI').enableContextMenu();
$(this).attr('disabled', true);
$("#disableMenus").attr('disabled', false);
});
// Disable cut/copy
$("#disableItems").click( function() {
$('#myMenu').disableContextMenuItems('#cut,#copy');
$(this).attr('disabled', true);
$("#enableItems").attr('disabled', false);
});
// Enable cut/copy
$("#enableItems").click( function() {
$('#myMenu').enableContextMenuItems('#cut,#copy');
$(this).attr('disabled', true);
$("#disableItems").attr('disabled', false);
});
});
</script>
<style type="text/css">
#myDiv {
width: 150px;
border: solid 1px #2AA7DE;
background: #6CC8EF;
padding: 1em .5em;
margin: 1em;
float: left;
}
#myList {
margin: 1em;
float: left;
}
#myList UL {
padding: 0px;
margin: 0em 1em;
}
#myList LI {
width: 100px;
border: solid 1px #CCC;
background: #EEE;
padding: 2px 5px;
margin: 2px 0px;
list-style: none;
}
#options {
clear: left;
}
#options INPUT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 150px;
}
/* Generic context menu styles */
.contextMenu {
position: absolute;
width: 120px;
z-index: 99999;
border: solid 1px #CCC;
background: #EEE;
padding: 0px;
margin: 0px;
display: none;
}
.contextMenu LI {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu A {
color: #333;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 1px 5px;
padding-left: 28px;
}
.contextMenu LI.hover A {
color: #FFF;
background-color: #3399FF;
}
.contextMenu LI.disabled A {
color: #AAA;
cursor: default;
}
.contextMenu LI.hover.disabled A {
background-color: transparent;
}
.contextMenu LI.separator {
border-top: solid 1px #CCC;
}
/*
Adding Icons
You can add icons to the context menu by adding
classes to the respective LI element(s)
*/
.contextMenu LI.edit A { background-image: url(/content/img/icon/contextmenu/page_white_edit.png); }
.contextMenu LI.cut A { background-image: url(/content/img/icon/contextmenu/cut.png); }
.contextMenu LI.copy A { background-image: url(/content/img/icon/contextmenu/page_white_copy.png); }
.contextMenu LI.paste A { background-image: url(/content/img/icon/contextmenu/page_white_paste.png); }
.contextMenu LI.delete A { background-image: url(/content/img/icon/contextmenu/page_white_delete.png); }
.contextMenu LI.quit A { background-image: url(/content/img/icon/contextmenu/door.png); }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.trendskitchens.co.nz/jquery/contextmenu/'>ContextMenu plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="myDiv">
Right click for the standard context menu
</div>
<div id="myList">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<div id="options">
<p>
<input type="button" id="disableItems" value="Disable Cut/Copy" />
<input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />
</p>
<p>
<input type="button" id="disableMenus" value="Disable Context Menus" />
<input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />
</p>
</div>
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>