numericstepper.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.02.15#
  ---
  use list:
  > global.lib.js
  > css.lib.js
  > node.lib.js
  > events.lib.js
  ---
  数值范围选取
  ---
  包含样式：
  <link rel="stylesheet" href="css/numericstepper.lib.css" type="text/css" />
*/

function NumericStepper () {
    this.container = null;
    this.textField = null;
    this.upArrow   = null;
    this.downArrow = null;

    // min number
    this.minimum = 0;
    // max number
    this.maximum = 10;
    // number step
    this.stepSize = 1;
    // current number
    this.value = 1;

    this.css = {
        numericstepper : 'numeric-stepper',
        container_in : 'container-in',
        textfield : 'textfield',
        // up
        arrow : 'arrow',
        uparrow : 'uparrow',
        uparrow_up : 'uparrow-up',
        uparrow_down : 'uparrow-down',
        uparrow_over : 'uparrow-over',
        uparrow_disabled : 'uparrow-disabled',
        // down
        downarrow : 'downarrow',
        downarrow_up : 'downarrow-up',
        downarrow_down : 'downarrow-down',
        downarrow_over : 'downarrow-over',
        downarrow_disabled : 'downarrow-disabled'
    };
}

NumericStepper.prototype.Init = function () {

};

NumericStepper.prototype.Create = function () {
    var self = this;

    var container = this.container = oNode.CreateNode('div');
    CSS.AddClass(container, this.css.numericstepper);

    var containerIn = oNode.CreateNode('div');
    oNode.AddNode(containerIn, container);
    CSS.AddClass(containerIn, this.css.container_in);

    // text field
    var textField = this.textField = oNode.CreateNode('input');
    oNode.AddNode(textField, containerIn);
    CSS.AddClass(textField, this.css.textfield);
    textField.autoComplete = 'off';
    textField.value = this.value;
    Events.AttachEvent(textField, 'change', function () {
        self.value = parseInt(textField.value);
        self._Change();
    });

    // up arrow
    var upArrow = this.upArrow = oNode.CreateNode('div');
    oNode.AddNode(upArrow, containerIn);
    CSS.AddClass(upArrow, this.css.arrow, this.css.uparrow, this.css.uparrow_up);
    Events.AttachEvent(upArrow, 'click', function () {
        self.textField.focus();

        if (parseInt(self.value) + 1 > self.maximum) return;
        self.textField.value = ++self.value;

        if (self.value == self.maximum && !CSS.HasClass(upArrow, self.css.uparrow_disabled))
            CSS.ReplaceClass(upArrow, self.css.uparrow_up, self.css.uparrow_disabled);

        if (CSS.HasClass(downArrow, self.css.downarrow_disabled))
            CSS.ReplaceClass(downArrow, self.css.downarrow_disabled, self.css.downarrow_up);

        self._Change();
    });
    Events.AttachEvent(upArrow, 'mouseover', function () {
        CSS.ReplaceClass(upArrow, self.css.uparrow_up, self.css.uparrow_over);
    });
    Events.AttachEvent(upArrow, 'mouseout', function () {
        CSS.ReplaceClass(upArrow, self.css.uparrow_over, self.css.uparrow_up);
    });
    Events.AttachEvent(upArrow, 'mousedown', function () {
        CSS.ReplaceClass(upArrow, self.css.uparrow_over, self.css.uparrow_down);
    });
    Events.AttachEvent(upArrow, 'mouseup', function () {
        CSS.ReplaceClass(upArrow, self.css.uparrow_down, self.css.uparrow_over);
    });

    // down arrow
    var downArrow = this.downArrow = oNode.CreateNode('div');
    oNode.AddNode(downArrow, containerIn);
    CSS.AddClass(downArrow, this.css.arrow, this.css.downarrow, this.css.downarrow_up);
    Events.AttachEvent(downArrow, 'click', function () {
        self.textField.focus();

        if (self.value - 1 < self.minimum) return;
        self.textField.value = --self.value;

        if (CSS.HasClass(upArrow, self.css.uparrow_disabled))
            CSS.ReplaceClass(upArrow, self.css.uparrow_disabled, self.css.uparrow_up);

        if (self.value == self.minimum && !CSS.HasClass(downArrow, self.css.downarrow_disabled))
            CSS.ReplaceClass(downArrow, self.css.downarrow_up, self.css.downarrow_disabled);

        self._Change();
    });
    Events.AttachEvent(downArrow, 'mouseover', function () {
        CSS.ReplaceClass(downArrow, self.css.downarrow_up, self.css.downarrow_over);
    });
    Events.AttachEvent(downArrow, 'mouseout', function () {
        CSS.ReplaceClass(downArrow, self.css.downarrow_over, self.css.downarrow_up);
    });
    Events.AttachEvent(downArrow, 'mousedown', function () {
        CSS.ReplaceClass(downArrow, self.css.downarrow_over, self.css.downarrow_down);
    });
    Events.AttachEvent(downArrow, 'mouseup', function () {
        CSS.ReplaceClass(downArrow, self.css.downarrow_down, self.css.downarrow_over);
    });

    return container;
};

NumericStepper.prototype._Change = function () {
    this.Change();
};

NumericStepper.prototype.Change = function () {
    //alert(this.value);
};