Adding toolbarjs to a web application is very simple. First I recommend you grab the source code from GitHub. There is a minimized version already included in the project's js folder. If you want to develop against the debug version (unminimzed) version feel free, it is located in the debug folder. In the css folder there is a toolbar.css file. It contains a reference set of CSS classes to style the toolbar in the Metro IU feel. There are three example pages to demonstrate how to use the toolbarjs library. They all contain a base HTML snippet to apply the library.
There are a simple set of instructions also included in the source code, readme.md. You can read those before reviewing the example pages.
Implementing the toolbarjs library is extremely simple. Make sure you have a target element with a pair of child elements to hold the menu items.
Creating the toolbar requires nothing more than passing the target node to the library and the menu items for the top and sub menus. If you want to simply pass the toolbar element's selector you can do that and the library will take care of the node selection for you.
The 'title' is the caption displayed below the menu item's icon or the text rendered in the sub menu. The iconClass is the CSS class containing the styling for the actual icon. The library assumes you are using a background image, typically with a CSS sprite or data URI.
The callback method is a function that is executed when the user either clicks or touches the menu item. The demos will echo a message to the console, but in practice these choices would trigger an action like opening a new view. If you do not change the items in the toolbar you will want to call the expandToolbar passing true to collapse the toolbar.
While developing the library I found too many situations where collapsing when the toolbar when a menu item was selected just did not work. So I made the decision to make this a manual trigger. If the menu items are changed the menu will force a collapse. This is common when a user navigates between views. The following shows how to change the menu items.
Like all my libraries there are many custom settings that can be adjusted when creating a new instance. Toolbarjs is no different. The following is the default settings object.
These values can be overwritten when the library is created. You could also change any property during run-time by referencing the settings object like this: tb.settings.minWidth = 45;. To customize a setting when the object is created just add it to the second parameter with the menu items. In this example the default expand speed is changed from 1 second to 700 milliseconds.
At this time I am aware the library is not working 100% correctly in the default Android WebKit browser. I am working on this and hope to post and update soon. There are also several other features I want to support. So look for updates over the coming weeks.
Like the previous libraries I am using toolbarjs on my own projects. I created it out of personal demand and am glad I can share it with you. I hope you enjoy using it. Please provide feedback and report any issues or bugs you find. I can't promise I will fix them immediately but will get to them as I have time. Unlike toolbarjs I remembered to add the license to the library this time. I think I added MIT, but basically assume you can use the code, but I offer no warranties at all.