2010-08-05 75 views
3

我創建一個插件,替換警報/確認一個項目,我很好奇,如果有辦法使它像一個真正的確認,你可以這樣做:jQuery插件在事件中返回真/假

if(confirm('Yes or no?')){alert('You agreed!');} 

現在我可以做一個回調使用此語法:

$.alert('yes or no',{type:'confirm'}); 

但我希望能夠做到:

if($.alert('yes or no',{type:'confirm'})){/*some action on true*/} 

這是我迄今爲止,並期待在單擊事件中的所有CAPS評論(記住,這是還在開發中,所以HTML和東西還是有點噁心):

(function($) { 
    $.alert = function(message,options) { 
     defaults = { 
      type:'alert', 
      callback:function(){} 
     } 
     options = $.extend({},defaults,options); 
     if(options.type == 'confirm'){ 
      $('<div style="display:none" class="alerthiddenoverlay"></div><div style="display:none" class="customalertbox"><div><img src="http://cdn.iconfinder.net/data/icons/basicset/tick_48.png"><p>'+message+'</p><br class="clear"><span><a class="cancel" href="#cancel">Cancel</a><a class="ok" href="#ok">OK</a></span><br class="clear"></div></div>').prependTo('body'); 
     } 
     else{ 
      $('<div style="display:none" class="alerthiddenoverlay"></div><div style="display:none" class="customalertbox"><div><img src="http://cdn.iconfinder.net/data/icons/basicset/warning_48.png"><p>'+message+'</p><br class="clear"><span><a class="ok" href="#ok">OK</a></span><br class="clear"></div></div>').prependTo('body'); 
     } 
     $alertboxclass=$('.customalertbox'); 
     $alerthiddenoverlay=$('.alerthiddenoverlay'); 
     $alertboxclass.find('a').click(function(event){ 
      event.preventDefault(); 
      var the_return = false; 
      if($(this).attr('href') == '#ok'){ 
       var the_return = true; 
      } 
      $alertboxclass.fadeOut(250,function(){$alerthiddenoverlay.delay(250).fadeOut(250,function(){$(this).remove();options.callback.call(this,the_return);});$(this).remove()}); 
     }); 
     $alertboxclass.css({ 
      top:$(window).height()/2-$alertboxclass.height()/2, 
      left:$(window).width()/2-$alertboxclass.width()/2 
     }); 
     $alerthiddenoverlay.css({height:$(window).height()+'px',width:'100%',position:'fixed',zIndex:'9998'}).fadeIn(250,function(){$alertboxclass.delay(250).fadeIn()}); 
    } 
})(jQuery); 
+0

你能不能把這個jsbin.com,所以我們可以看到它的行動作出新的修訂與大家分享? – 2010-08-06 20:00:27

回答

0

我看到了作爲jqModal的一個例子,很好的確認()覆蓋到模態窗口

Here is the code sample。我敢肯定,你可以使其適應你的需要......

/* Overriding Javascript's Confirm Dialog */ 

// NOTE; A callback must be passed. It is executed on "cotinue". 
// This differs from the standard confirm() function, which returns 
// only true or false! 

// If the callback is a string, it will be considered a "URL", and 
// followed. 

// If the callback is a function, it will be executed. 


function confirm(msg,callback) { 
    $('#confirm') 
    .jqmShow() 
    .find('p.jqmConfirmMsg') 
     .html(msg) 
    .end() 
    .find(':submit:visible') 
     .click(function(){ 
     if(this.value == 'yes') 
      (typeof callback == 'string') ? 
      window.location.href = callback : 
      callback(); 
     $('#confirm').jqmHide(); 
     }); 
} 


$().ready(function() { 
    $('#confirm').jqm({overlay: 88, modal: true, trigger: false}); 

    // trigger a confirm whenever links of class alert are pressed. 
    $('a.confirm').click(function() { 
    confirm('About to visit: '+this.href+' !',this.href); 
    return false; 
    }); 
}); 
1

我想傳遞一個回調方法作爲參數傳遞給$.alert功能將是最簡單的選項。不過,如果這是一個破壞行爲的話,我可能會考慮鏈接事件的.queue()方法。

http://api.jquery.com/queue/