I needed
to add context menus
to some tables of my intranet application. After trying some components I found one that does everything I need and has no overhead. In this posting I will show you how
to use jQuery context menu plug-in and how
to attach it
to tables. I found context menu plug-in by Chris Domigan and it was very easy
to integrate
to my application (when comparing some other plug-ins that work only on demo pages and in simple scenarios). Thanks, Chris, for great work! Now let’s use this context menu plug-in with table. Before we go on let’s see what we are trying
to achieve. The following screenshot fragment shows simple context menu that we want
to attach
to our table. And when we click some menu option then something should happen too. :) Installing context menu plug-in Download plug-in (if download link is broken then open demo page and I think you know how
to get plug-in from there). Copy jquery.contextmenu.js
to your scripts folder. Include it in your masterpage or in the page where you plan
to use context menus. Make sure plug-in is included correctly (use Firebug or some other tool you like). Save the page. Defining context menu Now let’s define context menu. Here is fragment on context menu definition from my code. <div class="contextMenu" id="myMenu1"> <ul> <li id="email"><img src="/img/e-mail.png" />E-mail</li> <li id="homepage"><img src="/img/homepage.png" />Homepage</li> </ul> </div> div with id myMenu1 is container of context menu. Unordered list inside container defines items in context menu – simple and elegant! Adding context menu
to table I have table with persons. It is simple HTML. I omitted commands column from this and the next table
to keep them simple and more easily readable. <table> <tr> <th>Name</th> <th>Short</th> <th>Address</th> <th>Mobile</th> <th>E-mail</th> </tr> <% foreach(var person in Model.Results) { %> <tr> <td><%=person.FullName %></td> <td><%=person.ShortName %></td> <td><%=person.FullAddress %></td> <td><%=person.Mobile %></td> <td><%=person.Email %></td> </tr> <% } %> </table>
To get context menu linked
to table rows first cells we need
to specify class for cells and ID. We need ID because we have
to know later which ID has the row on which user selected something from context menu. <table> <tr> <th>Name</th> <th>Short</th> <th>Address</th> <th>Mobile</th> <th>E-mail</th> </tr> <% foreach(var person in Model.Results) { %> <tr> <td class="showContext" id="<%= person.Id %>"><%=person.FullName %></td> <td><%=person.ShortName %></td> <td><%=person.FullAddress %></td> <td><%=person.Mobile %></td> <td><%=person.Email %></td> </tr> <% } %> </table> Now we have only one thing
to do – we have
to write some code that attaches context menu
to table cells. Catching context menu events Now we will make everything work. Relax, it is only couple of lines of code, thank
to jQuery. <script type="text/javascript"> $(document).ready(function () { $('td.showContext').contextMenu('myMenu1', { bindings: { 'email':
function (t) { document.location.href = '/contact/sendmail/' + t.id; }, 'homepage':
function (t) { document.location.href = '/contact/homepage/' + t.id; } } }); }); </script> I think that first lines doesn’t need any comments. Take a look at bindings. We gave ID
to table cells because it is carried also
to bound events. We can use also more complex ID-s if we have more than one table with context menus on our form. Now we are done. Save all files, compile solution, run it and try out how context menu works. Conclusion We saw than using jQuery with context menu component allows us easily create powerful context menus for our user interfaces. Context menu was very easy
to define. We were also able
to attach context menu
to table and use ID of current row entity also in events of context menu.
To achieve this we needed only some minor modifications in view and couple of lines of JavaScript.
