Use jtrackbar to simulate an apple-style scroll bar

CopyCode The Code is as follows: function jobj (){}
Jobj. $ c = function (TAG) {return document. createelement (TAG )};
Jobj. $ = function (ID) {return document. getelementbyid (ID )};
Jobj. israte = function (pratestring ){
If (! Isnan (pratestring) return false;
If (pratestring. substr (pratestring. Length-1, 1 )! = "% ")
Return false;
If (isnan (pratestring. substring (0, pratestring. Length-1 )))
Return false;
Return true;
}

Function JPOs (){}
JPOs. getabspos = function (pTARGET ){
VaR X _ = Y _ = 0;
While (pTARGET. offsetparent ){
X _ + = pTARGET. offsetleft;
Y _ + = pTARGET. offsettop;
PTARGET = pTARGET. offsetparent;
}
X _ + = pTARGET. offsetleft;
Y _ + = pTARGET. offsettop;
Return {X: X _, Y: Y _};
}

JPOs. getmousepos = function (EVT ){
VaR X _ = Y _ = 0;
EVT = EVT | window. event;
If (EVT. pagex | EVT. Pagey ){
X _ = EVT. pagex;
Y _ = EVT. Pagey;
} Else {
X _ = EVT. clientx + document. Body. scrollleft-document. Body. clientleft;
Y _ = EVT. clienty + document. Body. scrolltop-document. Body. clienttop;
}

Return {X: X _, Y: Y _};
}

<! --
/*
----------------------------------------------------------------------
Jtrackbar
Initial Date: 2007/07/11
Author: xlingfairy
Blog: http://xling.blueidea.com

Currently, only horizontal data can be generated. Vertical Data is not written yet.
Design Features:
When a change occurs, the onchange event is triggered and the current value is passed.

2007/07/12
Add the drag function.

2007/07/13
Add skin Function

2007/08/06
Add vertical. And Fixed a bug caused by setrange.

Not available: Specify trackfrequence. You can modify it yourself.

Please respect the fruits of your work! Do not delete all original information! At your own risk!
----------------------------------------------------------------------
*/
Function JPOs (){

}

JPOs. getabspos = function (pTARGET ){
VaR _ x = 0;
VaR _ y = 0;
While (pTARGET. offsetparent ){
_ X + = pTARGET. offsetleft;
_ Y + = pTARGET. offsettop;
PTARGET = pTARGET. offsetparent;
}
_ X + = pTARGET. offsetleft;
_ Y + = pTARGET. offsettop;

Return {X: _ x, y: _ y };
}

JPOs. getmousepos = function (EVT ){
VaR _ x, _ y;
EVT = EVT | window. event;
If (EVT. pagex | EVT. Pagey ){
_ X = EVT. pagex;
_ Y = EVT. Pagey;
} Else {
_ X = EVT. clientx + document. Body. scrollleft-document. Body. clientleft;
_ Y = EVT. clienty + document. Body. scrolltop-document. Body. clienttop;
}
Return {X: _ x, y: _ y };
}

Function jtrackbar (pparent ){
VaR self = this;

VaR $ = function (PID ){
Return document. getelementbyid (PID );
}

VaR $ c = function (ptag ){
Return document. createelement (ptag );
}

VaR trackbartype; // V & H
If (typeof pparent). touppercase () = "object ")
VaR body = pparent;
Else
VaR body = $ (pparent) | document. Body;
VaR Ooutline = NULL;
VaR otrackarea = NULL;
VaR obtnpointer = NULL;
VaR oarrbtnleft = oarrbtnright = oarrbtnup = oarrbtndown = NULL;

VaR indrag = false;
VaR dragstartpos = NULL;

VaR maxposition = 100; // maximum scale
VaR minposition = 0; // minimum scale
VaR base = 0;
VaR position = 0; // Current Position
VaR trackfrequence = 10; // how many scales do I move at a time?

VaR defaultarroww = defaultarrowh = 15; // only for IE!

This. setrange = function (pmin, Pmax ){
Maxposition = math. Max (pmin, Pmax );
Minposition = math. Min (pmin, Pmax );

Maxposition-= minposition;
Base = minposition;
Minposition = 0;
}

VaR outlinewidth, trackareawidth, prefrequencewidth;
VaR outlineheight, trackareaheight, prefrequenceheight;

This. onchange = new function ();

var getrunstyle = function (pobj, pproperty) {
try {
If (pobj. currentstyle)
return eval ("pobj. currentstyle. "+ pproperty);
else
return document. defaultview. getcomputedstyle (pobj ,""). getpropertyvalue (pproperty);
}catch (e) {
alert (E);
}< BR >}

/* --------------------------------------------------- */
var createoutline = function (pwh) {
Ooutline = $ C ("Div");
body. appendchild (Ooutline);
Ooutline. classname = "jtrackbarstand";
If (trackbartype = "H")
Ooutline. style. width = pwh + "PX";
else if (trackbartype = "v")
Ooutline. style. height = pwh + "PX";
Ooutline. style. overflow = "hidden";
}< br>/* ----------------------------------------------------- */
var createarrbtn = function (pdirection) {
var arrbtn = $ C ("Div");
switch (pdirection) {
case "Left":
arrbtn. classname = "btnleft";
arrbtn. style. stylefloat = "Left";
arrbtn.style.css float = "Left";
break;
case "right":
arrbtn. classname = "btnright";
arrbtn. style. stylefloat = "Left";
arrbtn.style.css float = "Left";
break;
case "up":
arrbtn. classname = "btnup";
break;
case "down":
arrbtn. classname = "btndown";
break;
}

Arrbtn. Direction = pdirection;
Arrbtn. onclick = arrbtn_click;
Return arrbtn;
}

VaR arrbtn_click = function (EVT ){

EVT = Window. Event | EVT;
VaR o = EVT. srcelement | evt.tar get;

Switch (O. Direction ){
Case "Left ":
Case "up ":
Self. setpositionby (-trackfrequence );
Break;
Case "right ":
Case "down ":
Self. setpositionby (trackfrequence );
Break;
}
}

VaR trackarea_click = function (EVT ){
EVT = Window. Event | EVT;
VaR MPOs = JPOs. getmousepos (EVT );

VaR POS _ = JPOs. getabspos (otrackarea );

If (trackbartype = "H "){
VaR W _ = parseint (getrunstyle (obtnpointer, "width "));
Self. setposition (parseint (MPOs. X-pos _. X)/prefrequencewidth ));
} Else {
VaR H _ = parseint (getrunstyle (obtnpointer, "height "));
Self. setposition (parseint (MPOs. Y-pos _. Y)/prefrequenceheight ));
}
}

