tinyscrollbar minor update

This commit is contained in:
devin 2013-03-05 17:22:53 +08:00
parent 3182f5c9a8
commit db2b371744
5 changed files with 55 additions and 18 deletions

View File

@ -11,19 +11,20 @@
* Depends on library: jQuery
*
*/
( function( $ )
;( function( $ )
{
$.tiny = $.tiny || { };
$.tiny.scrollbar = {
options: {
axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
, wheel : 40 // how many pixels must the mouswheel scroll at a time.
, scroll : true // enable or disable the mousewheel.
, lockscroll : true // return scrollwheel to browser if there is no more content.
, size : 'auto' // set the size of the scrollbar to auto or a fixed number.
, sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
, onMove : function(){}
axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
, wheel : 40 // how many pixels must the mouswheel scroll at a time.
, scroll : true // enable or disable the mousewheel.
, lockscroll : true // return scrollwheel to browser if there is no more content.
, size : 'auto' // set the size of the scrollbar to auto or a fixed number.
, sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
, invertscroll : false // Enable mobile invert style scrolling
, onMove : function(){}
}
};
@ -59,13 +60,15 @@
, iScroll = 0
, iPosition = { start: 0, now: 0 }
, iMouse = {}
, touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false
, touchEvents = 'ontouchstart' in document.documentElement
, UA = $.browser
;
function initialize()
{
oSelf.update();
setEvents();
return oSelf;
}
@ -124,6 +127,9 @@
{
oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
oWrapper[0].addEventListener( 'mousewheel', wheel, false );
oWrapper[0].addEventListener( 'MozMousePixelScroll', function( event ){
event.preventDefault();
}, false);
}
else if( options.scroll )
{
@ -133,6 +139,16 @@
function start( event )
{
$( "body" ).addClass( "noSelect" );
// Disable select text under IE10
if ( UA.msie < 10 ){
$( "body" ).attr({
"onselectstart": "return false",
"ondragstart": "return false"
});
}
oScrollbar.obj.addClass( "dragging" );
var oThumbDir = parseInt( oThumb.obj.css( sDirection ), 10 );
iMouse.start = sAxis ? event.pageX : event.pageY;
iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
@ -181,13 +197,13 @@
{
if( oContent.ratio < 1 )
{
if( ! touchEvents )
if( options.invertscroll && touchEvents )
{
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
}
else
{
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
}
iScroll = iPosition.now * oScrollbar.ratio;
@ -198,6 +214,12 @@
function end()
{
$( "body" ).removeClass( "noSelect" );
// Enable select text under IE10
if ( UA.msie < 10 ){
$( "body" ).removeAttr( "onselectstart", "ondragstart" );
}
oScrollbar.obj.removeClass( "dragging" );
$( document ).unbind( 'mousemove', drag );
$( document ).unbind( 'mouseup', end );
oThumb.obj.unbind( 'mouseup', end );

View File

@ -364,6 +364,14 @@
height: 6px;
width: 6px;
}
.noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.tinycanvas .scrollbar {
position: absolute;
z-index: 9;
@ -373,6 +381,10 @@
-moz-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.tinycanvas .scrollbar.dragging {
opacity: 1;
visibility: visible;
}
.tinycanvas .scrollbar.sb_h {
left: 0;
bottom: -6px;

View File

@ -276,7 +276,7 @@ a:focus { outline: none; }
height: 100%;
left: 0;
top: 0;
z-index: 10;
z-index: 12;
}
#orbitdiag .tile { background-color: #000; }
.diag_holder { background-color: #000; }
@ -374,6 +374,9 @@ a:focus { outline: none; }
left: 0;
top: 0;
}
.widget.gs_w {
cursor: move;
}
/* header drop menu */
.sdm_mdr .sdm_o { top: 36px; }
@ -699,7 +702,7 @@ a:focus { outline: none; }
left: 0;
right: 0;
bottom: 0;
z-index: 9;
z-index: 12;
}
.app_frame .app_holder {
background-color: #fff;

View File

@ -85,8 +85,8 @@
<div class="diag_holder_inner">
<div class="diag_message"></div>
<div class="diag_action">
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
</div>
</div>
</div>

View File

@ -81,8 +81,8 @@
<div class="diag_holder_inner">
<div class="diag_message"></div>
<div class="diag_action">
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
</div>
</div>
</div>