The scrollbar control developed by the JavaScript control

First, based on the framework of the first few development of the line, we add the file com.ui.scrollBar.js under directory component\ui\, define the Com.ui.scrollBar class in the file, inherit the Com.ui.window class, as follows
/*** scroll bar control. * Created: qzz* Date: 2014-03-01*/(function (undefined) {nameSpace ("Com.ui");/*** scroll bar control. = */com.ui.scrollbar ( Com.ui.window, {/*** create function */create:function () {},/*** render. */render:function () {}});}) ();
Define some basic properties in the ScrollBar's creation function, such as scroll bar type, total number of scrolls, number of displays, scroll position, step of scrolling one and shortest length of drag button, etc.
/*** Create function */create:function () {this.base (); this.classname = "Com.ui.scrollBar"; This.loginfo ("create");// Total number of binding details This.scrollcount = 0;//display area visible Quantity This.showcount = 0;//scroll Position this.scrollindex = 0;//Scroll pixel length per step This.steplen = 2;// Drag button Minimum Length This.dragboxminlen = 20;//horizontal, longitudinal scrollbar this.option.scrollType = This.option.scrollType | | "V";//whether the scrollbar is visible this.visible = true;//button Width this.btnwidth = 15;//Initialize Wide-height property if (this.option.scrollType = = "V") { This.option.width = This.option.width | | 16;this.option.height = This.option.height | | 100;} else if (This.option.scrollType = = "H") {this.option.width = This.option.width | | 100;this.option.height = This.option.height | | 16;} This.dragstate = false;},
After defining the basic properties, we begin to draw the frame of the scroll bar, which we use to implement, such as the vertical scroll bar, the first row and the third row are used as the top and bottom buttons, the middle is used as the scrolling area,
Then in the scrolling area (the second row above) and add a two rows and a column, as the middle drag button, the first row, draw the same edge as the background, the second line is drawn as a button, by adjusting the row height of the first row to set the position of the button,
After drawing is complete, add the button event, and drag the event as follows:
/*** render. */render:function () {this.base ();//create scroll bar structure if (this.scrolltable = = null) {this.scrolltable = This.createelement ("TABLE"); Clear the original row and column, when the structure changes, there will be existing lines while (This.scrollTable.rows.length > 0) {this.scrollTable.deleteRow (0);} Create a drag button structure if (this.dragtable = = null) {this.dragtable = This.createelement ("TABLE");} Clear the original row, the structure changes, there will be existing rows, while (This.dragTable.rows.length > 0) {this.dragTable.deleteRow (0);} Insert row and column if (This.option.scrollType = = "V" && this.scrollTable.rows.length! = 3) {this.priorbtn = This.scrollTable.insertRow (0). InsertCell (0); this.centerrect = This.scrollTable.insertRow (1). InsertCell (0); THIS.NEXTBTN = This.scrollTable.insertRow (2). InsertCell (0); This.draglen = This.dragTable.insertRow (0). InsertCell (0 ); This.dragbox = This.dragTable.insertRow (1). InsertCell (0); This.centerRect.appendChild (this.dragtable);} else if (This.option.scrollType = = "H" && this.scrollTable.rows.length! = 1) {var tr = This.scrollTable.insertRow ( 0); this.priorbtn = Tr.insertcell (0); this.centErrect = Tr.insertcell (1); this.nextbtn = Tr.insertcell (2); var tr1 = This.dragTable.insertRow (0); This.draglen = Tr1.insertcell (0); this.dragbox = Tr1.insertcell (1); This.centerRect.appendChild (this.dragtable);} var _this = this;//Drag the box mouse down event and print the flag dragstate, set the control to focus This.dragBox.onmousedown = function (EV) {//drag state _this.dragstate = True;_this.focus = true;} The previous button mouse down event, which handles long and punctual effects, takes the form of deferred execution, the//scrollprior () function, which is a subsequent definition of the upward scrolling line of the function, this.setint = NULL; This.priorBtn.onmousedown = function (EV) {_this.scrollprior (); _this.mousedown = True;settimeout (function () {if (_ This.mousedown) {_this.setint = SetInterval (function () {_this.scrollprior (); if (_this.scrollindex = = _ This.scrollcount-_this.showcount) {clearinterval (_this.setint);}}, +);//setinterval}}, 500); settimeout}//Next button mouse down event, which handles long and punctual effects, takes the form of deferred execution, the//scrollnext () function, which is a subsequent definition of a downward scrolling line of functions, This.nextBtn.onmousedown = function (EV) {_this.scrollnext (); _this.mousedown = True;settimeout (function () {if (_this.mousedown) {_this.setint = SetInterval (function () {_THIS.SCrollnext (); if (_this.scrollindex = = _this.scrollcount-_this.showcount) {clearinterval (_this.setint);};}, 50); SetInterval}}, 500); settimeout}//Middle Area Mouse down event, control down, page UP,//scrollpriorpage, scrollnextpage is the subsequent definition of the paging function. This.centerRect.onmousedown = function (EV) {var ev = EV | | event;if (_this.dragstate! = True) {var Dlen = 0, Clen;//debugge R;var rect = This.getboundingclientrect (); if (_this.option.scrolltype = = "V") {Dlen = _this.draglen.offsetheight;clen = Ev.clienty-rect.top;} else if (_this.option.scrolltype = = "H") {Dlen = _this.draglen.offsetwidth;clen = Ev.clientx-rect.left;} if (Clen > Dlen) {_this.scrollpriorpage ();} else {_this.scrollnextpage ();}}} Add to the Win container this.win.appendChild (this.scrolltable);//Refresh the scroll bar box, which is a successor defined function that refreshes the scrolling style and position. This.refreshbox ();},
Above we just draw the structure of the scroll bar, need to do style control, the bottom Refreshbox function is used to control the style and position of the scroll bar,
/*** Refresh Layout */refreshbox:function () {var rw = this._getrectwidth (), RH = This._getrectheight ()//Set button style and length, width, if ( This.option.scrollType = = "V") {this.priorBtn.style.height = this.btnwidth-1 + "px"; This.setstyle (This.priorbtn, " Scrollup "), This.centerRect.style.height = (rh-2 * this.btnwidth) +" px "; This.setstyle (This.centerrect," Scrollcell "); This.nextBtn.style.height = this.btnwidth-1 + "px"; This.setstyle (this.nextbtn, "Scrolldown"); This.dragTable.style.width = (rw-1) + "px"; this.dragLen.style.height = "0px"; this.dragBox.style.height = This.btnwidth + "px";} else if (This.option.scrollType = = "H") {this.priorBtn.style.width = this.btnwidth + "px"; This.setstyle (This.priorbtn, " Scrollprior "); this.centerRect.style.width = (Rw-2 * this.btnwidth) +" px "; This.setstyle (This.centerrect," Scrollcell " ); this.nextBtn.style.width = this.btnwidth + "px"; This.setstyle (this.nextbtn, "Scrollnext"); This.dragTable.style.height = RH + "px"; this.dragLen.style.width = "0px"; this.dragBox.style.width =This.btnwidth + "px";} Sets the style of the scrolling area, and the style of the drag button, This.setstyle (This.draglen, "Scrollcell"); This.setstyle (This.dragbox, "Scrolldrag");// Set the style of scrolling table and drag table, This.setstyle (this.scrolltable, "Scrollbox"), This.setstyle (this.dragtable, "Scrollbox");//Set width, High this.scrollTable.style.width = rw + "px"; this.scrollTable.style.height = RH + "px";},
This uses several styles, which are defined in the Com.comStyle.css file as follows:
. scrollbox {border-collapse:collapse;border-spacing:0px;padding:0px;}. Scrollcell {padding:0px;vertical-align:top;background-color: #eeeeee;}. Scrollup {padding:0px;background-color: #ddeeff; border-bottom:1px solid #C3D2E6;}. Scrolldown {padding:0px;background-color: #ddeeff; border-top:1px solid #C3D2E6;}. Scrollprior {padding:0px;background-color: #ddeeff; border-right:1px solid #C3D2E6;}. Scrollnext {padding:0px;background-color: #ddeeff; border-left:1px solid #C3D2E6;}. Scrolldrag {padding:0px;background-color: #ddeeff; border:1px solid #C3D2E6;}
After completing the above structure, just finished the display effect, because our scroll bar is set by setting the number of data to scroll, so we need to convert the pixel with the calculation to set the position of the drag button, below we add a refresh function, to refresh the length of the scrollbar, drag the length and position of the button, Add the Refresh function as follows:
/*** scrolling data, refresh the scrollbar position */refresh:function () {//Calculate the number outside the scrolling area var sl = this.scrollcount-this.showcount;//has changed before recalculating if (sl! = This.tmpcount) {//Calculate total pixel length var slpx = sl * this.steplen;//Calculate drag frame length var Cenlen = This.option.scrollType = = "V"? This.centerrect . Offsetheight:this.centerrect.offsetwidth;var Dragboxlen = cenlen-slpx;//If the calculated drag button is too short, recalculate the step size to ensure that the button no longer shortens the IF ( Dragboxlen cenlen-dragboxlen) {len = cenlen-dragboxlen}//set Position value if (This.option.scrollType = = "V") {this.draglen.style.h eight = len + "px";} else if (This.option.scrollType = = "H") {this.dragLen.style.width = len + "px";}},

The scrollbar control developed by the JavaScript control