CutePsWheeljavascriptlibary controls the input text box as a js library controlled by a scroll wheel _ javascript tip

Source: Internet
Author: User
Implementation is similar to the effect of entering text numbers on the Photoshop control panel, so the name is PsWheel. It is used to control the input numeric text box to realize the sliding up and down of the scroll wheel to change the value. It supports positive integers and decimals. Introduction

Implementation is similar to the effect of entering text numbers on the Photoshop control panel, so the name is PsWheel. It is used to control the input numeric text box to realize the sliding up and down of the scroll wheel to change the value. It supports positive integers and decimals.
Compatible with IE/Firefox/Opera/Safari/Chrom
You can define the interval between scrolling changes. integers and floating-point numbers are supported.
Double-click Restore Initial Value
Only 3.92 K, 2.67 K after compression
Code

The Code is as follows:


/*
* CutePsWheel JS
* Description: A js liabary which control the text type of input box can plus or minus value like Photoshop
* Author: walkingp
* Site: http://www.51obj.cn/
* E-mail: walkingp@126.com
* Last Modified: 2010-2-5
*/
// Initial the wheel scroll event
Var _ orientValue = []; // orient value
Var _ interval = [];
Var _ length = [];
Function InitScrollFunc (){
Var eles = GetObj ();
For (var I = 0; I If (document. addEventListener ){
(Function (I) {eles [I]. addEventListener ('domainscroll', function (e) {e. preventDefault (); e. stopPropagation (); var direct = e. detail <0? 1:-1; ScrollText (eles [I], direct) ;}, false) ;}) (I );
Eles [I]. addEventListener ('dblclick', RestoreOrientValue, false );
Eles [I]. addEventListener ('blur', RemoveScrollFunc, false );
// Eles [I]. addEventListener ('mouseover', SetFocus, false );
} // W3C/ila ILA
(Function (I) {eles [I]. onmousewheel = function () {ScrollFunc (event, eles [I]) ;}}) (I); // IE/Opera/Chrome/Safari
(Function (I) {eles [I]. ondblclick = function () {RestoreOrientValue (eles [I]) ;}}) (I );
(Function (I) {eles [I]. onblur = function () {RemoveScrollFunc (eles [I]) ;;}}) (I); // Remove the wheel scroll event
(Function (I) {eles [I]. onmouseover = function () {SetFocus (eles [I]) ;}}) (I );
/* Initial the value array */
If (eles [I]. value! = ""){
_ OrientValue. push (eles [I]. value );
} Else {
_ OrientValue. push (0 );
}
If (eles [I]. getAttribute ("interval ")){
_ Interval. push (parseFloat (eles [I]. getAttribute ("interval ")));
If (eles [I]. getAttribute ("interval"). toString (). indexOf (".")> 0 ){
Var _ length = parseInt (eles [I]. getAttribute ("interval "). toString (). length)-parseInt (eles [I]. getAttribute ("interval "). toString (). indexOf (". ")-1;
_ Length. push (_ length); // get the length follow the decimal point
} Else {
_ Length. push (0 );
}
} Else {
_ Interval. push (1 );
_ Length. push (0 );
}
}
}
/* Set object focus */
Function SetFocus (obj ){
Obj. focus ();
Obj. select ();
}
/* Remove the wheel scroll event */
Function RemoveScrollFunc (obj ){
If (document. removeEventListener ){
Obj. removeEventListener ('dommousescroll', ScrollFunc, false );
Obj. removeEventListener ('dblclick', RestoreOrientValue, false );
} Else if (document. detachEvent ){
Obj. detachEvent ('onmousewheel ', ScrollFunc );
Obj. detachEvent ('ondblclick', RestoreOrientValue );
}
}
/* Restore the text box's orient value when double click event trigger */
Function RestoreOrientValue (obj ){
Var eles = GetObj ();
For (var I = 0; I If (obj = eles [I]) {
Obj. value = _ orientValue [I];
Obj. select ();
}
}
}
// Core function
Function ScrollFunc () {// for HTML DOM
Var direct = 0;
Var e = arguments [0] | window. event;
If (window. event ){
Window. event. returnValue = false;
Window. event. cancelBubble = true; // Stop event bubble
}
If (e. wheelDelta ){
Direct = e. wheelDelta> 0? 1:-1;
}
ScrollText (arguments [1], direct );
}
// Reference by ScrollFunc
Function ScrollText (obj, direct ){
Obj. focus ();
Var _ value = 0;
If (obj. value! = ""){
_ Value = parseFloat (obj. value );
}
Var eles = GetObj ();
For (var I = 0; I If (obj = eles [I]) {
If (direct> 0 ){
_ Value + = _ interval [I];
} Else {
_ Value-= _ interval [I];
}
Obj. value = _ value. toFixed (_ length [I]); // calulcate the rounding result
Obj. select (); // set select status
}
}
}
// Referenced function, only get the object which has the 'rel 'attribute
Function GetObj (){
Var objs = document. getElementsByTagName ('input ');
Var elements = [];
For (var I = 0; I If (objs [I]. type = 'text' & objs [I]. getAttribute ('rel ') = 'wheel '){
Elements. push (objs [I]);
}
}
Return elements;
}
// Add the WheelScroll function
(Function AddLoadEvent (func ){
Var _ oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
_ Oldonload ();
Func ();
}
}
}) (InitScrollFunc );




Resources
Click Preview http://demo.jb51.net/js/cutePSWheel/demo.html
Download Code
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.