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

オプションとコールバックを渡すことができる例を次に示します。コールバックは、ボタンの 1 つがクリックされると実行され、ボタンのタイプ (例:CONFIRMまたは) を受け取ります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 に答える