Skip to content
Newer
Older
100644 61 lines (43 sloc) 1.23 KB
b91439d @maxogden initial checkin
authored Jan 7, 2013
1 # toolbar
2
3 keyboard selectable toolbar for selecting an active tool
4
5 when users hit 0-9 on their keyboard or click an item on the toolbar `toolbar` will emit a javascript event that will tell you which item in the toolbar has been selected
6
7 ## install
8
9 step 1:
10
11 `npm install toolbar`
12
13 step 2:
14
15 include some html in your page that looks like this:
16
17 ```html
18 <nav class="bar-tab">
19 <ul class="tab-inner">
20 <li class="tab-item active">
21 <a href="">
22 <img class="tab-icon" src="icons/first-tool.png">
23 <div class="tab-label">First Tool</div>
24 </a>
25 </li>
26 <li class="tab-item">
27 <a href="">
28 <img class="tab-icon" src="icons/second-tool.png">
29 <div class="tab-label">Second Tool</div>
30 </a>
31 </li>
32 </ul>
33 </nav>
34 ```
35
36 step 3:
37
d616805 @shama Update readme example
shama authored Jan 25, 2013
38 ```javascript
b91439d @maxogden initial checkin
authored Jan 8, 2013
39 var toolbar = require('toolbar')
d616805 @shama Update readme example
shama authored Jan 25, 2013
40 var bartab = toolbar('.bar-tab')
41 ```
b91439d @maxogden initial checkin
authored Jan 8, 2013
42
43 use [browserify](http://browserify.org/) to package toolbar for use in your client side app!
44
45 step 4:
46
47 ```javascript
d616805 @shama Update readme example
shama authored Jan 25, 2013
48 bartab.on('select', function(item) {
b91439d @maxogden initial checkin
authored Jan 8, 2013
49 // item is the .tab-label innerText
50 })
51 ```
52
53 ## bonus advice
54
55 to convert svgs from the noun project into cute little transparent pngs:
56
57 `mogrify -fill "#ffffff" -opaque "#000000" -background none -format png *.svg`
58
59 ## license
60
61 BSD
Something went wrong with that request. Please try again.