资源说明：Helps you to create stylish toolbars for web pages.
#js-toolbar
__Helps you to create stylish toolbars for web pages.__
## Overview
You can...
+ Create toolbars with buttons and groups of buttons
+ Create toolbars with menus
+ Define effects and animate menus
+ Create custom themes suitable to your page design
[Visit the demo page!](http://www.pecherstorfer.bplaced.com/lab/js-toolbar/)
The toolbar is JavaScript driven, implemented as a jQuery plugin, conforming to AMD.
It can be bound to an unordered list element, using jQuery selectors.
## Usage
Step 1: [Download](https://github.com/mpecherstorfer/js-toolbar) the latest version.
Step 2: Import `toolbar.js`, `toolbar.css` and optionally a toolbar theme in the head declaration of your html files.
Step 3: Create the underlying DOM structure with an unordered list as the toolbar's root element and bind the Toolbar using jQuery selectors.
## Minimalist example
Minimalist example
## Animated menus
You can use basic jQuery or jQuery UI effects for showing/hiding menus.
Just supply menu effect options when binding the toolbar to the underlying list element:
$(function() {
$('#toolbar').toolbar({
showMenuFx {
//options for animation effects used to show menus
},
hideMenuFx {
//options for animation effects used to hide menus
}
});
});
Visit the [demo page](http://pecherstorfer.bplaced.com/lab/js-toolbar/) to try out supported effects.
### Options for animated menus using basic jQuery effects
Option
Description
Range
Default value
effect
Effect name
none, slide, fade
slide
duration
Effect duration in milliseconds
Number
500
### Options for animated menus using jQuery UI effects
You need to download and import jQueryUI first. Then set the following options:
These options apply to all jQuery UI effects. Besides that you can declare effect specific options like `direction` for the `slide` effect.
Visit the jQueryUI effects API for details on effect specific options.
## Other toolbar options
There are two other options, besides `showMenuFx` and `hideMenuFx`:
Option
Description
Range
Default value
isRounded
Whether the toolbar has rounded ends
Boolean
false
isAboveMenus
Whether the toolbar is located above or beneath menus
## Toolbar button groups
You can use the CSS class `tb-end-group` on list items if you want your toolbar to have one or several groups of buttons. Button groups have horizontal space in between them.
Example:
Disabled buttons. Focusing a disabled menu lead button will not open the corresponding menu
hidden
Hidden buttons
wakeup
For buttons associated with operations better not to be executed by drowsy users
## Themes
js-toolbar comes with a minimalist default theme included within `toolbar.css`, and two external theme files located in the `themes` directory. To create a custom theme it's easist to change one of the two existing themes.
Navigation and accessibility
js-toolbar is designed for users with keyboard, mouse, touchscreen, and screen-reader devices.
It captures arrow key events in order to support scanning toolbar and menu buttons using 'left', 'right', 'up', and 'down' arrow keys. It also captures escape key events in order to close open menus. Other keys are not affected so you can linearly scan the toolbar using the tab key and activate individual buttons using the enter key.
js-toolbar includes the 'skip navigation' feature, enabling users with keyboards or screen-readers to quickly 'jump over' the toolbar links. Per default, this link references an empty span element succeeding the toolbar's underlying list element. To make this feature more useful, you can explicitly provide the target element (normally the element containing the page content). To do this just set the `skipNavigationTarget` option to the ID or name of the corresponding element. The link to skip toolbar navigation is only visible while being focused in order not to disturb mouse-only or touchscreen users. If you have your own accessibility features or simply do not want to use it, you can turn off this feature setting the `isSkippable` option to false.
## AMD compliance
js-toolbar is AMD compliant, so you can load the toolbar module and jQueryUI effect modules using require.js.
Check out index.js in the `examples/configurator/scripts` directory to see an example.
To convert jQuery UI files into separate AMD modules you can use James Burke's fantastic conversion script [hosted on GitHub](https://github.com/jrburke/jqueryui-amd).
## Acknowledgements
+ [jQueryUI](http://jqueryui.com/) effects are used for advanced menu animations
+ Theme `theme_02.css` in the `themes` directory is based on Nicolas Gallagher's stylish [CSS3 GitHub buttons](http://nicolasgallagher.com/lab/css3-github-buttons/)
+ 'Skip toolbar navigation' feature based on [material from WebAim](http://webaim.org/techniques/skipnav/)
+ jQuery UI files have been converted to AMD modules using James Burke's conversion script [hosted on GitHub](https://github.com/jrburke/jqueryui-amd)
English
