1

デフォルトのアラート/プロンプト/確認を自分のものに置き換えたいのですが、プラグインを使用したくありません。スタイリングはしましたが、ボタンがクリックされたときのアクション (OK/キャンセルなど) を把握できるようにしました。これまでの私のコードはここにあります。

function jPromt(title,content,type,callback){
    var alert = $('.resources').find('.alert').clone(); //basic barebone
        alert.find('h3').html(title);
        alert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    }

    for (var prop in obj) { // Create buttons
        if (obj.hasOwnProperty(prop)) { 
            var btn = "<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>";
            alert.find('.buttons').append(btn);

        }
    }

    $('.resource_loader').append(alert)
    $('body').append(alert).center().fadeIn('fast');

    // This is here I'm not realy sure what to do whit callbaks for each button.

    //if (callback && typeof(callback) === "function") {  
    //  callback();  
    //} 
}

jPromt() を呼び出すことができ、各ボタンのコールバックが次のように実行されるようにしたい: またはそれに似た:

     ....

'ok', function(){
    //do stuff if ok was clicked
},
'cancel', function(){
    // canel was clicked, do stuff
}

JSFiddle: http://jsfiddle.net/CezarisLT/u6AYe/5/

前もって感謝します。私はあなたの答えを正しいものとして確実に選択します。

4

2 に答える 2

1

いくつかの変更を加えるだけで、これを機能させることができます。

  1. オブジェクトをcallbackパラメーターとして渡します (名前を に変更します)。ここで、オプション (など)にcallbacks定義したのと同じ形式を使用して、キーがボタンを表します。呼び出しは次のようになります。"Yes""No"

    jPromt("test THE title","testing the contents","_confirm", {
    'No' : function(){
        alert("testing NO");
    },
    'Yes' : function(){
        alert("testing YES");
    }
});

  2. btnループ内で jQuery オブジェクトを作成して、objハンドラーをアタッチできるようにします

  3. パラメータに現在の;callbacksのハンドラがあるかどうかを確認します。propはいの場合は、に添付してbtnください。

デモ: http://jsfiddle.net/u6AYe/7/

于 2013-02-01T23:03:29.660 に答える
1

あなたができることは...

  1. コールバックを呼び出す実際のクリック ハンドラをボタンに与える
  2. コールバックで、実際にクリックされたボタンを調べます

何かのようなもの...

function jPromt(title,content,type,callback){
    var myAlert = $('.resources').find('.alert').clone(); //basic barebone
        myAlert.find('h3').html(title);
        myAlert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    };

    if( options.hasOwnProperty(type) ){
        obj = options[type];
    }

    for (var prop in obj) { // Create buttons
        var $btn = $("<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>");
        $btn.attr('btn-type',prop.toUpperCase());
        myAlert.find('.buttons').append($btn);
        $btn.click(callback);
    }

    $('body').append(myAlert.show());
}

jPromt("test THE title","testing the contents","_confirm",
    function(){
        answer = $(this).attr('btn-type');
        if(answer == 'YES'){
            alert("Yes!");
        }else{
            alert("No!");
        }
    }
);

http://jsfiddle.net/u6AYe/8/を参照してください...

于 2013-02-01T23:07:24.627 に答える