Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/binocarlos/pagenav
navigation toolbar for a book
https://github.com/binocarlos/pagenav
Last synced: 11 days ago
JSON representation
navigation toolbar for a book
- Host: GitHub
- URL: https://github.com/binocarlos/pagenav
- Owner: binocarlos
- Created: 2014-07-08T19:50:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-09-25T10:39:57.000Z (about 10 years ago)
- Last Synced: 2024-04-14T14:36:44.994Z (7 months ago)
- Language: JavaScript
- Size: 180 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
pagenav
=======
navigation toolbar for a book
## installation
```
$ component install binocarlos/pagenav
```
## example
```js
var PageNav = require('pagenav')
var nav = PageNav()
nav.appendTo(document.querySelector('#nav'))
var pages = [{
title:'Page 1'
},{
title:'Page 2'
},{
title:'Page 3'
}]
// pages can be an array or just a number
nav.buildPages(pages)
// change the HTML of a nav element
nav.on('page', function(elem, index){
elem.innerHTML = '0' + index
})
nav.on('click', function(index){
// set the book to page 'index'
})
// set the highlighted page to 3
nav.setPage(3)
```
## api
#### `var nav = PageNav()`
Create a new navbar
#### `nav.buildPages(pages)`
Assign the number of pages for the navbar - pages can be an array or a number
#### `nav.setPage(index)`
Set the currently active page of the navbar
## events
#### `nav.on('page', function(elem, index){})`
A page element has been rendered
#### `nav.on('click', function(index){})`
A page element has been clicked
## css
The DOM structure for the navbar:
```html
```
## licence
MIT