https://github.com/nescalante/knockout.contextmenu

:pushpin: Contextual menu for knockout
https://github.com/nescalante/knockout.contextmenu

Last synced: about 1 month ago
JSON representation

:pushpin: Contextual menu for knockout

• Host: GitHub
• URL: https://github.com/nescalante/knockout.contextmenu
• Owner: nescalante
• License: mit
• Created: 2013-04-08T13:16:38.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2020-03-16T01:02:41.000Z (almost 5 years ago)
• Last Synced: 2024-11-10T02:56:59.743Z (2 months ago)
• Language: JavaScript
• Homepage: http://nescalante.github.io/knockout.contextmenu/
• Size: 198 KB
• Stars: 21
• Watchers: 8
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# knockout.contextmenu [![Build Status](https://travis-ci.org/nescalante/knockout.contextmenu.svg?branch=master)](https://travis-ci.org/nescalante/knockout.contextmenu) [![Greenkeeper badge](https://badges.greenkeeper.io/nescalante/knockout.contextmenu.svg)](https://greenkeeper.io/)

> Contextual menu, anywhere you need it

![Such example](https://raw.github.com/nescalante/knockout.contextmenu/master/example/menu.png)

# Install

```shell

npm install knockout.contextmenu --save

bower install knockout.contextmenu

```

# With `npm`

Just do:

```js

require('knockout.contextmenu');

```

# Usage

To bind a context menu to an element:

```html

```

Dont forget to include the [`.css` file](https://github.com/nescalante/knockout.contextmenu/blob/master/dist/css/knockout.contextmenu.min.css).

You can also bind a boolean observable to the context menu, that will work as a 'check':

```js

{ 

    "Boolean": someObservableBoolean, 

    "One method": $root.test 

}

```

You can also set dynamic 'text' and 'visible' values binding an object with the following values instead of a method:

Option     | Description

-----------|-----------------------------------------------

`url`      | Direct access to an URL.

`text`     | Set menu text.

`visible`  | Show/hide item (result must be boolean).

`action`   | Item method, mandatory if not url defined.

`disabled` | Disable menu item.

Example:

```js

{ 

    "Complex item": { 

        "text": $root.someObservableText(), 

        "visible": someMethod() == '1', 

        "action": $root.someAction 

    }, 

    "One method": $root.test

}

```

To create a separator between two menus, just create an object with the property `separator` with `true`:

```js

{ 

    "Some item": methodOne,

    "Separator": { 

        "separator": true, 

        "visible": someMethod() 

    },

    "Just another item": methodTwo

}

```

Bind it with left click, if you want to:

```html

```

Also supports `observableArrays`!

```js

var menu = ko.observableArray([{ text: 'Item 1', action: doSomething }, { text: 'Item 2', action: doMore }]); 

```

```html

```

# License

MIT