A simple javascript library which provides a basic context menu using javascript and Bootstrap
For more informaton:
- CSS changes
- Add CCS links for ContextMenu, FontAwesome, and Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/contexmenu.css" />- HTML5 table row changes for the unique id
<div class="row">
<div class="col-md-12">
<table id="CustomerTable" class=”table table-striped tabled-bordered table-condensed table-hover”>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>EMail</th>
</tr>
</thead>
<tbody>
<tr id='1' class='contextMenu-target'>
<td >1</td>
<td>Daffy</td>
<td>Duck</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>- HTML5 add a context menu to the body right before the table
<nav id="context-menu" class="contextMenu">
<ul class="contextMenu-items">
<li class="contextMenu-item">
<a href=" Display/" class="contextMenu-action" data-action="Display">
<i class="fa fa-file-text-o"></i> Display</a>
</li>
<li class="contextMenu-item">
<a href="Edit/" class="contextMenu-action" data-action="Edit">
<i class="fa fa-edit"></i> Edit</a>
</li>
<li class="contextMenu-item">
<a href="Delete/" class="contextMenu-action" data-action="Delete">
<i class="fa fa-trash"></i> Delete</a>
</li>
</ul>
</nav>- Javascript changes
- Instantiation
var contexmenu = new ContextMenu(); - Add ContextMenu.js to page scripts
<script src="/javascripts/contexmenu.js" type="text/javascript"></script>- How do I get the context menu to disappear again?
- Right or left click anywhere outside the table body, including the table header
- Can I still use the default document context menu?
- Yes, just right click outside the table body
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent