Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knadh/tinytabs
A tiny (1.3 KB minified) Javascript tabbing library for rendering tabbed UIs. Zero dependencies.
https://github.com/knadh/tinytabs
Last synced: 13 days ago
JSON representation
A tiny (1.3 KB minified) Javascript tabbing library for rendering tabbed UIs. Zero dependencies.
- Host: GitHub
- URL: https://github.com/knadh/tinytabs
- Owner: knadh
- License: other
- Created: 2011-10-13T18:55:41.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-06-21T07:10:49.000Z (over 4 years ago)
- Last Synced: 2025-01-16T23:09:51.652Z (about 1 month ago)
- Language: HTML
- Homepage: https://nadh.in/code/tinytabs
- Size: 58.6 KB
- Stars: 46
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tinytabs
tinytabs is a tiny (1.3 KB minified) Javascript tabbing
library. Zero dependencies. All you need is a few layers in a container layer, and
bam, tabbed interface. If Javascript is not enabled, it degrades
nicely too.
Documentation and Demo: https://nadh.in/code/tinytabs
## Example
### HTML
```html
Music
Content here
Videos
Content
// With options.
document.addEventListener("DOMContentLoaded", function(e) {
tinytabs(document.querySelector("#mytabs"), {
anchor: true,
hideTitle: false,
closable: true,
onClose: function (id) {
console.log(id)
}
});
});
// Without options.
document.addEventListener("DOMContentLoaded", function(e) {
tinytabs(document.querySelector("#mytabs"));
})
```
## Options
| anchor | true (default) or false. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. Also enables linking to a tab directly. Eg: `http://nadh.in/code/tinytabs#tab-example` |
|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hideTitle | true (default) or falseHide the title element within section elements. |
| sectionClass | Section element's class. Default is section. |
| tabsClass | Tab (ul) container's class. Default is tabs. |
| tabClass | Individual tab's (li) class. Default is tab. |
| titleClass | Title element's tag. Default is title. |
| onBefore | function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |
| onAfter | function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |
| onClose | function(id). Callback function that gets evaluated while closing the tab. The argument is the id of the tab. |
MIT License.