Introduction
jsb is a JavaScript library built on top of base2.
It provides four objects:
- jsb
The global jsb object.
- jsb.behavior
The default behavior object. All behaviors inherit from this object.
- jsb.Rule
A Rule connects a behavior to a CSS selector.
- jsb.RuleList
A collection of Rule objects.
What is a behavior?
A behavior is an object that defines event handlers.
A behavior may also define additional helper methods and properties.
Here is what a typical behavior might look like:
var mybehavior = jsb.behavior.extend({ // properties highlightColor: "yellow", // event handlers onmouseover: function(element, event) { this.highlight(element); }, onmouseout: function(element, event) { this.reset(element); }, // methods highlight: function(element) { element.style.backgroundColor = this.highlightColor; }, reset: function(element) { element.style.backgroundColor = ""; } });
You can now attach the behavior to any element:
var hoverThingy = document.getElementById("hoverThingy"); mybehavior.attach(hoverThingy);
Once the behavior is attached to an element it will begin to receive events.
What is a Rule?
A Rule connects a CSS selector to a behavior:
new jsb.Rule("#hoverThingy", mybehavior);
jsb will now automatically attach elements with an ID of "hoverThingy" to the mybehavior object.
It will do this almost immediately. The jsb rule engine will constantly scan the document looking for matching
elements. It will even do this while the document is loading. It does not wait for the DOMContentLoaded
event.
The Rule constructor will also take an object literal to define a behavior:
new jsb.Rule("#clickable", { onclick: function() { alert("You clicked me."); } });
All rules are "live" — new matching elements will be automatically attached.
You may also create Rules that reference external behaviors.
What is a RuleList?
A RuleList is a collection of Rules:
new jsb.RuleList({ "input.slider": ui.slider, "input.spinner": ui.spinner, "input.progressbar": ui.progressbar, "textarea.editor": "/assets/js/editor.js#editor", "#my-button": { onclick: function(element, event) { // do something } } });