extend – devfrontend.info

Source: Extending an existing jQuery function.

(function($)
{
    // maintain a reference to the existing function
    var oldcss = $.fn.css;
    // ...before overwriting the jQuery extension point
    $.fn.css = function()
    {
        // original behavior - use function.apply to preserve context
        var ret = oldcss.apply(this, arguments);

        // stuff I will be extending
        // that doesn't affect/change
        // the way .css() works

        // preserve return value (probably the jQuery object...)
        return ret;
    };
})(jQuery);

(function($)

{

// maintain a reference to the existing function

var oldcss = $.fn.css;

// ...before overwriting the jQuery extension point

$.fn.css = function()

{

// original behavior - use function.apply to preserve context

var ret = oldcss.apply(this, arguments);

// stuff I will be extending

// that doesn't affect/change

// the way .css() works

// preserve return value (probably the jQuery object...)

return ret;

};

})(jQuery);

Aller plus loin avec un callback

Source: Coderbits – Extending jQuery with onShow and onHide events.

<!-- Include latest jquery first! -->
<script>

    //Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function
    (function ($) {

        //Extend show() so that it trigger our event when called
        var show = $.fn.show;
        $.fn.show = function () {
            var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onShow"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };
        //Extend hide()
        var hide = $.fn.hide;
        $.fn.hide = function () {
            var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onHide"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };

        //Define new event functions
        $.fn.onShow = function (callback) {
            if (callback != null) {
                $(this).on("onShow", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onShow"); //If no callback exist we trigger the event
            }
            return this;
        };

        $.fn.onHide = function (callback) {
            if (callback != null) {
                $(this).on("onHide", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onHide"); //If no callback exist we trigger the event
            }
            return this;
        };
    })(jQuery);
    //All the above code could be saved in an external .js file which is much easier to include

    //Testing time!
    $(function () { //DOM ready

        //Define what happens if our element is shown
        $("#testingElement").onShow(function () {
            alert("Hello!");
        });

        //Define what happens if our element is hidden
        $("#testingElement").onHide(function () {
            alert("Goodbye!");
        });

        //Button event
        $("button").click(function () {
            $("#testingElement").toggle();
        });
    });

</script>

<p id="testingElement" style="display:none;">Showing</p>
<button>Show</button>

//Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function

(function ($) {

//Extend show() so that it trigger our event when called

var show = $.fn.show;

$.fn.show = function () {

var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onShow"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Extend hide()

var hide = $.fn.hide;

$.fn.hide = function () {

var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onHide"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Define new event functions

$.fn.onShow = function (callback) {

if (callback != null) {

$(this).on("onShow", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onShow"); //If no callback exist we trigger the event

}

return this;

};

$.fn.onHide = function (callback) {

if (callback != null) {

$(this).on("onHide", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onHide"); //If no callback exist we trigger the event

}

return this;

};

})(jQuery);

//All the above code could be saved in an external .js file which is much easier to include

//Testing time!

$(function () { //DOM ready

//Define what happens if our element is shown

$("#testingElement").onShow(function () {

alert("Hello!");

});

//Define what happens if our element is hidden

$("#testingElement").onHide(function () {

alert("Goodbye!");

});

//Button event

$("button").click(function () {

$("#testingElement").toggle();

});

</script>

<p id="testingElement" style="display:none;">Showing</p>

Articles récents

Catégories

Archives

Méta

Étiquette : extend

[Magento 2] Etendre un Block pour en hériter et lui ajouter de nouvelles fonctionnalités

Les fichiers obligatoires pour la création d’un nouveau module dans Magento 2 (ou Adobe Commerce)

Etendre un Block dans Magento 2

Le Block (fichier) initial

Le Block étendu

[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

Etendre les styles less d’un composant

[jQuery] Etendre une fonction existante

Aller plus loin avec un callback

[jQuery] Créer un plugin avec la méthode jQuery.fn.extend()