https://github.com/sahlhoff/moovweb
https://github.com/sahlhoff/moovweb
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sahlhoff/moovweb
- Owner: sahlhoff
- Created: 2013-02-07T23:03:56.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2013-02-12T21:54:55.000Z (over 13 years ago)
- Last Synced: 2025-01-28T16:16:45.436Z (over 1 year ago)
- Language: JavaScript
- Size: 168 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Moovweb's GoogleTV Library (MTV)
The purpose of the mtv.js library is to provide users with a framework to build GoogleTV web applications using Moovweb technology.
Each zone will automatically have keyboard and D-pad functionality and you will be able to tab between zones. You will also be able to press enter or click a content div to activate it's primary link.
### Directions
Simply setup the following HTML hierarchy in the DOM and mtv will take care of the rest.
### Structure
# One zone wrapper
# One items-div wrapper
# Multiple mtv-div elements paired with mtv-item elements
# Usually a link here.
# This structure works too.
# Usually a link here.
### Optional Settings
The MTV library comes with an array of options that can be enabled by setting data-mtv attributes on various elements.
#### Link Behavior
By default, clicking or pressing enter will go to the first link found in the mtv-div. If you'd like to go to a different link, simply set that anchor with the attribute: `data-mtv-component="link"`.
You can also have the Enter key simulate a click event by setting the element you want to click with the attribute: `data-mtv-component="click"`.
#### Ajax
You can also enable links to AJAX their URL into a certain zone on your page. To do this follow the next two steps:
1. Set the element that will call the AJAX with the attribute: `data-mtv-component="ajax"`.
- You'll also need to set a target for where this content should be placed. You'll notice that every **.mtv-zone** has an attribute automatically assigned called **data-mtv-id**. Use this id number to set your AJAX element with the attribute: `data-mtv-target="id_number"`. Now the link knows in which zone the content will be placed.
#### Styles
Each zone can have an additional class of "mtv-sidebar" or "mtv-grid" that come with default styles.
Just go into assets/stylesheets/main.scss and uncomment the line: `@import "globals/_mtv";`
#### Moovweb's Uranium.js Widgets
The MTV library also works well with [Uranium.js](http://uraniumjs.com), Moovweb's mobile widget library that comes prepackaged with common mobile widgets you'll find yourself using on every site.