README
bo
a small (1.6k gzipped) mvv framework for authoring mobile apps with native-like performance. full unit test coverage.
demo
http://eighttrackmind.github.io/bo/demo/
what?
- barebones mvv (fully tested)
- smooth paging and sliding animation
usage
html
<div bo-pane="foo">...</div>
- set a pane's ID tofoo
(works with any tag, not justdiv
)<a bo-trigger="foo">...</div>
- slide to the pane with IDfoo
when clicked/tapped (works with any tag, not justa
)
coffee (or js if you prefer)
see https://github.com/eighttrackmind/bo/tree/master/coffee
usage
Put your pages into a single HTML file. Each pane ("screen") should have a unique data-bo-pane
attribute. To trigger another pane when clicked/tapped, give the trigger a data-bo-trigger-pane
attribute.
<div bo-pane="paneId">
<button bo-trigger="anotherPaneId">Next</button>
</div>
Link to bo.css
in your <head>
:
...
<head>
<link rel="stylesheet" href="bo.css" />
...
Then install dependencies:
npm install
Finally, link to dependencies followed by bo.js
at the bottom of your <body>
:
...
<script src="node_modules/izzy/izzy.js"></script>
<script src="node_modules/umodel/umodel.js"></script>
<script src="bo.js"></script>
</body>
api
# create a new Bo instance
bo = new Bo
Method | Arguments | Description | Example |
---|---|---|---|
on |
"event1...", handler |
Attach a DOM event listener | bo.on "mousedown touchstart", (event) -> ... |
register |
DOMElement |
Register a DOM Element as a Bo pane | bo.register document.querySelector "#id" |
hideAll |
- | Hide all Bo panes | do bo.hideAll |
show |
"id" |
Show pane with the given ID | bo.show "myPaneId" |
options
# create a new Bo instance, passing in a custom options dictionary
new Bo options
Option | Type | Default | Description |
---|---|---|---|
paneAttribute |
String | "bo-pane" |
Attribute indicating that an element is a Bo pane |
change |
Function | (PaneInstance) -> |
Callback fired when a Bo pane is shown |
building it yourself
npm install
grunt