Pure AngularJS based lightweight(1.7KB) Side Panels.
http://eu81273.github.io/angular.panels/
Copy the script and css into your project and add a script and link tag to your page.
<scripttype="text/javascript" src="angular.panels.js"></script><linkrel="stylesheet" type="text/css" href="angular.panels.css">And add panels container tag to your application.
<divdata-panels="true"></div>Add a dependency to your application module and configure panel settings.
varapp=angular.module('myApp',['angular.panels']);app.config(['panelsProvider',function(panelsProvider){panelsProvider.add({id: "testmenu",position: "right",size: "700px",templateUrl: "../resources/template/testmenu.html",controller: "testmenuCtrl"}).add({id: "testpanel",position: "right",size: "80%",templateUrl: "../resources/template/testpanel.html",controller: "testpanelCtrl",closeCallbackFunction: "testpanelClose"});}]);attributes are..
- id : panel's unique id.
- position : the side panel slides from top/right/bottom/left.
- size : panel's height or width. unit(px,em,%..) is required.
- templateUrl : panel template url.
- controller : panel's controller name.
- openCallbackFunction : panel open callback.
- closeCallbackFunction : panel close callback.
Opening panel also very simple. Inject panels service to your app then call the service method like below.
varapp=angular.module('myApp',['angular.panels']);app.config(['panelsProvider',function(panelsProvider){panelsProvider.add({id: "testmenu",position: "right",size: "700px",templateUrl: "../resources/template/testmenu.html",controller: "testmenuCtrl"});}]);app.controller('defaultController',function($scope,panels){//open testmenu panelpanels.open("testmenu");});app.controller('testmenuCtrl',function($scope){//left panel controller});IE9+, Chrome, Safari
- add provider to configure panels
- remove limitation of number of panel
- first release
The MIT License.
Copyright ⓒ 2015 AHN JAE-HA.
See LICENSE