插件 jQuery.Scrolltab 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Scrolltab 中文API文档 https://github.com/cjsaylor/Scrolltab 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.

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.

<h4 class="scrolltab" data-st-title="Pin Title" data-st-classname="custom-pin-class">Title</h4>

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

	// Enables a pin with the default classname
	$('<dom object>').scrolltab();
	// Changes the classname of the created (or existing) pin
	$('<dom object>').scrolltab({ classname: 'test' });
	// Modifies the behavior of the click event on the pin
	$('<dom object').scrolltab({
		click: function (e) {
			e.preventDefault();
			alert('Pin clicked.')
		}
	});
	// Modify the initial behavior of pins showing on page load
	$.fn.scrolltab.pinInitialDisplay = function(pin) {
		// I don't want the fancy fadein affect.
		pin.show();
	};
	$('<dom object>').scrolltab();
	// 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!');
		}
	});
	$('<dom object>').scrolltab();

Build

Scrolltab uses Grunt CLI via NodeJS for linting and building the minified production file.

Setup

Install grunt cli globally:

$ npm install -g grunt-cli

Install dev dependencies:

$ npm install -d

Execute lint and build:

$ grunt

License

This software is protected under the MIT license.


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>