Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
jQuery UI compatible version of jquery.contextmenu.js
26/12/2011
22:00
OlegK
Germany
Member
Forum Posts: 1212
Member Since:
10/08/2009
Offline

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 

19/04/2013
09:43
pankajpandey
Member
Forum Posts: 7
Member Since:
28/01/2013
Offline

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

19/04/2013
10:31
OlegK
Germany
Member
Forum Posts: 1212
Member Since:
10/08/2009
Offline

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

19/04/2013
10:50
pankajpandey
Member
Forum Posts: 7
Member Since:
28/01/2013
Offline

Perfect, exactly what I was looking for Smile.

Thanks a lot.

Pankaj

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
110 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1212

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11192

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10390

Posts: 30709

Newest Members: sunilkatta99, Surendra Rayapati, rize, Jamil1234, poff, hemadri

Moderators: tony (7514), Rumen[Trirand] (81)

Administrators: admin (61)

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information