jQuery UI & Spinner: Basic spinner

This entry is part 1 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Default functionality

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            var spinner = $('#spinner').spinner();

            $('#disable').click(function () {
                if (spinner.spinner('option', 'disabled')) {
                    spinner.spinner('enable');
                } else {
                    spinner.spinner('disable');
                }
            });
            $('#destroy').click(function () {
                if (spinner.data('ui-spinner')) {
                    spinner.spinner('destroy');
                } else {
                    spinner.spinner();
                }
            });
            $('#getvalue').click(function () {
                alert(spinner.spinner('value'));
            });
            $('#setvalue').click(function () {
                spinner.spinner('value', 5);
            });

            $('button').button();
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Select a value:</label>
    <input id='spinner' name='value'>
</p>

<p>
    <button id='disable'>Toggle disable/enable</button>
    <button id='destroy'>Toggle widget</button>
</p>

<p>
    <button id='getvalue'>Get value</button>
    <button id='setvalue'>Set value to 5</button>
</p>

</body>
</html>
Try The Code

jQuery UI & Spinner: Time

This entry is part 2 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Time

A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options.

Cursor up/down spins minutes, page up/down spins hours.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Time</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $.widget('ui.timespinner', $.ui.spinner, {
            options: {
                // seconds
                step: 60 * 1000,
                // hours
                page: 60
            },

            _parse: function (value) {
                if (typeof value === 'string') {
                    // already a timestamp
                    if (Number(value) == value) {
                        return Number(value);
                    }
                    return +Globalize.parseDate(value);
                }
                return value;
            },

            _format: function (value) {
                return Globalize.format(new Date(value), 't');
            }
        });

        $(function () {
            $('#spinner').timespinner();

            $('#culture').change(function () {
                var current = $('#spinner').timespinner('value');
                Globalize.culture($(this).val());
                $('#spinner').timespinner('value', current);
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Time spinner:</label>
    <input id='spinner' name='spinner' value='08:30 PM'>
</p>

<p>
    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>
    </select>
</p>

</body>
</html>
Try The Code

jQuery UI & Spinner: Currency

This entry is part 3 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Currency

Example of a donation form, with currency selection and amount spinner.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Currency</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.ja-JP.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#currency').change(function () {
                $('#spinner').spinner('option', 'culture', $(this).val());
            });

            $('#spinner').spinner({
                min: 5,
                max: 2500,
                step: 25,
                start: 1000,
                numberFormat: 'C'
            });
        });
    </script>
</head>
<body>

<p>
    <label for='currency'>Currency to donate</label>
    <select id='currency' name='currency'>
        <option value='en-US'>US $</option>
        <option value='de-DE'>EUR €</option>
        <option value='ja-JP'>YEN ¥</option>
    </select>
</p>
<p>
    <label for='spinner'>Amount to donate:</label>
    <input id='spinner' name='spinner' value='5'>
</p>

</body>
</html>
Try The Code

jQuery UI & Spinner: Overflow

This entry is part 4 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Overflow

Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it’ll overflow to -10, and the other way round.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Overflow</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#spinner').spinner({
                spin: function (event, ui) {
                    if (ui.value > 10) {
                        $(this).spinner('value', -10);
                        return false;
                    } else if (ui.value < -10) {
                        $(this).spinner('value', 10);
                        return false;
                    }
                }
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Select a value:</label>
    <input id='spinner' name='value'>
</p>

</body>
</html>

Try The Code

jQuery UI & Spinner: Decimal points

This entry is part 5 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Decimal

Example of a decimal spinner. Step is set to 0.01. 
The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Decimal</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.ja-JP.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#spinner').spinner({
                step: 0.01,
                numberFormat: 'n'
            });

            $('#culture').change(function () {
                var current = $('#spinner').spinner('value');
                Globalize.culture($(this).val());
                $('#spinner').spinner('value', current);
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Decimal spinner:</label>
    <input id='spinner' name='spinner' value='5.06'>
</p>

<p>
    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>
        <option value='ja-JP'>Japanese</option>
    </select>
</p>

</body>
</html>
Try The Code