Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | Bootstrap Context Menu |
| 2 | ====================== |
||
| 3 | |||
| 4 | A context menu extension of Bootstrap made for everyone's convenience. |
||
| 5 | |||
| 6 | See a [demo page] [id]. |
||
| 7 | [id]:http://sydcanem.github.io/bootstrap-contextmenu/ |
||
| 8 | |||
| 9 | Installation |
||
| 10 | ------------ |
||
| 11 | |||
| 12 | `bower install bootstrap-contextmenu` |
||
| 13 | |||
| 14 | Note: Requires bootstrap.css |
||
| 15 | |||
| 16 | Usage |
||
| 17 | ----- |
||
| 18 | |||
| 19 | ### Via data attributes |
||
| 20 | |||
| 21 | Add `data-toggle="context"` to any element that needs a custom context menu and via CSS set `position: relative` to the element. |
||
| 22 | |||
| 23 | Point `data-target` attribute to your custom context menu. |
||
| 24 | |||
| 25 | `<div class="context" data-toggle="context" data-target="#context-menu"></div>` |
||
| 26 | |||
| 27 | ### Via Javascript |
||
| 28 | |||
| 29 | Call the context menu via JavaScript: |
||
| 30 | |||
| 31 | ```js |
||
| 32 | $('.context').contextmenu({ |
||
| 33 | target:'#context-menu', |
||
| 34 | before: function(e,context) { |
||
| 35 | // execute code before context menu if shown |
||
| 36 | }, |
||
| 37 | onItem: function(context,e) { |
||
| 38 | // execute on menu item selection |
||
| 39 | } |
||
| 40 | }) |
||
| 41 | ``` |
||
| 42 | |||
| 43 | ### Options |
||
| 44 | |||
| 45 | `target` - is the equivalent of the `data-target` attribute. It identifies the html of the menu that will be displayed. |
||
| 46 | |||
| 47 | `before` - is a function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters, |
||
| 48 | |||
| 49 | - `e` - the original event. (You can do an `e.preventDefault()` to cancel the browser event). |
||
| 50 | - `context` - the DOM element where right click occured. |
||
| 51 | |||
| 52 | `onItem` - is a function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters, |
||
| 53 | |||
| 54 | - `context` - the DOM element where right click occured. |
||
| 55 | - `e` - the click event of the menu item, $(e.target) is the item element. |
||
| 56 | |||
| 57 | `scopes` - DOM selector for dynamically added context elements. See [issue](https://github.com/sydcanem/bootstrap-contextmenu/issues/56). |
||
| 58 | |||
| 59 | ### Events |
||
| 60 | |||
| 61 | All events are fired at the context's menu. Check out `dropdown` plugin for |
||
| 62 | a complete description of events. |
||
| 63 | |||
| 64 | - `show.bs.context` - This event fires immediately when the menu is opened. |
||
| 65 | - `shown.bs.context` - This event is fired when the dropdown has been made visible to the user. |
||
| 66 | - `hide.bs.context` - This event is fired immediately when the hide instance method has been called. |
||
| 67 | - `hidden.bs.context` - This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |
||
| 68 | |||
| 69 | Sample |
||
| 70 | |||
| 71 | ```js |
||
| 72 | $('#myMenu').on('show.bs.context',function () { |
||
| 73 | // do something... |
||
| 74 | }); |
||
| 75 | ``` |
||
| 76 | |||
| 77 | Example |
||
| 78 | ------- |
||
| 79 | |||
| 80 | Activate and specify selector for context menu |
||
| 81 | |||
| 82 | ```js |
||
| 83 | $('#main').contextmenu({'target':'#context-menu'}); |
||
| 84 | ``` |
||
| 85 | |||
| 86 | Activate within a div, but not on spans |
||
| 87 | |||
| 88 | ```js |
||
| 89 | $('#main').contextmenu({ |
||
| 90 | target: '#context-menu2', |
||
| 91 | before: function (e, element, target) { |
||
| 92 | e.preventDefault(); |
||
| 93 | if (e.target.tagName == 'SPAN') { |
||
| 94 | e.preventDefault(); |
||
| 95 | this.closemenu(); |
||
| 96 | return false; |
||
| 97 | } |
||
| 98 | return true; |
||
| 99 | } |
||
| 100 | }); |
||
| 101 | ``` |
||
| 102 | |||
| 103 | Modify the menu dynamically |
||
| 104 | |||
| 105 | ```js |
||
| 106 | $('#main').contextmenu({ |
||
| 107 | target: "#myMenu", |
||
| 108 | before: function(e) { |
||
| 109 | this.getMenu().find("li").eq(2).find('a').html("This was dynamically changed"); |
||
| 110 | } |
||
| 111 | }); |
||
| 112 | ``` |
||
| 113 | |||
| 114 | Show menu name on selection |
||
| 115 | |||
| 116 | ```js |
||
| 117 | $('#main').contextmenu({ |
||
| 118 | onItem: function(context, e) { |
||
| 119 | alert($(e.target).text()); |
||
| 120 | } |
||
| 121 | }); |
||
| 122 | ``` |
||
| 123 | |||
| 124 | ### Nice to have features: |
||
| 125 | |||
| 126 | - Close and open animations |
||
| 127 | - Keyboard shortcuts for menus |
||
| 128 | |||
| 129 | ### License |
||
| 130 | MIT |