https://github.com/cjsaylor/Scrolltab
jQuery plugin to add tabs visually associated to their position relative to the scroll bar.
https://github.com/cjsaylor/Scrolltab
Last synced: over 1 year ago
JSON representation
jQuery plugin to add tabs visually associated to their position relative to the scroll bar.
- Host: GitHub
- URL: https://github.com/cjsaylor/Scrolltab
- Owner: cjsaylor
- Created: 2010-08-21T00:05:57.000Z (almost 16 years ago)
- Default Branch: master
- Last Pushed: 2014-08-23T22:08:37.000Z (almost 12 years ago)
- Last Synced: 2024-10-08T12:00:26.738Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://chris-saylor.com/Scrolltab/
- Size: 416 KB
- Stars: 54
- Watchers: 8
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Scrolltab is a jQuery plugin that adds tabs visually associated to their position relative to the scroll bar.
This enables a developer to attach floating tabs to the scrollbar of the brwoser that will scroll the user to the position indicated by the tab. This tab is expandable with content within.
## Demo
http://chris-saylor.com/Scrolltab/example.html
## Install
There are two ways of installing:
1. Bower - ```bower install jquery-scrolltab```
2. Download - You can install traditionally by downloading the [minified version](https://github.com/cjsaylor/Scrolltab/releases/latest).
## Options
* `title`: HTML to display within the pin
* `classname`: The classname for the pin to use
* `mouseenter`: function to execute when the mouseenter event fires on this pin
* `mouseleave`: function to execute when the mouseleave event fires on this pin
* `click`: function to execute when the click event fire on this pin
## Setting Options via `data` attributes
You can set the title and classname of the pin via data attributes on the object.
```html
Title
```
## Behaviors
The behavior of how the pin displays and hides is customizable by overriding the behavior functions.
#### Initial Display
When a new pin is created by the `.scrolltab()` call.
* Default behavior: `fadeIn('slow')`
```
$.fn.scrolltab.pinInitialDisplay
```
#### Display On Update
If the element the scrollpin was tracking becomes visible again, this will redisplay the pin.
* Default behavior: `fadeIn('slow')`
```
$.fn.scrolltab.pinDisplay
```
#### Pin Hide
If the element the scrollpin was tracking is hidden from the dom, this will hide the pin.
* Default behavior: `fadeOut('fast')`
```
$.fn.scrolltab.pinHide
```
## Examples
```javascript
// Enables a pin with the default classname
$('').scrolltab();
```
```javascript
// Changes the classname of the created (or existing) pin
$('').scrolltab({ classname: 'test' });
```
```javascript
// Modifies the behavior of the click event on the pin
$('').scrolltab();
```
```javascript
// Modify the default attributes of all pins created now on
// In this example, I want all pins to have a click event function
// callback attached.
$.fn.scrolltab.default = $.extend($.fn.scrolltab.default, {
click: function (e) {
e.preventDefault();
alert('Pin clicked!');
}
});
$('').scrolltab();
```
## Build
Scrolltab uses [Grunt CLI](http://gruntjs.com/) via [NodeJS](http://nodejs.org/) for linting and building the minified production file.
#### Setup
Install grunt cli globally:
```bash
$ npm install -g grunt-cli
```
Install dev dependencies:
```bash
$ npm install -d
```
Execute lint and build:
```bash
$ grunt
```
## License
This software is protected under the MIT license.