VaR createhtrackarea = function (){
VaR W _ = parseint (getrunstyle (oarrbtnleft, "width "));
If (isnan (W _) W _ = defaultarroww;

Trackareawidth = outlinewidth-2 * w _;
Prefrequencewidth = trackareawidth/(maxposition-minposition );

Otrackarea = $ C ("Div ");
Ooutline. appendchild (otrackarea );

Otrackarea. onclick = trackarea_click;

Otrackarea. classname = "trackareah ";
Otrackarea. style. width = trackareawidth + "PX ";
Otrackarea. style. stylefloat = "Left ";
Otrackarea.style.css float = "Left ";
}

VaR createvtrackarea = function (){
VaR H _ = parseint (getrunstyle (oarrbtnup, "height "));
If (isnan (H _) H _ = defaultarrowh;
Trackareaheight = outlineheight-2 * H _;
Prefrequenceheight = trackareaheight/(maxposition-minposition );

Otrackarea = $ C ("Div ");
Ooutline. appendchild (otrackarea );

Otrackarea. onclick = trackarea_click;
Otrackarea. classname = "trackareav ";
Otrackarea. style. Height = trackareaheight + "PX ";
}

VaR recalctrackarea = function (){
If (trackbartype = "H "){
VaR W _ = parseint (getrunstyle (oarrbtnleft, "width "));
If (isnan (W _) W _ = defaultarroww;

Trackareawidth = outlinewidth-2 * w _;
Prefrequencewidth = trackareawidth/maxposition;

Otrackarea. style. width = trackareawidth + "PX ";
} Else {
VaR H _ = parseint (getrunstyle (oarrbtnup, "height "));
If (isnan (H _) H _ = defaultarrowh;

Trackareaheight = outlineheight-2 * H _;
Prefrequenceheight = trackareaheight/maxposition;
Otrackarea. style. Height = trackareaheight + "PX ";
}
}

VaR pointer_mousedown = function (EVT ){
Indrag = true;
Dragstartpos = JPOs. getmousepos (EVT );
Body. onmousemove = pointer_mousemove;
Body. onmouseup = pointer_mouseup;
Body. onmouseout = pointer_mouseout;
}

VaR pointer_mousemove = function (EVT ){
If (! Indrag) return;
VaR MPOs = JPOs. getmousepos (EVT );
VaR POS _ = JPOs. getabspos (otrackarea );

If (trackbartype = "H ")
Self. setposition (parseint (MPOs. X-pos _. X)/prefrequencewidth ));
Else
Self. setposition (parseint (MPOs. Y-pos _. Y)/prefrequenceheight ));
}

VaR pointer_mouseup = function (){
Indrag = false;
}

VaR pointer_mouseout = function (){
// Indrag = false;
}

VaR createhpointer = function (){
Obtnpointer = $ C ("Div ");
Ooutline. appendchild (obtnpointer );
Obtnpointer. onmousedown = pointer_mousedown;

Obtnpointer. classname = "btnpointerh ";
Obtnpointer. style. Position = "absolute ";

VaR W _ = parseint (getrunstyle (obtnpointer, "width "));
If (isnan (W _) W _ = defaultarroww;

VaR POS _ = JPOs. getabspos (otrackarea );
Obtnpointer. style. Left = POS _. X-W _/2 + "PX ";
Obtnpointer. style. Top = POS _. Y + "PX ";
Obtnpointer.style.css text + = "Left:" + (Pos _. X-W _/2) + "PX; top:" + POS _. Y + "PX ;";
}

VaR createvpointer = function (){
Obtnpointer = $ C ("Div ");
Ooutline. appendchild (obtnpointer );
Obtnpointer. onmousedown = pointer_mousedown;

Obtnpointer. classname = "btnpointerv ";
Obtnpointer. style. Position = "absolute ";
VaR H _ = parseint (getrunstyle (obtnpointer, "height "));
If (isnan (H _) H _ = defaultarrowh;

VaR POS _ = JPOs. getabspos (otrackarea );
Obtnpointer. style. Top = POS _. Y-H _/2 + "PX ";
Obtnpointer. style. Left = POS _. x + "PX ";
Obtnpointer.style.css text + = "Left:" + POS _. x + "PX; top:" + (Pos _. Y-H _/2) + "PX ";
}

/*-----------------------------------------------------*/
This. createhtrackbar = function (pwidth ){
Trackbartype = "H ";
Outlinewidth = pwidth;
Createoutline (pwidth );

Oarrbtnleft = createarrbtn ("Left ");
Ooutline. appendchild (oarrbtnleft );

Createhtrackarea ();

Oarrbtnright = createarrbtn ("right ");
Ooutline. appendchild (oarrbtnright );

Createhpointer ();
}
/*-----------------------------------------------------*/
This. createvtrackbar = function (pheight ){
Trackbartype = "v ";
Outlineheight = pheight;
Createoutline (pheight );

Oarrbtnup = createarrbtn ("up ");
Ooutline. appendchild (oarrbtnup );

Createvtrackarea ();

Oarrbtndown = createarrbtn ("down ");
Ooutline. appendchild (oarrbtndown );

Createvpointer ();
}
/*-----------------------------------------------------*/

This. setpositionby = function (pposition ){
Position + = pposition;
Self. setposition (position );
}

This. setposition = function (pposition ){
Position = pposition;
If (position> maxposition)
Position = maxposition;
If (position <minposition)
Position = minposition;

VaR POS _ = JPOs. getabspos (otrackarea );

If (trackbartype = "H "){
VaR W _ = parseint (getrunstyle (obtnpointer, "width "));
If (isnan (W _) W _ = defaultarroww;

Obtnpointer. style. Left = POS _. X-W _/2 + prefrequencewidth * Position + "PX ";
} Else if (trackbartype = "v "){
VaR H _ = parseint (getrunstyle (obtnpointer, "height "));
If (isnan (H _) H _ = defaultarrowh;
Obtnpointer. style. Top = POS _. Y-H _/2 + prefrequenceheight * Position + "PX ";
}

Dochange ();
}

VaR dochange = function (){
Self. onchange (Position + base );
}

This. getposition = function (){
Return position;
}

This. setskin = function (pskin ){
Ooutline. classname = pskin;
Recalctrackarea ();
Self. setposition (minposition)
}
}

Function jscroll (pwidth, pheight, pbody ){
VaR self = this;
VaR Ooutline = NULL;
VaR ocontentarea = NULL;
VaR otrackbararea = NULL;

This. trackbar = NULL;

VaR W = jobj. israte (pwidth )? Pwidth :(! Isnan (pwidth )? Pwidth + "PX": "100% ");
VaR H = jobj. israte (pheight )? Pheight :(! Isnan (pheight )? Pheight + "PX": "100% ");

VaR dB _ = jobj. $ (pbody) | document. Body;

VaR createoutline = function (){
Ooutline = jobj. $ C ("Div ");
Ooutline. classname = "Ooutline ";
DB _. appendchild (Ooutline );
With (Ooutline. Style ){
Width = W;
Height = h;
Overflow = "hidden ";
}

Ocontentarea = jobj. $ C ("Div ");
Ooutline. appendchild (ocontentarea );
Ocontentarea. classname = "ocontentarea ";
With (ocontentarea. Style ){
Width = Ooutline. clientwidth-25 + "PX ";
Height = Ooutline. clientheight + "PX ";
Stylefloat = "Left ";
Cssfloat = "Left ";
}
}

This. Create = function (){
Createoutline ();
}

VaR createtrackbar = function (){
Otrackbararea = jobj. $ C ("Div ");
Ooutline. appendchild (otrackbararea );
With (otrackbararea. Style ){
Width = 20 + "PX ";
Height = ocontentarea. style. height;
Stylefloat = "Left ";
Cssfloat = "Left ";
Overflow = "hidden ";
}
Self. trackbar = new jtrackbar (otrackbararea );
Self. trackbar. onchange = function (ptrackposition ){
Ocontentarea. scrolltop = ptrackposition;
}

Self. trackbar. setrange (0, ocontentarea. scrollheight );
Self. trackbar. createvtrackbar (otrackbararea. clientheight );
Self. trackbar. setskin ("jtrackbarsky ");
}

This. addcontextarea = function (PID ){
Ocontentarea. appendchild (jobj. $ (PID ));
Ocontentarea. style. Overflow = "hidden ";

Createtrackbar ();
}

This. setskin = function (pskin ){
Self. trackbar. setskin (pskin)
}
}

Package File Download