Hi All,
Here I am going to give a demo for how you can make a context menu on your web page using few lines of code. Many times such web applications needed where user can do many operations on different kind of records. In that scenario making lot of buttons or checkboxes are easily avoided if you go with context menu.
How to implement Context-Menu:
1) Make your context-menu html code and put that at the end of body.
2) Include jQuery main js file, in our case i have used jquery-1.8.3.js
3) Put below code in your head section of html file
Here #menu is Id of your html menu area, ".emp" is the class name of element on which you want to bind this context-menu on right click.
4) Give some good look to your menu, put below code in your head section style tag
5) Now, design your web page and give class "emp" to the elment where you want this context menu to open.
Here is working demo:
http://labs.aslambari.com/context-menu/contextmenu.html
Click the names of employee on the page, you will see the context-menu
You can download complete code here:
http://aslambari.com/downloads/context-menu.zip
Let me know your thoughts
Thanks
Aslam Bari
Here I am going to give a demo for how you can make a context menu on your web page using few lines of code. Many times such web applications needed where user can do many operations on different kind of records. In that scenario making lot of buttons or checkboxes are easily avoided if you go with context menu.
1) Make your context-menu html code and put that at the end of body.
<ul id="menu" class="custom-menu"> <li><a href="javascript:alert('Clicked Add Notes');" onclick="addnote();">Add Notes</a></li> <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li> <hr style="clear:both;color:#E6E6E6" /> <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li> <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li> <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li> </ul>
2) Include jQuery main js file, in our case i have used jquery-1.8.3.js
3) Put below code in your head section of html file
<script> $(function() { $(".emp").bind("contextmenu", function(event) { event.preventDefault(); $("#menu").show(); $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"}); }); $(document).bind("click", function(event) { $("#menu").hide(); }); }); </script>
Here #menu is Id of your html menu area, ".emp" is the class name of element on which you want to bind this context-menu on right click.
4) Give some good look to your menu, put below code in your head section style tag
<style> .custom-menu { z-index:1000; position: absolute; background-color:#FFF; border: 1px solid black; padding: 5px; list-style: none; width:150px; display:none; } .custom-menu a{ text-decoration: none; padding:5px; font-size:13px; width:100px; display:block; color:#000; } .custom-menu a:hover{ text-decoration: none; border:1px solid #ccc; background-color:greenyellow; } .custom-menu li{ margin:5px; } </style>
5) Now, design your web page and give class "emp" to the elment where you want this context menu to open.
Here is working demo:
http://labs.aslambari.com/context-menu/contextmenu.html
Click the names of employee on the page, you will see the context-menu
You can download complete code here:
http://aslambari.com/downloads/context-menu.zip
Let me know your thoughts
Thanks
Aslam Bari
1 comments:
Thank you so much for taking the time to share this exciting information. But, I would be grateful to you if you could provide some more details about heat map issue.
Post a Comment