Question

我已经使用了jQuery几年并且喜欢它。但是，我在项目中有很多函数要作为扩展的jQuery函数。

对于这个例子，我将使用$ .post函数来演示我试图用自己的函数完成的时间：

$.post('file.php', { arg1: 'hi', arg2: 'hi2' }, function ( data ) {
    // Is called after function completes
    // and returns a value (in this case data)
});

我认为该功能看起来像

(function( $ ) {
    $.fn.popup = function( options ) {

    options = $.extend( $.fn.popup.defaults, options );

    if ( options.type === 1 ) 
        var opt = '<table><tr><td><div id="pConfirm">CONFIRM</div></td><td><div id="pCancel">CANCEL</div></td></tr></table>';

    $('body').prepend('<div class="overlay-control"></div>');
    $('body').prepend('<div class="info-overlay"><h1>'+title+'</h1>'+ message + opt +'</div>');

    $(document).on('click', 'pConfirm', function () {
        //callback would happen here and would return a value
    });

    $(document).on('click', 'pCancel', function () {
        //callback would happen here and would return a value
    });
});

如何调用

$.popup('title', 'message', 'type', function(ret) {
    if ( ret === 0 )
        //Cancelled
    else
        //Accepted
}

我希望有人可以发布一个支持一些值的示例，并能够返回结果或指向一个好的教程。

干杯！

Answer 1

这是一个允许您传入选项和回调的示例。当点击其中一个按钮时执行回调，并且它接收例如按钮的类型。 CONFIRM或CANCEL。

你会注意到我没有使用元素ID或类来处理它们。相反，它在创建后保留对元素的引用。这样做的好处是它使它更通用，不会遇到与其他代码的类或ID冲突。

Demo

插件代码：

(function($) {
    $.extend({
        popup: function(options, callback) {
            var container;

            function actionClicked(){
                var type = $(this).data('type');
                container.remove(); // remove the popup from the DOM
                callback(type); // execute callback
            }

            // create buttons under a table
            var table = $('<table><tr><td class="confirm"></td><td class="cancel"></td></tr></table>');

            table.find('.confirm').append(
                $('<button></button>', { type : 'button' })
                    .data('type', 'CONFIRM')
                    .text('Confirm')
                    .click(actionClicked)
            );

            table.find('.cancel').append(
                $('<button></button>', { type : 'button' })
                    .data('type', 'CANCEL')
                    .text('Cancel')
                    .click(actionClicked)
            );


            // create the popup elements
            container = $('<div class="info-overlay"></div>')
                .append(
                    $('<h1></h1>').text(options.title)
                )
                .append(
                    $('<p></p>').text(options.message)
                )
                .append(table);

            $('body').prepend(container);
        }
    });
})(jQuery);

用法：

$.popup({ title : 'my title', message : 'my message', type : 'my type' }, function(action){
    console.log("selected action " + action);

    if(action == 'CONFIRM'){
        // confirmed
    } else if(action == 'CANCELLED') {
        // cancelled
    }
});

Answer 2

如果我在这里离职，请原谅我。

可能是这样的：

简短的例子：

$(document).bind('pConfirm', function (event, obj) {
    //callback would happen here and would return a value
    console.log(obj.tester) // testing
});

$(document).bind('pCancel', function () {
    //callback would happen here and would return a value
});

然后在$ .popup实例化中。

 jQuery( document.body ).trigger( "pConfirm", { tester: 'it works!' } );

有些东西告诉我，根据你的需要，我可能会离职，但值得一试。

jQuery自定义插件：将值返回给事件

2 个答案: