Add version files and new GIF images for UI components
This commit is contained in:
54
modules/lib/antiscroll/antiscroll.css
Normal file
54
modules/lib/antiscroll/antiscroll.css
Normal file
@ -0,0 +1,54 @@
|
||||
.antiScroll {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar {
|
||||
background: gray;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
-webkit-box-shadow: 0 0 1px #fff;
|
||||
-moz-box-shadow: 0 0 1px #fff;
|
||||
box-shadow: 0 0 1px #fff;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
-webkit-transition: linear 300ms opacity;
|
||||
-moz-transition: linear 300ms opacity;
|
||||
-o-transition: linear 300ms opacity;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-shown {
|
||||
opacity: 1;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-horizontal {
|
||||
height: 7px;
|
||||
margin-left: 2px;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-vertical {
|
||||
width: 7px;
|
||||
margin-top: 2px;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.antiscroll-inner {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.antiScroll,.antiscroll-content, .antiscroll-inner {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.antiscroll-inner::-webkit-scrollbar, .antiscroll-inner::scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
439
modules/lib/antiscroll/antiscroll.js
Normal file
439
modules/lib/antiscroll/antiscroll.js
Normal file
@ -0,0 +1,439 @@
|
||||
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* Augment jQuery prototype.
|
||||
*/
|
||||
|
||||
$.fn.antiscroll = function (options) {
|
||||
return this.each(function () {
|
||||
if ($(this).data('antiscroll')) {
|
||||
$(this).data('antiscroll').destroy();
|
||||
}
|
||||
|
||||
$(this).data('antiscroll', new $.Antiscroll(this, options));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Expose constructor.
|
||||
*/
|
||||
|
||||
$.Antiscroll = Antiscroll;
|
||||
|
||||
/**
|
||||
* Antiscroll pane constructor.
|
||||
*
|
||||
* @param {Element|jQuery} main pane
|
||||
* @parma {Object} options
|
||||
* @api public
|
||||
*/
|
||||
|
||||
function Antiscroll (el, opts) {
|
||||
this.el = $(el);
|
||||
this.options = opts || {};
|
||||
|
||||
this.x = false !== this.options.x;
|
||||
this.y = false !== this.options.y;
|
||||
this.padding = undefined == this.options.padding ? 2 : this.options.padding;
|
||||
|
||||
this.inner = this.el.find('.antiscroll-inner');
|
||||
this.inner.css({
|
||||
'width': '+=' + scrollbarSize()
|
||||
, 'height': '+=' + scrollbarSize()
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
};
|
||||
|
||||
/**
|
||||
* refresh scrollbars
|
||||
*
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.refresh = function() {
|
||||
var needHScroll = this.inner.get(0).scrollWidth > this.el.width()
|
||||
, needVScroll = this.inner.get(0).scrollHeight > this.el.height();
|
||||
|
||||
if (!this.horizontal && needHScroll && this.x) {
|
||||
this.horizontal = new Scrollbar.Horizontal(this);
|
||||
} else if (this.horizontal && !needHScroll) {
|
||||
this.horizontal.destroy();
|
||||
this.horizontal = null
|
||||
}
|
||||
|
||||
if (!this.vertical && needVScroll && this.y) {
|
||||
this.vertical = new Scrollbar.Vertical(this);
|
||||
} else if (this.vertical && !needVScroll) {
|
||||
this.vertical.destroy();
|
||||
this.vertical = null
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleans up.
|
||||
*
|
||||
* @return {Antiscroll} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.destroy = function () {
|
||||
if (this.horizontal) {
|
||||
this.horizontal.destroy();
|
||||
}
|
||||
if (this.vertical) {
|
||||
this.vertical.destroy();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Rebuild Antiscroll.
|
||||
*
|
||||
* @return {Antiscroll} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Antiscroll.prototype.rebuild = function () {
|
||||
this.destroy();
|
||||
this.inner.attr('style', '');
|
||||
Antiscroll.call(this, this.el, this.options);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrollbar constructor.
|
||||
*
|
||||
* @param {Element|jQuery} element
|
||||
* @api public
|
||||
*/
|
||||
|
||||
function Scrollbar (pane) {
|
||||
this.pane = pane;
|
||||
this.pane.el.append(this.el);
|
||||
this.innerEl = this.pane.inner.get(0);
|
||||
|
||||
this.dragging = false;
|
||||
this.enter = false;
|
||||
this.shown = false;
|
||||
|
||||
// hovering
|
||||
this.pane.el.mouseenter($.proxy(this, 'mouseenter'));
|
||||
this.pane.el.mouseleave($.proxy(this, 'mouseleave'));
|
||||
|
||||
// dragging
|
||||
this.el.mousedown($.proxy(this, 'mousedown'));
|
||||
|
||||
// scrolling
|
||||
this.pane.inner.scroll($.proxy(this, 'scroll'));
|
||||
|
||||
// wheel -optional-
|
||||
this.pane.inner.bind('mousewheel', $.proxy(this, 'mousewheel'));
|
||||
|
||||
// show
|
||||
var initialDisplay = this.pane.options.initialDisplay;
|
||||
|
||||
if (initialDisplay !== false) {
|
||||
this.show();
|
||||
this.hiding = setTimeout($.proxy(this, 'hide'), parseInt(initialDisplay, 10) || 3000);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleans up.
|
||||
*
|
||||
* @return {Scrollbar} for chaining
|
||||
* @api public
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.destroy = function () {
|
||||
this.el.remove();
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon mouseenter.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mouseenter = function () {
|
||||
this.enter = true;
|
||||
this.show();
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon mouseleave.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mouseleave = function () {
|
||||
this.enter = false;
|
||||
|
||||
if (!this.dragging) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon wrap scroll.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.scroll = function () {
|
||||
if (!this.shown) {
|
||||
this.show();
|
||||
if (!this.enter && !this.dragging) {
|
||||
this.hiding = setTimeout($.proxy(this, 'hide'), 1500);
|
||||
}
|
||||
}
|
||||
|
||||
this.update();
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon scrollbar mousedown.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.mousedown = function (ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
this.dragging = true;
|
||||
|
||||
this.startPageY = ev.pageY - parseInt(this.el.css('top'), 10);
|
||||
this.startPageX = ev.pageX - parseInt(this.el.css('left'), 10);
|
||||
|
||||
// prevent crazy selections on IE
|
||||
document.onselectstart = function () { return false; };
|
||||
|
||||
var pane = this.pane
|
||||
, move = $.proxy(this, 'mousemove')
|
||||
, self = this
|
||||
|
||||
$(document)
|
||||
.mousemove(move)
|
||||
.mouseup(function () {
|
||||
self.dragging = false;
|
||||
document.onselectstart = null;
|
||||
|
||||
$(document).unbind('mousemove', move);
|
||||
|
||||
if (!self.enter) {
|
||||
self.hide();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
/**
|
||||
* Show scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.show = function (duration) {
|
||||
if (!this.shown) {
|
||||
this.update();
|
||||
this.el.addClass('antiscroll-scrollbar-shown');
|
||||
if (this.hiding) {
|
||||
clearTimeout(this.hiding);
|
||||
this.hiding = null;
|
||||
}
|
||||
this.shown = true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.prototype.hide = function () {
|
||||
var autoHide = this.pane.options.autoHide;
|
||||
if (autoHide !== false && this.shown) {
|
||||
// check for dragging
|
||||
this.el.removeClass('antiscroll-scrollbar-shown');
|
||||
this.shown = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Horizontal scrollbar constructor
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal = function (pane) {
|
||||
this.el = $('<div class="antiscroll-scrollbar antiscroll-scrollbar-horizontal">');
|
||||
Scrollbar.call(this, pane);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inherits from Scrollbar.
|
||||
*/
|
||||
|
||||
inherits(Scrollbar.Horizontal, Scrollbar);
|
||||
|
||||
/**
|
||||
* Updates size/position of scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.update = function () {
|
||||
var paneWidth = this.pane.el.width()
|
||||
, trackWidth = paneWidth - this.pane.padding * 2
|
||||
, innerEl = this.pane.inner.get(0)
|
||||
|
||||
this.el
|
||||
.css('width', trackWidth * paneWidth / innerEl.scrollWidth)
|
||||
.css('left', trackWidth * innerEl.scrollLeft / innerEl.scrollWidth)
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon drag.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.mousemove = function (ev) {
|
||||
var trackWidth = this.pane.el.width() - this.pane.padding * 2
|
||||
, pos = ev.pageX - this.startPageX
|
||||
, barWidth = this.el.width()
|
||||
, innerEl = this.pane.inner.get(0)
|
||||
|
||||
// minimum top is 0, maximum is the track height
|
||||
var y = Math.min(Math.max(pos, 0), trackWidth - barWidth)
|
||||
|
||||
innerEl.scrollLeft = (innerEl.scrollWidth - this.pane.el.width())
|
||||
* y / (trackWidth - barWidth)
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon container mousewheel.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Horizontal.prototype.mousewheel = function (ev, delta, x, y) {
|
||||
if ((x < 0 && 0 == this.pane.inner.get(0).scrollLeft) ||
|
||||
(x > 0 && (this.innerEl.scrollLeft + Math.ceil(this.pane.el.width())
|
||||
== this.innerEl.scrollWidth))) {
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Vertical scrollbar constructor
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical = function (pane) {
|
||||
this.el = $('<div class="antiscroll-scrollbar antiscroll-scrollbar-vertical">');
|
||||
Scrollbar.call(this, pane);
|
||||
};
|
||||
|
||||
/**
|
||||
* Inherits from Scrollbar.
|
||||
*/
|
||||
|
||||
inherits(Scrollbar.Vertical, Scrollbar);
|
||||
|
||||
/**
|
||||
* Updates size/position of scrollbar.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.update = function () {
|
||||
var paneHeight = this.pane.el.height()
|
||||
, trackHeight = paneHeight - this.pane.padding * 2
|
||||
, innerEl = this.innerEl
|
||||
|
||||
this.el
|
||||
.css('height', trackHeight * paneHeight / innerEl.scrollHeight)
|
||||
.css('top', trackHeight * innerEl.scrollTop / innerEl.scrollHeight)
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon drag.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.mousemove = function (ev) {
|
||||
var paneHeight = this.pane.el.height()
|
||||
, trackHeight = paneHeight - this.pane.padding * 2
|
||||
, pos = ev.pageY - this.startPageY
|
||||
, barHeight = this.el.height()
|
||||
, innerEl = this.innerEl
|
||||
|
||||
// minimum top is 0, maximum is the track height
|
||||
var y = Math.min(Math.max(pos, 0), trackHeight - barHeight)
|
||||
|
||||
innerEl.scrollTop = (innerEl.scrollHeight - paneHeight)
|
||||
* y / (trackHeight - barHeight)
|
||||
};
|
||||
|
||||
/**
|
||||
* Called upon container mousewheel.
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
|
||||
Scrollbar.Vertical.prototype.mousewheel = function (ev, delta, x, y) {
|
||||
if ((y > 0 && 0 == this.innerEl.scrollTop) ||
|
||||
(y < 0 && (this.innerEl.scrollTop + Math.ceil(this.pane.el.height())
|
||||
== this.innerEl.scrollHeight))) {
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cross-browser inheritance.
|
||||
*
|
||||
* @param {Function} constructor
|
||||
* @param {Function} constructor we inherit from
|
||||
* @api private
|
||||
*/
|
||||
|
||||
function inherits (ctorA, ctorB) {
|
||||
function f() {};
|
||||
f.prototype = ctorB.prototype;
|
||||
ctorA.prototype = new f;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrollbar size detection.
|
||||
*/
|
||||
|
||||
var size;
|
||||
|
||||
function scrollbarSize () {
|
||||
if (size === undefined) {
|
||||
var div = $(
|
||||
'<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
|
||||
+ 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%">'
|
||||
+ '</div>'
|
||||
);
|
||||
|
||||
$('body').append(div);
|
||||
var w1 = $(div).innerWidth();
|
||||
var w2 = $('div', div).innerWidth();
|
||||
$(div).remove();
|
||||
|
||||
size = w1 - w2;
|
||||
}
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
9
modules/lib/antiscroll/antiscroll.min.js
vendored
Normal file
9
modules/lib/antiscroll/antiscroll.min.js
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
(function(b){function f(a,e){this.el=b(a);this.options=e||{};this.x=!1!==this.options.x;this.y=!1!==this.options.y;this.padding=void 0==this.options.padding?2:this.options.padding;this.inner=this.el.find(".antiscroll-inner");this.inner.css({width:"+="+h(),height:"+="+h()});this.refresh()}function c(a){this.pane=a;this.pane.el.append(this.el);this.innerEl=this.pane.inner.get(0);this.shown=this.enter=this.dragging=!1;this.pane.el.mouseenter(b.proxy(this,"mouseenter"));this.pane.el.mouseleave(b.proxy(this,
|
||||
"mouseleave"));this.el.mousedown(b.proxy(this,"mousedown"));this.pane.inner.scroll(b.proxy(this,"scroll"));this.pane.inner.bind("mousewheel",b.proxy(this,"mousewheel"));a=this.pane.options.initialDisplay;!1!==a&&(this.show(),this.hiding=setTimeout(b.proxy(this,"hide"),parseInt(a,10)||3E3))}function j(a,e){function d(){}d.prototype=e.prototype;a.prototype=new d}function h(){if(void 0===g){var a=b('<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');
|
||||
b("body").append(a);var e=b(a).innerWidth(),d=b("div",a).innerWidth();b(a).remove();g=e-d}return g}b.fn.antiscroll=function(a){return this.each(function(){b(this).data("antiscroll")&&b(this).data("antiscroll").destroy();b(this).data("antiscroll",new b.Antiscroll(this,a))})};b.Antiscroll=f;f.prototype.refresh=function(){var a=this.inner.get(0).scrollWidth>this.el.width(),e=this.inner.get(0).scrollHeight>this.el.height();!this.horizontal&&a&&this.x?this.horizontal=new c.Horizontal(this):this.horizontal&&
|
||||
!a&&(this.horizontal.destroy(),this.horizontal=null);!this.vertical&&e&&this.y?this.vertical=new c.Vertical(this):this.vertical&&!e&&(this.vertical.destroy(),this.vertical=null)};f.prototype.destroy=function(){this.horizontal&&this.horizontal.destroy();this.vertical&&this.vertical.destroy();return this};f.prototype.rebuild=function(){this.destroy();this.inner.attr("style","");f.call(this,this.el,this.options);return this};c.prototype.destroy=function(){this.el.remove();return this};c.prototype.mouseenter=
|
||||
function(){this.enter=!0;this.show()};c.prototype.mouseleave=function(){this.enter=!1;this.dragging||this.hide()};c.prototype.scroll=function(){this.shown||(this.show(),!this.enter&&!this.dragging&&(this.hiding=setTimeout(b.proxy(this,"hide"),1500)));this.update()};c.prototype.mousedown=function(a){a.preventDefault();this.dragging=!0;this.startPageY=a.pageY-parseInt(this.el.css("top"),10);this.startPageX=a.pageX-parseInt(this.el.css("left"),10);document.onselectstart=function(){return!1};var e=b.proxy(this,
|
||||
"mousemove"),d=this;b(document).mousemove(e).mouseup(function(){d.dragging=!1;document.onselectstart=null;b(document).unbind("mousemove",e);d.enter||d.hide()})};c.prototype.show=function(){this.shown||(this.update(),this.el.addClass("antiscroll-scrollbar-shown"),this.hiding&&(clearTimeout(this.hiding),this.hiding=null),this.shown=!0)};c.prototype.hide=function(){!1!==this.pane.options.autoHide&&this.shown&&(this.el.removeClass("antiscroll-scrollbar-shown"),this.shown=!1)};c.Horizontal=function(a){this.el=
|
||||
b('<div class="antiscroll-scrollbar antiscroll-scrollbar-horizontal">');c.call(this,a)};j(c.Horizontal,c);c.Horizontal.prototype.update=function(){var a=this.pane.el.width(),e=a-2*this.pane.padding,d=this.pane.inner.get(0);this.el.css("width",e*a/d.scrollWidth).css("left",e*d.scrollLeft/d.scrollWidth)};c.Horizontal.prototype.mousemove=function(a){var e=this.pane.el.width()-2*this.pane.padding,d=a.pageX-this.startPageX;a=this.el.width();var b=this.pane.inner.get(0),d=Math.min(Math.max(d,0),e-a);b.scrollLeft=
|
||||
(b.scrollWidth-this.pane.el.width())*d/(e-a)};c.Horizontal.prototype.mousewheel=function(a,b,d){if(0>d&&0==this.pane.inner.get(0).scrollLeft||0<d&&this.innerEl.scrollLeft+Math.ceil(this.pane.el.width())==this.innerEl.scrollWidth)return a.preventDefault(),!1};c.Vertical=function(a){this.el=b('<div class="antiscroll-scrollbar antiscroll-scrollbar-vertical">');c.call(this,a)};j(c.Vertical,c);c.Vertical.prototype.update=function(){var a=this.pane.el.height(),b=a-2*this.pane.padding,d=this.innerEl;this.el.css("height",
|
||||
b*a/d.scrollHeight).css("top",b*d.scrollTop/d.scrollHeight)};c.Vertical.prototype.mousemove=function(a){var b=this.pane.el.height(),d=b-2*this.pane.padding,c=a.pageY-this.startPageY;a=this.el.height();var f=this.innerEl,c=Math.min(Math.max(c,0),d-a);f.scrollTop=(f.scrollHeight-b)*c/(d-a)};c.Vertical.prototype.mousewheel=function(a,b,c,f){if(0<f&&0==this.innerEl.scrollTop||0>f&&this.innerEl.scrollTop+Math.ceil(this.pane.el.height())==this.innerEl.scrollHeight)return a.preventDefault(),!1};var g})(jQuery);
|
||||
304
modules/lib/antiscroll/index.html
Normal file
304
modules/lib/antiscroll/index.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way</title>
|
||||
<link href="antiscroll.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 80px 100px;
|
||||
font: 14px/1.4 'helvetica neue', helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.box, .box .antiscroll-inner {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
font: 14px Helvetica, Arial;
|
||||
}
|
||||
|
||||
.box-wrap {
|
||||
margin: 20px 40px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.box-inner {
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
-webkit-user-select: none;
|
||||
display: block;
|
||||
background: #3b88d8;
|
||||
text-decoration: none;
|
||||
background: -o-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
|
||||
border-top: 1px solid #4081af;
|
||||
border-right: 1px solid #2e69a3;
|
||||
border-bottom: 1px solid #20559a;
|
||||
border-left: 1px solid #2e69a3;
|
||||
-moz-border-radius: 16px;
|
||||
-webkit-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
||||
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
||||
color: #fff;
|
||||
font-family: "lucida grande", sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
padding: 3px 0 5px 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 1px #3275bc;
|
||||
width: 112px;
|
||||
-webkit-background-clip: padding-box;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #2a81d7;
|
||||
background: -o-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
|
||||
background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
|
||||
border-top: 1px solid #2a73a6;
|
||||
border-right: 1px solid #165899;
|
||||
border-bottom: 1px solid #07428f;
|
||||
border-left: 1px solid #165899;
|
||||
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 -1px 1px #1d62ab;
|
||||
-webkit-background-clip: padding-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #3282d3;
|
||||
border: 1px solid #154c8c;
|
||||
border-bottom: 1px solid #0e408e;
|
||||
-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
|
||||
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
|
||||
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
|
||||
text-shadow: 0 -1px 1px #2361a4;
|
||||
-webkit-background-clip: padding-box;
|
||||
}
|
||||
|
||||
ul#features {
|
||||
margin: 40px 0;
|
||||
padding: 0 20px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
ul#features li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin: 0 5px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.action {
|
||||
color: #0069d6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
color: #00438a;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="deps/jquery.js"></script>
|
||||
<script src="deps/jquery-mousewheel.js"></script>
|
||||
<script src="antiscroll.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
scroller = $('.box-wrap').antiscroll().data('antiscroll');
|
||||
|
||||
$("#addRow").click(function() {
|
||||
$('.box-wrap tr:last').clone().appendTo('.box-wrap table');
|
||||
$("#rows b").text($(".box-wrap tr").length);
|
||||
scroller.refresh();
|
||||
});
|
||||
|
||||
$("#removeRow").click(function() {
|
||||
$('.box-wrap tr:last').remove();
|
||||
$("#rows b").text($(".box-wrap tr").length);
|
||||
scroller.refresh();
|
||||
});
|
||||
|
||||
$("#addCol").click(function() {
|
||||
$('.box-wrap tr').each(function(index, tr) {
|
||||
$('td:last', tr).clone().appendTo(tr);
|
||||
});
|
||||
$("#cols b").text($(".box-wrap tr:last td").length);
|
||||
scroller.refresh();
|
||||
});
|
||||
|
||||
$("#removeCol").click(function() {
|
||||
$('.box-wrap tr').find('td:last').remove();
|
||||
$("#cols b").text($(".box-wrap tr:last td").length);
|
||||
scroller.refresh();
|
||||
});
|
||||
|
||||
$("#rows b").text($(".box-wrap tr").length);
|
||||
$("#cols b").text($(".box-wrap tr:last td").length);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<h1>Antiscroll</h1>
|
||||
<p>os x lion style cross-browser native scrolling on the web that gets out of the way.</p>
|
||||
<ul id="features">
|
||||
<li>supports mousewheels, trackpads, other input devices natively.</li>
|
||||
<li>total size is <b>1kb</b> minified and gzipped.</li>
|
||||
<li>doesn't magically autowrap your elements with divs (manual wrapping is necessary, please see index.html demo).</li>
|
||||
<li>fade in/out controlled with CSS3 animations.</li>
|
||||
<li>shows scrollbars upon hovering.</li>
|
||||
<li>scrollbars are draggable.</li>
|
||||
<li>size of container can be dynamically adjusted and scrollbars will adapt.</li>
|
||||
<li>supports IE7+, Firefox 3+, Chrome, Safari, Opera</li>
|
||||
</ul>
|
||||
<div class="box-wrap antiscroll-wrap">
|
||||
<div class="box">
|
||||
<div class="antiscroll-inner">
|
||||
<div class="box-inner">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear: both">
|
||||
<a href="https://github.com/learnboost/antiscroll/downloads" class="button">Download</a>
|
||||
|
||||
<br />
|
||||
|
||||
<p id="rows"><b>X</b> rows</p>
|
||||
<ul>
|
||||
<li><a class="action" id="addRow" >Add row</a></li>
|
||||
<li><a class="action" id="removeRow">Remove row</a></li>
|
||||
</ul>
|
||||
|
||||
<p id="cols"><b>X</b> cols</p>
|
||||
</ul>
|
||||
<li><a class="action" id="addCol" >Add col</a></li>
|
||||
<li><a class="action" id="removeCol">Remove col</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
78
modules/lib/antiscroll/jquery-mousewheel.js
vendored
Normal file
78
modules/lib/antiscroll/jquery-mousewheel.js
vendored
Normal file
@ -0,0 +1,78 @@
|
||||
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.4
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
|
||||
if ( event.detail ) { delta = -event.detail/3; }
|
||||
|
||||
// New school multidimensional scroll (touchpads) deltas
|
||||
deltaY = delta;
|
||||
|
||||
// Gecko
|
||||
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaY = 0;
|
||||
deltaX = -1*delta;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
return $.event.handle.apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user