Плагин jQuery при возврате события True / False - PullRequest
Новая
       8

Плагин jQuery при возврате события True / False

3 голосов
/ 06 августа 2010

Я создаю плагин, который заменяет предупреждения / подтверждения для проекта, и мне было любопытно, если бы был способ сделать его реальным подтверждением, где вы можете сделать: 

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комментарии в событии click (помните, что это все еще в разработке, поэтому 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);

Ответы [ 2 ]

1 голос
/ 07 августа 2010

Я думаю, что передача метода обратного вызова в качестве параметра функции $.alert будет самым простым вариантом. Если это нарушает условия соглашения, я мог бы посмотреть на метод .queue() для цепочки событий.

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

0 голосов
/ 06 августа 2010

В качестве примера jqModal

я видел хороший перезаписываемый метод valid () для модального окна. Вот пример кода .Я уверен, что вы можете адаптировать его под свои нужды ... 

/* 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;
  });
});
...