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,7 +11,7 @@
* Depends on library: jQuery * Depends on library: jQuery
* *
*/ */
( function( $ ) ;( function( $ )
{ {
$.tiny = $.tiny || { }; $.tiny = $.tiny || { };
@ -23,6 +23,7 @@
, lockscroll : true // return scrollwheel to browser if there is no more content. , 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. , 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. , sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
, invertscroll : false // Enable mobile invert style scrolling
, onMove : function(){} , onMove : function(){}
} }
}; };
@ -59,13 +60,15 @@
, iScroll = 0 , iScroll = 0
, iPosition = { start: 0, now: 0 } , iPosition = { start: 0, now: 0 }
, iMouse = {} , iMouse = {}
, touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false , touchEvents = 'ontouchstart' in document.documentElement
, UA = $.browser
; ;
function initialize() function initialize()
{ {
oSelf.update(); oSelf.update();
setEvents(); setEvents();
return oSelf; return oSelf;
} }
@ -124,6 +127,9 @@
{ {
oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false ); oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
oWrapper[0].addEventListener( 'mousewheel', wheel, false ); oWrapper[0].addEventListener( 'mousewheel', wheel, false );
oWrapper[0].addEventListener( 'MozMousePixelScroll', function( event ){
event.preventDefault();
}, false);
} }
else if( options.scroll ) else if( options.scroll )
{ {
@ -133,6 +139,16 @@
function start( event ) 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 ); var oThumbDir = parseInt( oThumb.obj.css( sDirection ), 10 );
iMouse.start = sAxis ? event.pageX : event.pageY; iMouse.start = sAxis ? event.pageX : event.pageY;
iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir; iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
@ -181,13 +197,13 @@
{ {
if( oContent.ratio < 1 ) 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 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; iScroll = iPosition.now * oScrollbar.ratio;
@ -198,6 +214,12 @@
function end() 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( 'mousemove', drag );
$( document ).unbind( 'mouseup', end ); $( document ).unbind( 'mouseup', end );
oThumb.obj.unbind( 'mouseup', end ); oThumb.obj.unbind( 'mouseup', end );

View File

@ -364,6 +364,14 @@
height: 6px; height: 6px;
width: 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 { .tinycanvas .scrollbar {
position: absolute; position: absolute;
z-index: 9; z-index: 9;
@ -373,6 +381,10 @@
-moz-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.tinycanvas .scrollbar.dragging {
opacity: 1;
visibility: visible;
}
.tinycanvas .scrollbar.sb_h { .tinycanvas .scrollbar.sb_h {
left: 0; left: 0;
bottom: -6px; bottom: -6px;

View File

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

View File

@ -85,8 +85,8 @@
<div class="diag_holder_inner"> <div class="diag_holder_inner">
<div class="diag_message"></div> <div class="diag_message"></div>
<div class="diag_action"> <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_confirm" class="diag_btn admbg admtxt w1 hh1 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_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -81,8 +81,8 @@
<div class="diag_holder_inner"> <div class="diag_holder_inner">
<div class="diag_message"></div> <div class="diag_message"></div>
<div class="diag_action"> <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_confirm" class="diag_btn admbg admtxt w1 hh1 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_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
</div> </div>
</div> </div>
</div> </div>