Development of javascript controls-scroll bar controls

Development of javascript controls-scroll bar controls
In the web page, there is a scroll bar. When displaying text content, the original scroll bar is enough. Generally, if we want to implement a list-like control, you can also output all the list data to a complete

Label, and then embed it into a DIV. However, if the data volume reaches thousands of rows, it is completely generated.

/*** Scroll bar control. * created: QZZ * Date: 2014-03-01 */(function (undefined) {nameSpace ("com. ui ");/*** scroll bar control. */com. ui. scrollBar = Extend (com. ui. window, {/*** create function */create: function () {},/*** rendering. */render: function (){}});})();

/*** Create function */create: function () {this. base (); this. className = "com. ui. scrollBar "; this. logInfo ("create"); // The total number of bound details this. scrollCount = 0; // display the number of visible regions this. showCount = 0; // scroll position this. scrollIndex = 0; // The pixel length of each scroll step. this. stepLen = 2; // the shortest length of the drag button. this. dragBoxMinLen = 20; // horizontal and vertical scroll bars this. option. scrollType = this. option. scrollType | "V"; // whether the scroll bar is visible this. visible = true; // button width this. btnWidth = 15; // initialize the width/height attribute 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 ;},

Therefore, a better way is to use virtual display,The so-called virtual display is to store data in an array and then generate only visible DOM elements. For example, if the visible row is 10 rows, then create 10 By refreshing all the data in the 10 rows, the scroll bar is the main link,The above description will be displayed in the list below, and you will understand that we will not describe it in detail here. Next we will go to the topic and develop our scroll bar control.The rolling features we made this time include two buttons, top and bottom, and two buttons to be dragged. Other features are developed according to the rules of the system scroll bar at ordinary times, in the rolling area, you can set the number of scrolling items by setting the number of details. For example, if there are a total of 1000 pieces of data, 50 pieces can be displayed on the page, and the number of scrolling items is-50, this data is used to draw the number of scroll bars. In this way, the scroll bar is used to prepare for subsequent virtual scrolling.First, based on the framework developed earlier in the line, we add the file com. ui. scrollBar. js, which defines com. ui. scrollBar class, inherited from com. ui. window class, as shown belowDefine some basic attributes in the function of creating a scroll bar, such as the type of the scroll bar, the total number of scrolling items, the number of displayed items, the scroll position, the step size of one scroll item, and the shortest length of the drag button.After defining the basic attributes, start to draw the frame of the scroll bar. Here we use For example, the vertical scroll bar generates a three-row and one-column
, The first and third rows are used as the up and down buttons, and the middle is used as the scroll area (horizontal ),Then in the scroll area (top In the second row) to add another two rows and one column

/*** Render. */render: function () {this. base (); // create the scroll bar structure.

Used as the drag button in the middle. The first line draws the same edge as the background, the second line draws the button, and sets the button position by adjusting the Row Height of the first line,After the button is drawn, add the button event and drag the event as follows: If (this. scrollTable = null) {this. scrollTable = this. createElement ("TABLE");} // clear the original row and column. When the structure changes, the row while (this. scrollTable. rows. length> 0) {this. scrollTable. deleteRow (0);} // create a drag button Structure

/*** Refresh Layout */refreshBox: function () {var rw = this. _ getRectWidth (), rh = this. _ getRectHeight () // set the style, length, width, and 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";} // set the style of the scroll area and the style of the drag button. this. setStyle (this. dragLen, "scrollCell"); this. setStyle (this. dragBox, "scrollDrag"); // you can specify the style of the scroll table and the drag table. setStyle (this. scrollTable, "scrollBox"); this. setStyle (this. dragTable, "scrollBox"); // set the width and height of this. scrollTable. style. width = rw + "px"; this. scrollTable. style. height = rh + "px ";},

.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;}

/*** Refresh the scroll bar position with the data rolling data */refresh: function () {// calculate the number of times outside the rolling area var sl = this. scrollCount-this. showCount; // if (sl! = This. tmpCount) {// calculate the total pixel length var slpx = sl * this. stepLen; // calculate the length of the drag box var cenLen = this. option. scrollType = "V "? This. centerRect. offsetHeight: this. centerRect. offsetWidth; var dragBoxLen = cenLen-slpx; // if the calculated drag button is too short, re-calculate the step size to ensure that the button does not shorten if (dragBoxLen <this. dragBoxMinLen) {dragBoxLen = this. dragBoxMinLen; slpx = cenLen-dragBoxLen; this. stepLen = slpx/(this. scrollCount-this. showCount);} else {this. stepLen = 2;} // set the length of the drag button if (this. option. scrollType = "V") {this. dragBox. style. height = (dragBoxLen-2) + "px";} else if (this. option. scrollType = "H") {this. dragBox. style. width = (dragBoxLen-2) + "px";} // current cache quantity this. tmpCount = sl;} // calculates the position of the drag box var len = parseInt (this. scrollIndex * this. stepLen, 10); if (len <0) {len = 0;} else if (len> cenLen-dragBoxLen) {len = cenLen-dragBoxLen} // set the Location value if (this. option. scrollType = "V") {this. dragLen. style. height = len + "px";} else if (this. option. scrollType = "H") {this. dragLen. style. width = len + "px ";}},

/*** Mouse down event */doMouseDown: function (ev) {this. base (ev); // record the position where the original mouse is pressed this. dragX = ev. clientX; this. dragY = ev. clientY; // record the location of the original button, if (this. option. scrollType = "V") {this. dragPosition = this. dragLen. offsetHeight;} else if (this. option. scrollType = "H") {this. dragPosition = this. dragLen. offsetWidth;} // identifies the button status this. mouseDown = true;},/*** trigger event with the mouse */doMouseUp: function (ev) {this. base (ev); // restore the drag Dynamic status this. dragState = false; // cancel the long press effect if (this. setInt! = Null) {clearInterval (this. setInt); this. setInt = null;} // identifies the button status this. mouseDown = false ;},

/*** Move the mouse event */doMouseMove: function (ev) {if (this. dragState) {var len = 0, dragBoxLen = 0, centerLen = 0; // calculates the position of the drag button, if (this. option. scrollType = "V") {dragBoxLen = this. _ domValue (this. dragBox. style. height); centerLen = this. _ domValue (this. centerRect. style. height); len = this. dragPosition + ev. clientY-this. dragY; if (len <0) {len = 0;} else if (len> centerLen-dragBoxLen) {len = centerL En-dragBoxLen;} this. dragLen. style. height = len + "px";} else if (this. option. scrollType = "H") {dragBoxLen = this. _ domValue (this. dragBox. style. width); centerLen = this. _ domValue (this. centerRect. style. width); len = this. dragPosition + ev. clientX-this. dragX; if (len <0) {len = 0;} else if (len> centerLen-dragBoxLen) {len = centerLen-dragBoxLen-2;} this. dragLen. style. width = len +" Px ";} // calculates the detailed quantity position var tmpScrollIndex = this. scrollIndex; if (dragBoxLen <1) {this. scrollIndex = 0;} else if (len> = centerLen-dragBoxLen) {this. scrollIndex = this. scrollCount-this. showCount;} else {this. scrollIndex = parseInt (len/this. stepLen, 10);} // execute the rolling event if (typeof this. onScroll = "function") {try {this. onScroll (this. scrollIndex, this. scrollIndex-tmpScrollIndex);} catch (e) {this. LogInfo ("onScroll Error! "+ E. message );}}}},

/*** Scroll up */scrollPrior: function () {if (this. scrollIndex> 0) {this. scrollIndex --; if (typeof this. onScroll = "function") {this. onScroll (this. scrollIndex,-1);} this. refresh () ;}},/*** scroll down */scrollNext: function () {if (this. scrollIndex <this. scrollCount-this. showCount) {this. scrollIndex ++; if (typeof this. onScroll = "function") {try {this. onScroll (this. scrollIndex, 1);} catch (e ){ This. logInfo ("onScroll Error! "+ E. message) ;}} this. refresh () ;}},/*** scroll up to flip the page */scrollPriorPage: function () {var tmpIndex = this. scrollIndex; this. scrollIndex + = this. showCount; if (this. scrollIndex> this. scrollCount-this. showCount) {this. scrollIndex = this. scrollCount-this. showCount;} if (tmpIndex! = This. scrollIndex) {if (typeof this. onScroll = "function") {try {this. onScroll (this. scrollIndex, this. scrollIndex-tmpIndex);} catch (e) {this. logInfo ("onScroll Error! "+ E. message) ;}} this. refresh () ;}},/*** scroll down to flip pages */scrollNextPage: function () {var tmpIndex = this. scrollIndex; this. scrollIndex-= this. showCount; if (this. scrollIndex <0) {this. scrollIndex = 0;} if (tmpIndex! = This. scrollIndex) {if (typeof this. onScroll = "function") {try {this. onScroll (this. scrollIndex, this. scrollIndex-tmpIndex);} catch (e) {this. logInfo ("onScroll Error! "+ E. message) ;}} this. refresh ();}},

/*** Total number of scroll bars */setScrollCount: function (value) {this. scrollCount = value;},/*** Number of scroll bars displayed */setShowCount: function (value) {if (value> = this. scrollCount) {this. showCount = this. scrollCount; this. dragTable. style. display = "none";} else {this. showCount = value; this. dragTable. style. display = "" ;}},/*** scroll bar to the position */setScrollIndex: function (index) {if (index <0) {index = 0 ;} else if (index> t His. scrollCount-this. showCount) {index = this. scrollCount-this. showCount;} if (this. scrollIndex! = Index) {var tmpIndex = this. scrollIndex; this. scrollIndex = index; if (typeof this. onScroll = "function") {try {this. onScroll (this. scrollIndex, this. scrollIndex-tmpIndex);} catch (e) {this. logInfo ("onScroll Error! "+ E. message );}}}},

/*** Set the height. */setHeight: function (height) {this. base (height); this. refreshBox (); this. refresh () ;},/*** set the width. */setWidth: function (width) {this. base (width); this. refreshBox (); this. refresh ();}

  Test<Script src = "../script/common/init. js" type = "text/javascript"> </script>    Are you sure you want to cancel

/*** Test.html page control class * created: qzz * Date: 2014-05-01 */(function (undefined) {/*** control class */testControllor = Extend (pageControllor, {// initPage: function () {// modify the control attributes on the page and bind the event this. test2.onClick = function () {alert ("OK");} this. test2.setCaption ("OK"); this. test2.setWidth (50); this. test3.onClick = function () {alert ("cancel");} this. test3.setCaption ("cancel"); this. test11.onClick = function () {alert ("quit");} this. test12.setScrollCount (50); this. test12.setShowCount (10); this. test12.setScrollIndex (17); this. test12.refresh (); this. test13.setScrollCount (100); this. test13.setShowCount (10); this. test13.setScrollIndex (17); this. test13.setWidth (400); // this. test13.refresh () ;}}) ;}();/*** create a Page Object and start */thisWindow. onShow = function () {var tc = new testControllor (); tc. initPage ();}

If (this. dragTable = null) {this. dragTable = this. createElement ("TABLE");} // clear the original row and column. When the structure changes, there will be existing rows, while (this. dragTable. rows. length> 0) {this. dragTable. deleteRow (0);} // insert the 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. s CrollTable. 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 and press the event, print the dragState icon, and set the control to focus on this. dragBox. onmousedown = function (ev ){/ /Drag status _ this. dragState = true; _ this. focus = true;} // click the last button to push the event. Here, we handle the effect of long time and use the delayed execution method. // scrollPrior () function, is a function defined later to scroll up a row, 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) ;}}, 50); // setInterval }}, 500); // setTimeout} // click the next button to press the event. The effect of time length is processed here, the method of delayed execution is used. // scrollNext () is a function defined later to scroll down a row. 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} // click the event in the middle area to control down and flip pages, // scrollPriorPage. scrollNextPage is a page flip function defined by the successor. This. centerRect. onmousedown = function (ev) {var ev = ev | event; if (_ this. dragState! = True) {var dlen = 0, clen; // debugger; 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 this to the win container. win. ap PendChild (this. scrollTable); // refresh the scroll bar. this method is a function defined by the successor to refresh the scrolling style and position. This. refreshBox ();},The above is just to draw the structure of the scroll bar and style control is required. The refreshBox function below is used to control the style and position of the scroll bar,The preceding example is used. The com.comstyle.css file is defined as follows:After completing the above structure, we only finished the display effect, because we set the scroll bar to scroll by setting the number of data details, so we need to convert and calculate with the pixel, to set the position of the drag button, we will add a refresh function to refresh the length of the scroll bar, the length and position of the drag button, and add the refresh function, as shown below:Next we will implement the drag event. First, we need to initialize some attributes during the mouse button, and then restore some attributes when the mouse is up. Here I can override doMouseDown, the doMouseUp event is implemented as follows:The following is a mouse movement event. When dragState is set to true, the distance between the start position and current position of the cursor is calculated, and the scrollIndex is calculated, the event bound to the rolling event onScroll is executed. As the rolling event is an external event, exception capture is performed here.Next we will define the upper and lower detail functions used above, and the upper and lower pages functions, as shown below:Then, define the setting functions of several attributes as follows:Finally, set the height and width function,At this point, all our controls have been compiled. From the above point of view, it is a bit long, but this length is definitely worth it, because the subsequent controls will greatly reduce the implementation difficulty. Here there is a disadvantage, the image is not added to the up or down buttons. However, if you only need to modify the Style File, add the image,Of course, if we write the control, we need to test it. Below we will write a few lines of code to test the use of the control,First, add the labels of the two scroll bar controls in the test.html file, as shown in the following two controls with id = test12/13:Then we add some code to the page controller,To view the effect, open the test.html page,Download source code packagePlease pay attention to my next part. List controls for javascript control development (1)