2

我已经使用 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
}

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

干杯!

4

2 回答 2

1

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

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

演示

插件代码：

(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
    }
});
于 2013-10-25T07:58:34.847 回答
0

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

也许是这样的：

简短的例子：

$(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!' } );

有些事情告诉我，就您的需求而言，我可能会偏离标准，但值得一试。

于 2013-10-25T07:49:18.780 回答