简体   繁体   中英

Fire function within jquery plugin?

I have dynamically created increment and decrement buttons for certain <input> html elements (specifically for numeric inputs), however I cannot for the life of me how to figure out how to bind an action through the plugin function.

I want to do it specifically this way as these arrows will be used on many different types of forms that minus and add values (eg %, money etc.) which affect certain visual elements.

The function looks around the lines of:

(function ($) {
    $.fn.addIncrementArrows = function (min, max, interval, fastInterval, event) {

        var input = this;

        /*Other building things go here*/

        var timeoutDownArrow;
        var intervalDownArrow;
        //clicking button down for 1 second fires '-' actions
        $(this).parent().children(".downarrow").mousedown(function () {
            timeoutDownArrow = setTimeout(function () {
                intervalDownArrow = setInterval(function () {
                    changeValue(-fastInterval);

                    //how to do event here?

                }, 90);
            }, 750);
        }).bind("mouseup mouseleave", function () {
            clearTimeout(timeoutDownArrow);
            clearInterval(intervalDownArrow);
        });

    };
}(jQuery));

Simply what I need to declare to make it have the arrows as follows:

formnamehere.addIncrementArrows(0, 100, 1, 5, event);

If it's possible: how could I bind an action to the button within .addIncrementArrows()?

So after a bit of research I came to a conclusion:

1 - Changed the function to run inside .addIncrementArrows() as a named run-time function:

var setSliderPercentage = function (percent) {
    //do stuff here
}

2 - Pass the function into the plugin as a variable name

percentageForm.addIncrementArrows(0, 100, 1, 5, setSliderPercentage);

3 - Ran the passed function within the addIncrementArrows() plugin.

$.fn.addIncrementArrows = function (min, max, interval, fastInterval, event) {
    var input = this;
    if (max === false) max = Infinity; //infinity and beyond!

    //Other stuff here

    //make the it auto increment or decrement every 100ms when 'holding down' the button after 1 second
    var timeoutUpArrow;
    var intervalUpArrow;
    $(uparrow).mousedown(function () {
        timeoutUpArrow = setTimeout(function () {
            intervalUpArrow = setInterval(function () {
                changeValue(fastInterval);
                //
                if (typeof event != "undefined") event(input.val());
                //
            }, 90);
        }, 750);
    }).bind("mouseup mouseleave", function () {
        clearTimeout(timeoutUpArrow);
        clearInterval(intervalUpArrow);
    });

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM