564
edits
Labs/Jetpack/JEP/21: Difference between revisions
Jump to navigation
Jump to search
→Proposal
| Line 17: | Line 17: | ||
<pre class="brush:js;"> | <pre class="brush:js;"> | ||
// get an abstracted "jetpacky" nav bar object / bookmarks bar object | |||
var navBar = jetpack.toolbar.navigation(); | |||
// return the array of 'toolbarbutton' objects | |||
navBar.children(); | |||
// get a button labeled 'my button' | |||
var btn = navBar.find({label:"my button"}); | |||
// replace the function bound to the button | |||
btn.onclick = function ClickerFunk(){ alert("I clicked my button");}; | |||
// number of toolbar buttons: acts like an array | |||
navBar.length; | |||
var | // make a button | ||
var button = { | |||
// 'self' would refer to the button | |||
// 'self.toolbar' would refer to the parentNode | |||
id: 73, // or "foobutton" | |||
label: "my button", | |||
imageDefault: "http://mybutton.com/image.png", | |||
imageAlternate: "http://mybutton.com/imageAlt.png", | |||
click: function(){self.image(self.imageAlternate);}, | |||
mouseover: function(){jetpack.audio.play(self.customAttribute);}, | |||
customAttribute: "http://mybutton.com/yelling.ogg" | |||
}; | |||
// .append() and .prepend(): | |||
//append button to the end of the toolbar | |||
navBar.append(button); | |||
// prepend button to the beginning of the toolbar | |||
navBar.prepend(button); | |||
. | // find a button by label or other string or number attribute | ||
var anotherButton = navBar.find({label:'their button'}); | |||
// append button to toolbar after 'anotherButton' | |||
navbar.append(button, anotherButton); | |||
// find and append after the button labeled "their button" | |||
navbar.append(button, 'their button'); | |||
//make a bookmark button | |||
var bookmarkButton = {label: "GrouchoMarx.com", | |||
url:"http://grouchomarx.com/", | |||
image: "http://groucho.com/image.png", | |||
type: 'bookmark' // the default | |||
} | |||
// bookmark and feed buttons use the same methods to attach, move, find vis a vis the toolbar | |||
var feedButton = { label: "my RSS feed", | |||
image: "http://myfeed.com/feed.png", | |||
url: "http://www.rssfeed.com/rss.xml", | |||
type: "feed" | |||
}; | |||
</pre> | </pre> | ||