bomobile
v0.2.0
Published
a small mvc framework for authoring mobile apps with native-like performance. full unit test coverage.
Downloads
15
Maintainers
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 | | paneTriggerAttribute
| String | "bo-trigger"
| Attribute indicating that an element should trigger a bo pane |
| change
| Function | (PaneInstance) ->
| Callback fired when a Bo pane is shown |
building it yourself
npm install
grunt