numput

JQuery Plugin

by Raul Bojalil

HTML

<h4>Currency field:</h4>
<input id="currency" data-type="currency" type="text" value="123"/>
<button class="getvalue" data-input="currency">GetValue</button>
<button class="clear" data-input="currency">Clear</button>
<button class="reset" data-input="currency">Reset</button>
<button class="setValue" data-input="currency">Set Value</button>
<button class="show" data-input="currency">Show</button>
<button class="hide" data-input="currency">Hide</button>
<h4>Percentage field:</h4>
<input id="percentage" data-type="percentage" type="text"/>
<button class="getvalue" data-input="percentage">GetValue</button>
<button class="clear" data-input="percentage">Clear</button>
<button class="reset" data-input="percentage">Reset</button>
<button class="setValue" data-input="percentage">Set Value</button>
<button class="show" data-input="percentage">Show</button>
<button class="hide" data-input="percentage">Hide</button>
<h4>Range:</h4>
<input id="range" type="text"/>
<button class="getvalue" data-input="range">GetValue</button>
<button class="clear" data-input="range">Clear</button>
<button class="reset" data-input="range">Reset</button>
<button class="setValue" data-input="range">Set Value</button>
<button class="show" data-input="range">Show</button>
<button class="hide" data-input="range">Hide</button>

CSS

.ui-numput
{
   display: inline-block;
}

.ui-numput ui-numput-disabled
{
   background-color:#e9e9e9; !important
}

.ui-numput div.ui-numput-inputs
{
    display:block; 
    position:relative;
    border:1px  #35a0d4 solid;
    background-color:rgba(255,255,255,1);
    vertical-align:middle;
    font-family:Century Gothic;
    font-family:Century-Gothic-anviants;
    padding-right:2px;
    padding-left:14px;
}

.ui-numput div.ui-numput-inputs input[type="text"]
{
    padding:0px;
    padding-left:3px;
    padding-right:3px; 
    font-family:Century Gothic;
    font-family:Century-Gothic-anviants;
    border-style: none;
    background-color:#e9e9e9;
    margin:1px;
    margin-top:3px;
    margin-bottom:3px;
    vertical-align:bottom;
    height:23px;    
}

.ui-numput input:focus
{
    outline: 0;
}

.ui-numput input.ui-numput-integer-input
{
    width: 10px;
    margin:0px;
    color: Black;
    font-size: 18px;
}

.ui-numput input.ui-numput-mills
{
    width: 10px;
    color: Red;
    font-size: 24px;
}

.ui-numput input.ui-numput-thous
{
    width: 10px;
    color: Blue;
    font-size: 18px;
}

.ui-numput input.ui-numput-hunds
{
    font-size: 14px;
    color: Black;
}

.ui-numput input.ui-numput-mantisa-input
{
    font-size: 12px;
    width: 8px;
    border-style: none;
    color: Green;
    text-align: left;
    margin:0px;
}
.ui-numput span.ui-numput-prefix
{
    display:block;
    color:Black;  
    position:absolute;
    left:0px;
    top:2px;
    font-size:20px;    
}
.ui-numput span.ui-numput-groupseparator
{
    display:inline-block;
    color:Black;
    margin:0px;
    margin-bottom:5px;
    font-size:large;
}
.ui-numput span.ui-numput-decimalseparator
{
    display:inline-block;
    color:Black;
    margin:0px;
    margin-bottom:5px;
    font-size:large;
}

JavaScript

(function($) {
 
 
    var methods = {
        init : function(options) {
            
			var data = {
				opts: $.extend({}, $.fn.numput.defaults, options),
				_isNull: false,
				_isEnabled: true,
				_isCurrency: false,
				$helpTextContainer: $('<div class="ui-numput-helptext"></div>'),
				$inputsContainer: $('<div class="ui-numput-inputs"></div>'),
				integerInputs: [],
				mantisaInputs: [],
				$container: $('<div class="ui-numput"></div>')
				
			}
            
          	this.attr("data-origval", this.val());
            this.css("opacity", "0");
            this.css("position", "absolute");
            this.css("z-index", "-999");



            this.before(data.$container);
            data.$container.append(this);
            
            if(this.attr("data-type") == "currency")
            {
                data._isCurrency = true;
                data.opts.maxDecimals = 2;
                data.opts.prefixCharacter = data.opts.currencySymbol;
            }
            else if(this.attr("data-type") == "percentage")
            {
                data.opts.maxDecimals = 0;
                data.opts.prefixCharacter = data.opts.percentSymbol;
            }
            else if(this.attr("data-type") == "integer")
                data.opts.maxDecimals = 0;
            

            if(this.attr("data-number-max-decimals"))
                data.opts.maxDecimals = parseFloat(this.attr("data-number-max-decimals"));
        
            if(this.attr("data-val-range-min"))
                data.opts.minRange = parseFloat(this.attr("data-val-range-min"));
            
            if(this.attr("data-val-range-max"))
                data.opts.maxRange = parseFloat(this.attr("data-val-range-max"));
           
            this.change(function() {
               
                _setValue.bind(this)(this.val());
                this.val(getValue.bind(this)());
                
            }.bind(this));
            
            this.focus(data, function(e) {
    ...