• Home
• com.github.venkatramanm.swf-all
• swf-plugin-bootstrap
• 1.0
• source code
• index.html

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

scripts.node_modules.bootstrap-input-spinner.index.html Maven / Gradle / Ivy

    
    
    
    
    
    



    
bootstrap-input-spinner
    

        A Bootstrap 4 / jQuery plugin to create input spinner elements for number input, by
        shaack.com engineering.
    
    

        License: MIT
    
    
Features
    
The Bootstrap 4 InputSpinner
    

        

            is mobile friendly and responsive,
        
        

            has internationalized number formatting,
        
        

            automatically changes the value when holding a button,
        
        

            allows setting a prefix or suffix text in the input,
        
        

            handles val() like the native element,
        
        

            dynamically handles changing attribute values like disabled oder
            class,
        
        

            dispatches change and input events on value
            change like the native element,
        
        

            needs no extra css, just Bootstrap 4.
        
    
    
Usage
    

        This script enables the InputSpinner for all inputs with type='number'.
        No extra css needed, just Bootstrap 4.
    
    
<script src="./src/bootstrap-input-spinner.js"></script>
<script>
    $("input[type='number']").inputSpinner()
</script>
    
Repository, documentation and npm package
    
Find the source code, more documentation and the npm package at
    

        
GitHub repository and documentation
        
npm package
    
    
Examples
    
The following contains examples of the InputSpinner's main features

    
No attributes
    

        
    
    
<input type="number"/>


    
Simple Integer
    

        
    
    
<input type="number" value="500" min="0" max="1000" step="10"/>
    
Floating Point
    

        
    
    
<input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>

    
Handle change and input events and
        read the value from JavaScript
        with val()
    

        Type in a number to see the difference between change and
        input events.
        
    
    

        Value on input: 

        Value on change: 
    
    
var $changedInput = $("#changedInput")
var $valueOnInput = $("#valueOnInput")
var $valueOnChange = $("#valueOnChange")
$changedInput.on("input", function (event) {
    $valueOnInput.html($changedInput.val())
})
$changedInput.on("change", function (event) {
    $valueOnChange.html($changedInput.val())
})
    
Programmatic changing the value with val()
    

        Net
        
    
    

        Gross (+19%)
        
    
    
$inputNet.on("change", function (event) {
    $inputGross.val($inputNet.val() * 1.19)
})
$inputGross.on("change", function (event) {
    $inputNet.val($inputGross.val() / 1.19)
})
    
Attributes placeholder and required
    

        

            
        
        
<input placeholder="Enter a number" required type="number" value="" min="-100" max="100"/>
        
    

    
Attribute disabled, dynamically changing
    
Attributes are handled dynamically.
    

        

            
        
        

            
            Disabled
        
        
<input id="inputDisabled" disabled type="number" value="50"/>
<div class="form-check">
    <input type="checkbox" checked class="form-check-input" id="disabledSwitch"/>
    <label class="form-check-label" for="disabledSwitch">Disabled</label>
</div>
<script>
    var $inputDisabled = $("#inputDisabled")
    var $disabledSwitch = $("#disabledSwitch")
    $disabledSwitch.on("change", function () {
        $inputDisabled.prop("disabled", $(this).prop("checked"))
    })
</script>
    

    
buttonsOnly mode (New!)
    

        In buttonsOnly mode no direct text input is allowed, the text-input
        gets the attribute readonly. But the plus and minus buttons still allow to change the value.
    
    

        
    
    
$(".buttons-only").inputSpinner({buttonsOnly: true})

    
Dynamically handling of the class attribute
    

        
    
    

        CSS Class
        
        Try to change the class to "is-invalid" or "text-info".
    

    
<input id="inputChangeClass" class="is-valid" type="number" value="50"/>
<label for="classInput">CSS Class</label>
<input id="classInput" type="text" class="form-control" value="is-valid"/>
<script>
    var $inputChangeClass = $("#inputChangeClass")
    var $classInput = $("#classInput")
    $classInput.on("input", function() {
        $inputChangeClass.prop("class", this.value);
    })
</script>

    
Sizing
    
Sizing works out of the box. Just set the original inputs class to form-control-sm or
        form-control-lg, and
        the resulting group gets the class input-group-sm or input-group-lg.
    

        Small
        
    
    
<input class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
    

        Large
        
    
    
<input class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>


    
Dynamically handling of min, max,
        step and data-decimals
    

        

            

                min
                
            
        
        

            

                max
                
            
        
        

            

                step
                
            
        
        

            

                data-decimals
                
            
        
    
    

        Try here
        
    
    
var $minInput = $("#minInput")
var $maxInput = $("#maxInput")
var $stepInput = $("#stepInput")
var $dataDecimalsInput = $("#dataDecimalsInput")
var $minMaxTester = $("#minMaxTester")
$minInput.on("change", function (event) {
    $minMaxTester.attr("min", $minInput.val())
})
$maxInput.on("change", function (event) {
    $minMaxTester.attr("max", $maxInput.val())
})
$stepInput.on("change", function (event) {
    $minMaxTester.attr("step", $stepInput.val())
})
$dataDecimalsInput.on("change", function (event) {
    $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
})



    
Prefix and Suffix
    

        Prefix
        
    
    
<input data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number" />
    

        Suffix
        
    
    
<input data-suffix="°C" value="50" min="0" max="100" type="number" />


    
Looping the value
    
This input starts from 0 when reaching 360.
    

        
    
    
<input step="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/>
    
"Loop" the value between 0 and 360 with the change event in JavaScript.
    
var $inputLoop = $("#inputLoop")
$inputLoop.on("change", function (event) {
    var value = $inputLoop.val()
    value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
    $inputLoop.val(value)
})

    
Styling with templates (New!)
    
With the new templating feature, you can almost do anything, when it comes to layout.
    
How about... buttons right
    

    
    
    

    This is the template for "buttons right":
    
    
<div class="input-group ${groupClass}">
<div class="input-group-prepend"></div>
<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>
<div class="input-group-append">
<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass}" type="button">${decrementButton}</button>
<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass}" type="button">${incrementButton}</button>
</div></div>
    
You can... or must use the following variables in your template:
    

        
${groupClass}
        
${textAlign}
        
${buttonsWidth}
        
${buttonsClass}
        
${decrementButton}
        
${incrementButton}
    
    
Provide the template as configuration parameter:
    
$(element).inputSpinner({template: '<div class...'})
    
Destroying the spinner
    
To Remove the InputSpinner and show the original input element, use
    
$(element).inputSpinner("destroy")
    

        Label `for` switches dynamically:
        
    
    destroy
    re-create

    

        
        

            
More Bootstrap 4 Components (from shaack.com)
            You may want to check out our further Bootstrap 4 extensions,
                bootstrap-show-modal and
                bootstrap-detect-breakpoint.
        
        
    
    
If you find bugs or have suggestions, you may write an
        issue.