AngularJS directive for JQuery.MMenu plugin
Usage:
- download angular.mmenu.js or angular.mmenu.min.js
- add link to the script file into your html file
- add angular-mmenu module to your application
- add
<mmenu />tag into your html - magic!
Dependencies:
- jQuery v1.11.3
- jQuery.MMenu v4.2.0
- AngularJS v1.4.8
NB! There're no strong version dependencies, but this code was tested just on these versions of 3-d part libraries
0.1.1
index.html:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>Angular.MMenu</title>
<link href="css/jquery.mmenu.all.css" rel="stylesheet" type="text/css" />
</head>
<body ng-controller="myController">
<mmenu mmenu-id="main-menu" mmenu-items="mainMenuItems"></mmenu>
<a href="#main-menu">open menu</a>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mmenu.min.all.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular.mmenu.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>js/app.js:
var app = angular.module('myApp', ['angular-mmenu']);
app.controller('myController', function ($scope, $timeout) {
var textHelper = {
_text : '',
_handlerId: 0,
_handlers: {},
getText: function() { return this._text; }
setText: function(newValue){
var old = this._text;
this._text = newValue;
for (var prop in this._handlers) {
this._handlers[prop](newValue, old);
}
}
onTextChanged: function(callback) {
var myId = ++this._handlerId;
this._handlers[myId] = callback;
return myId;
}
detachHandler: function(handler) {
delete this._handlers[handler] ;
}
};
textHelper.setText('Dynamic text');
$scope.mainMenuItems = [
{ href: '/', text: 'Main' },
{ href: '#', text: textHelper },
{ href: function() { alert('hello!'); }, text: 'Call JS' },
{
text: 'Available Parameters', items: [
{
text: 'mandatory',
items: [
{ text: 'mmenu-id' },
{ text: 'mmenu-items' }
]
},
{
text: 'optional',
items: [
{ text: 'mmenu-options' },
{ text: 'mmenu-params' },
{ text: 'mmenu-invalidate' }
]
}
]
}
];
$timeout.setInterval(function() {
textHelper.setText('Text updated!');
}, 5000);
});interface IMenuItem {
href?: string | Function;
text: string | MMenu.IMenuItemText;
items?: IMenuItem[];
class?: string;
}- href - link to be used by menu item. If not specified or contains empty string ('') will be generated instead of . Could be a function.
- text - [Mandatory] text to be displayed by menu item. Could be an object implementing IMenuItemText.
- class - class to be added to
- items, that represents current menu item
- items - array of subitems of current menu item
interface IMenuItemText {
getText(): string;
setText(newValue: string): void;
onTextChanged(callback: IMenuItemTextChangedCallback): number;
detachHandler(handler: number): void;
}- getText - this function returns text to be shown by menu item
- setText - this function is used to set text of menu item
- onTextChanged - register callback that is called when text of menu item changes. Returns identifier to be used for unregistering callback.
- detachHandler - unregister text change callback.
- mmenu-id - [Mandatory] identifier of mmenu element
- mmenu-items - [Mandatory] name of property in current $scope that contains array of menu items
- mmenu-options - name of property in current $scope that contains mmenu creation options
- mmenu-params - name of property in current $scope that contains mmenu creation parameters
- mmenu-invalidate - name of property in current $scope that will contain mmenu invalidation callback. This property will be set by angular.mmenu at initialization stage. After that you can call this callback when you need your menu to be completely updated.
html:
<mmenu mmenu-id="main-menu" mmenu-items="mainMenuItems" mmenu-invalidate="updateMenu"></mmenu>javascript:
// somewhere in controller's JS code
$scope.updateMenu(); // <-- mmenu item will be recreatedWant to contribute? Great!
Contact me via e-mail: [email protected]
NB! E-mail MUST have angular.mmenu title or it will be marked as spam!
- Call $scope methods instead of opening hrefs
- Add Tests
- Add watching and recreating specifed menu panels instead of entire menu recreation
- Add ajax-based sub-menu creation
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent