Файл: MysqlIManager/js/scrollbar.js
Строк: 453
<?php
// ------------------------------------------------
// Custom DHTML scrollbar
// ------------------------------------------------
// (c) 2000 Peter Nederlof
// http://www.xs4all.nl/~peterned/
// Last updated: January 26, 2001
// ------------------------------------------------
// Values below are defaults. overwrite in HTML
var barWidth = 23;
var barHeight = 230;
var barXstart = 295;
var barXfromRight = false;
var barYstart = 0;
var scrollerHeight = 15;
var layerToScroll = "divContent";
var arrowSpeed = 3;
var clickStepSize = 40;
var extraSpace = 5;
var scrollerBG = "images/scroll_balk2.gif";
var upSRC = "images/up2.gif";
var downSRC = "images/down2.gif";
var scrollSRC = "images/scroller2.gif";
var autoDisable = true;
var onDisable = "hide";
var arrowGrouping = false;
// ------------------------------------------------
// I suggest you don't alter anything below
var ie4 = (document.all)? true:false;
var ns6 = (!ie4 && document.getElementById)? true:false;
var ns4 = (!ie4 && !ns6)? true:false;
var loaded = false;
var arrowSize;
var x, y, pageFromTop;
var upIMG, downIMG, scrollIMG;
var pageWidth, pageHeight;
if(!ie4 && navigator.appName != "Netscape")
{ alert('It seems you are using an unsupported browser');
}
// ------------------------------------------------
// Initializes the scrollbar
// - called by body onload()
function initScroller()
{ arrowSize = barWidth;
pageWidth = (ie4)? document.body.clientWidth:window.innerWidth;
pageHeight = (ie4)? document.body.clientHeight:window.innerHeight;
var tempLyr = getLayer(layerToScroll);
if(ie4) pageFromTop = tempLyr.style.pixelTop;
if(ns4) pageFromTop = tempLyr.top;
if(ns6) pageFromTop = 0; //parseInt(tempLyr.style.top);
upIMG = '<IMG SRC="'+upSRC +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">';
downIMG = '<IMG SRC="'+downSRC +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">';
scrollIMG = '<IMG name="theScroller" SRC="'+scrollSRC+'" WIDTH="'+barWidth+'" HEIGHT="'+scrollerHeight+'" BORDER="0">';
scrollbar = new Scrollbar(barWidth, barHeight, barXstart, barYstart);
scrollbar.build();
scrollbar.setMaxScroll();
loaded = true;
scrollbar.monitor();
scrollbar.setPage(layerToScroll);
}
// ------------------------------------------------
// Scrollbar Object.
// - defines values and functions
function Scrollbar(width, height, xPos, yPos)
{
// ------------------------------------------------
// Values:
this.width = width;
this.height = height;
this.xPos = xPos;
this.yPos = yPos;
this.enabled = true;
this.barString = "";
this.arrowSize = arrowSize;
this.arrowUpYstart = 0;
this.pageToScroll = layerToScroll;
this.toScrollHeight = 0;
this.activePage = layerToScroll;
this.maxScroll = this.height - this.arrowSize;
this.scrollerHeight = scrollerHeight;
// ------------------------------------------------
// Functions:
this.build = build;
this.monitor = monitor;
this.setPage = setPage;
this.toTop = toTop;
this.setMaxScroll = setMaxScroll;
}
// ------------------------------------------------
// Scrollbar Build function
// - builds Scrollbar and writes it to page
function build()
{
upApos = (arrowGrouping)? (this.height - (2*this.arrowSize)):0;
scrpos = (arrowGrouping)? 0:this.arrowSize;
// ------------------------------------------------
// Internet Explorer 4+
if(ie4)
{ this.barString = '<DIV ID="scrollyr" STYLE="position:absolute; left:'+this.xPos+'; top:'+this.yPos+'; '
+ 'z-index:20; width:'+this.width+'; height:'+this.height+';">'
+ '<DIV ID="arrowUp" STYLE="position:absolute; left:0; top:'+upApos+'; width:'+this.arrowSize+'; height:'
+ this.arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize
+ ',0); cursor:hand;">'+upIMG+'</DIV>'
+ '<DIV ID="scroller" STYLE="position:absolute; left:0; top:'+scrpos+'; width:'+this.arrowSize
+ '; height:'+scrollerHeight+';' // clip:rect(0,'+this.width+','+scrollerHeight+',0);'
+ ' z-index:25; cursor:hand;">'+scrollIMG+'</DIV>'
+ '<DIV ID="arrowDown" STYLE="position:absolute; left:0; top:'+(this.height-this.arrowSize)+'; width:'
+ arrowSize+'; height:'+arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize
+ ',0); cursor:hand;">'+downIMG+'</DIV>'
+ '</DIV>';
document.body.insertAdjacentHTML("BeforeEnd", this.barString);
scrollyr.onmousedown = goThere;
if(scrollerBG != "none")
{ if(scrollerBG.indexOf('.') != -1) scrollyr.style.backgroundImage = "url("+scrollerBG+")";
else scrollyr.style.backgroundColor = scrollerBG;
scrollyr.style.height = this.height
}
}
// ------------------------------------------------
// Netscape Navigator 4.x
if(ns4)
{ this.barString = '<Layer name="arrowUpF" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="'
+ this.arrowSize+'" z-index="30">'+upIMG+'</Layer>'
+ '<Layer name="arrowUp" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="'
+ this.arrowSize+'" z-index="31"></Layer>'
+ '<Layer name="scrollerF" left="0" top="'+scrpos+'" width="'+this.arrowSize
+ '" height="'+scrollerHeight+'" z-index="25">'+scrollIMG+'</Layer>'
+ '<Layer name="scroller" left="0" top="'+scrpos+'" width="'+this.arrowSize
+ '" height="'+scrollerHeight+'" z-index="26"></Layer>'
+ '<Layer name="arrowDownF" left="0" top="'+(this.height-this.arrowSize)+'" width="'
+ arrowSize+'" height="'+arrowSize+'" z-index="30">'+downIMG+'</Layer>'
+ '<Layer name="arrowDown" left="0" top="'+(this.height-this.arrowSize)+'" width="'
+ arrowSize+'" height="'+arrowSize+'" z-index="31"></Layer>';
scrollyr = new Layer(this.width);
scrollyr.document.write(this.barString);
scrollyr.document.close();
scrollyr.visibility = "show";
scrollyr.moveTo(barXstart, barYstart);
if(scrollerBG!="none")
{ if(scrollerBG.indexOf('.') != -1) scrollyr.background.src = scrollerBG;
else scrollyr.bgColor = scrollerBG
}
scrollyr.document.onmousedown = goThere;
this.pageToScroll = getLayer(layerToScroll);
scroller = getLayer('scroller');
scrollerF = getLayer('scrollerF');
arrowUp = getLayer('arrowUp');
arrowDown = getLayer('arrowDown');
scroller.style = scroller;
scrollyr.style = scrollyr;
}
// ------------------------------------------------
// Mozilla - Netscape 5 or 6
if(ns6)
{ scrollbarElement = new ns6layer("scrollyr", this.xPos, this.yPos, this.width, this.height, 20);
arrowUpElement = new ns6layer("arrowUp", 0, 0, this.arrowSize, this.arrowSize, 30);
arrowUpElement.addImage(upSRC);
arrowDownElement = new ns6layer("arrowDown", 0, (this.height-this.arrowSize), this.arrowSize, this.arrowSize, 30);
arrowDownElement.addImage(downSRC);
scrollerElement = new ns6layer("scroller", 0, this.arrowSize, this.arrowSize, scrollerHeight, 25);
scrollerElement.addImage(scrollSRC, "theScroller");
scroller = getLayer('scroller');
scrollyr = getLayer('scrollyr');
arrowUp = getLayer('arrowUp');
arrowDown = getLayer('arrowDown');
scrollyr.onmousedown = goThere;
}
}
// ------------------------------------------------
// Mozilla layer function (as Object)
// - creates and writes layer to page
// - addImage() writes an image to the layer
function ns6layer(name, left, top, width, height, z)
{ this.nameSRC = document.createElement("Div");
this.nameSRC.id = name;
if(name == "scrollyr") document.body.appendChild(this.nameSRC);
else scrollbarElement.nameSRC.appendChild(this.nameSRC);
this.lyr = document.getElementById(this.nameSRC.id);
this.lyr.setAttribute("style","position:absolute; left:"+left
+"; top:"+top+"; width:"+width+"; height:"+height+";");
this.lyr.style.zIndex = z;
if(name == "scrollyr" && scrollerBG != "none")
{ if(scrollerBG.indexOf('.') != -1) this.lyr.style.backgroundImage = "url("+scrollerBG+")";
else this.lyr.style.backgroundColor = scrollerBG;
}
this.addImage = addImage;
}
function addImage(path, imgName)
{ this.imgElement = document.createElement("Img");
this.imgElement.src = path
this.imgElement.width = barWidth;
if (imgName != null)
{ this.imgElement.id = imgName;
this.imgElement.height = scrollerHeight;
}
this.imgElement.border = 0;
this.lyr.appendChild(this.imgElement);
}
// ------------------------------------------------
// Built in option to enable page flipping in
// one document.
//
// - scrollbar.setPage(arg) with arg as String
// representing a layername with content,
// nested in the clipped top level layer
function setPage(toWhat)
{ var hideThis = getLayer(this.activePage);
if(ns4) hideThis.style = hideThis;
hideThis.style.visibility = "hidden";
var showThis = toWhat;
showThis = getLayer(showThis);
if(ns4) showThis.style = showThis;
showThis.style.visibility = "visible";
this.pageToScroll = toWhat;
if(ns4 || ns6) this.pageToScroll = getLayer(this.pageToScroll);
this.activePage = toWhat;
if(ie4) this.toScrollHeight = document.all[this.pageToScroll].clientHeight;
if(ns4) this.toScrollHeight = this.pageToScroll.document.height;
if(ns6) this.toScrollHeight = this.pageToScroll.offsetHeight;
if(autoDisable && this.toScrollHeight <= this.height)
{ scrollbar.enabled = false;
if(onDisable == "hide")
{ scrollyr.style.visibility = "hidden";
}
}
else
{ scrollbar.enabled = true;
scrollyr.style.visibility = "visible";
}
scroller.style.top = (arrowGrouping)? 0:this.arrowSize;
scroller.checkPos();
}
function toTop()
{ with(this)
{ setPage(activePage);
}
}
// ------------------------------------------------
// Defines the range of the scroll-element,
// how far you can drag it up and down.
function setMaxScroll()
{ this.maxScroll = this.height - this.arrowSize - this.scrollerHeight;
scroller.range = this.maxScroll - this.arrowSize;
}
// ------------------------------------------------
// Sets up mouse event listeners for the
// elements of the scrollbar.
function monitor()
{ scroller.scrolling = false;
scroller.moving = false;
scroller.yStart = this.yPos;
scroller.difY = 0;
scroller.checkPos = checkPos;
if(ns4)
{ arrowUp.onmouseout = stopScroll;
arrowDown.onmouseout = stopScroll;
arrowUp = arrowUp.document;
arrowDown = arrowDown.document;
scroller.document.onmousedown = setDrag;
scroller.document.onmouseup = stopDrag;
}
else
{ scroller.onmousedown = setDrag;
scroller.onmouseup = stopDrag;
arrowUp.onmouseout = stopScroll;
arrowDown.onmouseout = stopScroll;
}
arrowUp.onmouseout = stopScroll;
arrowDown.onmouseout = stopScroll;
arrowUp.onmouseover = scrollUp;
arrowDown.onmouseover = scrollDown;
}
// ------------------------------------------------
// Maps scroll-element position to the content
// layer, the heart of the script.
function checkPos()
{ if(arrowGrouping)
{ scrollbar.maxScroll -= scrollbar.arrowSize;
scrollbar.arrowSize = 0;
}
if(ns4)
{ if(this.top < scrollbar.arrowSize) this.top = scrollbar.arrowSize;
if(this.top > scrollbar.maxScroll) this.top = scrollbar.maxScroll;
scrollerF.top = scroller.top;
}
else
{ if(parseInt(this.style.top) < scrollbar.arrowSize) this.style.top = scrollbar.arrowSize;
if(parseInt(this.style.top) > scrollbar.maxScroll) this.style.top = scrollbar.maxScroll;
}
var position = 0 - scrollbar.arrowSize;
if(ns4) position += this.top
else position += parseInt(this.style.top);
var amountToDo = (scrollbar.toScrollHeight - scrollbar.height) + pageFromTop + extraSpace;
if(amountToDo < 0) amountToDo = 0;
var stepSize = amountToDo/this.range;
var newPosition = pageFromTop - (position * stepSize);
if(ie4) document.all[scrollbar.pageToScroll].style.pixelTop = newPosition;
if(ns4) scrollbar.pageToScroll.top = newPosition;
if(ns6) scrollbar.pageToScroll.style.top = newPosition;
}
// ------------------------------------------------
// Mouse event function, enables dragging
function setDrag()
{ scroller.scrolling = true;
scroller.difY = (y - scroller.yStart);
if(ie4) scroller.difY -= scroller.style.pixelTop;
if(ns4) scroller.difY -= scroller.top;
if(ns6) scroller.difY -= parseInt(scroller.style.top);
scroller.difY += scroller.yStart;
}
// ------------------------------------------------
// Mouse event functions, disables dragging
function stopDrag()
{ if(!loaded) return;
scroller.scrolling = false;
}
function mouseUp(e)
{ if(!loaded) return;
scroller.scrolling = false;
}
// ------------------------------------------------
// Mouse event function, mouse positions
function mouseMove(e)
{ if(!loaded) return;
if (ns4) {x=e.pageX; y=e.pageY;}
if (ns6) {x=e.clientX; y=e.clientY;}
if (ie4) {x=event.x; y=event.y;}
if(ie4 && loaded)
{ if(event.button == 0) stopDrag();
}
if(loaded && scroller.scrolling && scrollbar.enabled)
{ if(ie4 || ns6) scroller.style.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart);
if(ns4) scroller.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart);
scroller.checkPos();
return false;
}
}
function fixNSresize()
{ if(pageWidth != window.innerWidth || pageHeight != window.innerHeight)
history.go(0);
}
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
if(ns4)
{ document.captureEvents(Event.MOUSEMOVE||Event.MOUSEUP||Event.MOUSEDOWN);
window.onresize = fixNSresize;
}
// ------------------------------------------------
// Arrow Buttons events, up and down functions
var SCmove = null;
function scrollUp()
{ keyLock = true;
scroller.moving = true;
if(ns6) SCmove = setInterval(moveScroller, 25, (0-arrowSpeed));
else SCmove = setInterval("moveScroller(0-arrowSpeed)",25);
}
function scrollDown()
{ keyLock = true;
scroller.moving = true;
if(ns6) SCmove = setInterval(moveScroller, 25, arrowSpeed);
else SCmove = setInterval("moveScroller(arrowSpeed)",25);
}
function stopScroll()
{ scroller.moving = false;
if(SCmove != null) clearInterval(SCmove);
}
function moveScroller(how)
{ if(scroller.moving && scrollbar.enabled)
{ if(ie4) scroller.style.pixelTop += how;
if(ns4) scroller.top += how;
if(ns6) scroller.style.top = parseInt(scroller.style.top) + how;
scroller.checkPos();
}
}
// ------------------------------------------------
// Clicking in the bar causes the scroll
// element to take a step towards the mouse
function goThere()
{ var where = y - scrollbar.yPos;
if(!scroller.scrolling && !scroller.moving)
{ if(where < ((ie4)? scroller.style.pixelTop:((ns6)? parseInt(scroller.style.top):scroller.top)))
{ if(ie4) scroller.style.pixelTop -= clickStepSize;
if(ns4) scroller.top -= clickStepSize;
if(ns6) scroller.style.top = parseInt(scroller.style.top) - clickStepSize;
}
else
{ if(ie4) scroller.style.pixelTop += clickStepSize;
if(ns4) scroller.top += clickStepSize;
if(ns6) scroller.style.top = parseInt(scroller.style.top) + clickStepSize;
}
scroller.checkPos();
}
}
// ------------------------------------------------
// finds layers within document. Brainjar.
// - http://www.brainjar.com.
function getLayer(name)
{ if (ns4) return findLayer(name, document);
if (ie4) return eval('document.all.' + name);
if (ns6) return document.getElementById(name);
return null;
}
function findLayer(name, doc)
{ var i, layer;
for (i = 0; i < doc.layers.length; i++)
{ layer = doc.layers[i];
if (layer.name == name) return layer;
if (layer.document.layers.length > 0)
{ layer = findLayer(name, layer.document);
if (layer != null) return layer;
}
}
return null;
}
?>