1

非常にシンプルなカスタム ダイアログが必要です。[削除] をクリックすると、確認またはキャンセルのオプションを含むシンプルなパネルが開きます。確認されれば、さらに多くのことが実行されます。

この確認を別のファイルで使用したいので、これが私のアプローチでした：

私が持っているすべてのページで実行されるindex.jsでは：

var confirmation = -1
$(document).ready(function(){
    $('html').on({
        click: function() {
            confirmation = 1;
        }
    },'#confirmation_yes');

    $('html').on({
        click: function() {
            confirmation = 0;
        }
    },'#confirmation_no');
});

function confirmAction(callback)
{
    if( confirmation == 1 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
            callback(true);
    }
    if( confirmation == 0 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
        callback(true);     
    }
    setTimeout(confirmAction, 50)
}

だから私の考えは、他のJSファイルの中に、

$('#element').click(function(){
    confirmAction(function(result){
        // do my stuff
    });
})

したがって、これを行うと、システムはエラーを返し、「コールバック」は関数ではないと言います。このコードの何が問題になっていますか?

ありがとう

4

4 に答える 4

0

別のアプローチをしました。これは jQueryMobile に基づいていますが、いくつかの小さな変更を加えれば、通常の jQuery でも使用できます。基本は単純です。ポップアップを開く関数を呼び出し、opener-function を呼び出して提供する関数に反応する 2 つのボタンを追加します。これが私の例です：

function jqConfirm(data) {
    var container = $('#genericConfirm');
    container.find('h1').html(data.title); // title of the confirm dialog
    container.find('p').html(data.message); // message to show
    // .off('click') removes all click-events. click() attaches new events
    container.find('.yes').off("click").click(data.yes); // data.yes/no are functions that you provide
    container.find('.no').off("click").click(data.no);
    container.popup({ positionTo: "window" }).popup("open"); // .popup("open") opens the popup
}
var confirmData = {
    title: "Send this message?",
    message: "Are you sure you want to send this message?",
    yes: function() {
        sendMessage();
        $('#genericConfirm').popup("close");
    },
    no: function() {
        $('#genericConfirm').popup("close");
    }
};
jqConfirm(confirmData); // you open the popup with this function (indirectly)

そして HTML 部分 (jQueryMobile 固有で、単純な jQuery に一致するように少し変更する必要があります)

<div data-role="popup" id="genericConfirm" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Title</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <p style="margin-bottom: 15px;">Message</p>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#" data-role="button" data-inline="false" data-theme="a" class="no">Cancel</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button" data-inline="false" data-theme="g" class="yes">Ok</a>
            </div>
        </div>
    </div>
</div>
于 2013-08-04T08:05:26.877 に答える
0

ロジックを処理する別のハンドラーをボタンにアタッチします。ダイアログの操作が完了したら、ダイアログを削除してハンドラーを削除します。後で別のダイアログを作成する場合は、おそらく同じレイアウトまたは別のレイアウトで、そのダイアログに別のハンドラーを定義できます。イベントが「バブル」すると、ボタン自体のハンドラーと html のハンドラー (ボタンがクリックされたときにのみ起動) の両方が起動されます。

以下は単なる疑似コードですが、これで何ができるかがわかります。

//This will create the html for your dialog
createMyFancyDialog();
showDialog();

//This is where you'll do the logic for this dialog
$('#confirmation_yes').on( 'click', function() {
    doWhatEveryIWantToDo();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );
$('#confirmation_no').on( 'click', function() {
    doSomethingMean();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );
于 2013-08-04T08:05:58.377 に答える