Forum

July 10th, 2011
You must be logged in to post Login Register

Search Forums:


 






jQuery UI compatible version of jquery.contextmenu.js

UserPost

22:00
26/12/2011


OlegK

Germany

Member

posts 1210

Hello Tony,

I decide to post here my modification of the jquery.contextmenu.js to share it with another people who use it in combination with jqGrid. I described the code in my previous answers about jqGrid on the stackoverflow.com, for example here. I will post in the separate feature request which describes the extention method which generates context menu from the navigator buttons. In the current feature request I want describe only the changes of jquery.contextmenu.js.

I tried to use the  existing CSS classes of jQuery UI 1.8.x: ui-menu and ui-menu-item, the classes ui-widget, ui-widget-content, ui-corner-all, ui-widget-shadow and ui-state-hover. Then I added the class ui-menu-icons which will be used in jQuery UI 1.9. I tried to make code so, that it allowes enough flexibility. The aim was to use new jQuery UI Menu Widget in thze future, but first to use existing jquery.contextmenu.js code till jQuery UI 1.9 will be released.

Another aim was to make the code working not only for jQuery UI 1.8.x, but for jQuery UI 1.9 too. So that the first attempts to use jQuery UI 1.9 can be made without requirements to change the code of contextmenu to new jQuery UI menu. The problem was that in the version jQuery UI 1.8.x it was used float: left style actively but in the jQuery UI 1.9 it will be used position: absolute instead. I solved the problem by setting explicitly some 1.9-like styles inline additionaly to adding CSS classes. As the result the produced HTML code will be not perfect (it uses not only CSS classes), but it works very good with both jQuery UI 1.8.x and with jQuery UI 1.9. One minor issue can be fixed by defining

.ui-menu .ui-menu-item a.ui-state-hover { font-weight: normal; margin: -1px; }

which already exist in jQuery UI 1.8.x, but removed in the current version of jQuery UI 1.9.

The menus items should use <a> to be in the style of jQuery UI:

<div id="myMenu1" style="display: none">
    <ul>
        <li id="add"><a href="#"><span class="ui-icon ui-icon-plus"></span>Add Row</a></li>
        <li id="edit"><a href="#"><span class="ui-icon ui-icon-pencil"></span>Edit Row</a></li>
        <li id="del"><a href="#"><span class="ui-icon ui-icon-trash"></span>Delete Row</a></li>
    </ul>
</div> 

even if there not uses icons

<div id="myMenu1" style="display: none">
    <ul>
        <li id="add"><a href="#">Add Row</a></li>
        <li id="edit"><a href="#">Edit Row</a></li>
        <li id="del"><a href="#">Delete Row</a></li>
    </ul>
</div> 

The new version of jquery.contextmenu.js you can get here (I changed the file name to jquery.contextmenu-ui.js). You can include it in the plugins directory of jqGrid.

I created some simple demos based on an old my demo which used jQuery UI Autocomplete. The reason of this was that I wanted to verify that all the changes in the contextmenu plugin do no problems for jQuery UI Autocomplete which uses the same menu classes.

As the demos I used the first and the second demo where I used jQuery UI 1.8.16. The second demo used no icons in the context menu. The next two demos this and this are modification of the previous demos where some jQuery UI 1.8.16 classes will be overwritten with new style settings from jQuery UI 1.9. The demos shows that jQuery UI Autocomplete still works correctly. The last demo uses the last version of jQuery UI 1.9 directly from github: jquery-ui-git.css and jquery-ui-git.js. The demo still work.

I hope that the usage of the modified version of jquery.contextmenu.js can be helpful for other.

Like I wrote before I will post additionally an jqGrid plugin which construct dynamically context menu based the navigator buttons (from navGrid or inlineNav).

Best regards
Oleg 

09:43
19/04/2013


pankajpandey

Member

posts 7

Hi Oleg,

Is there a way to use custom images on the context-menu, instead of using the jQuery ui-icons. It works fine if I use jquery UI icons(ui-icon-print), but my custom images are not shown on the context menu.

CSS:

.ui-print{  height:16px; width:16px; background-image: url(./images/print.png) !important;}

HTML:

<li id="print" style="font-size:12px"><a href="#"><span class="ui-icon ui-print"></span>Print</a></li>

ANy suggestions?


Thanks!


Pankaj


10:31
19/04/2013


OlegK

Germany

Member

posts 1210

I would recommend you to specify CSS style background-position: 0 0; in definition of .ui-print class. I recommend you to use background instead of background-image because it reset some other properties which are important for correct displaying of the background image.

Best regards
Oleg

10:50
19/04/2013


pankajpandey

Member

posts 7

Perfect, exactly what I was looking for Smile.


Thanks a lot.

Pankaj


About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:

215


Currently Online:

71 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 10268

Posts: 30346

Membership:

There are 11031 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1210

markw65 – 179

kobruleht – 144

phicarre – 132

YamilBracho – 124

Renso – 118

Administrators: admin (60 Posts)

Moderators: tony (7375 Posts), Rumen[Trirand] (81 Posts)




Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information