Как показать всплывающее окно «JAlert» несколько раз? - PullRequest
3 голосов
/ 02 мая 2011

Я знаю, что могу позвонить alert('Warning1');alert('Warning2');, и он покажет 2 предупреждения.Но когда я использую плагин JAlert, указанный в Страница JAlert , я не могу отобразить несколько предупреждений.Кто-нибудь из вас работал с этим плагином и решил ту же проблему?

Ответы [ 3 ]

4 голосов
/ 04 мая 2011

Правильно - поэтому я сделал пример HTML и протестировал эту вещь

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<!-- Dependencies -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript"> 
        $(document).ready( function() {

          jAlert('This is a custom alert box', 'Alert Dialog', doAlert()  );

          function doAlert() {
              alert('CallBack')
          }

        });
</script> 

</head>

<body>
</body>

Итак, основываясь на документации с сайта

Использование Этот плагин использует $ .alertsпространства имен, но есть три встроенные функции быстрого доступа>, которые облегчают реализацию:

jAlert (message, [title, callback])

Хорошо, теперь это логикаjQuery

  1. документ готов к запуску
  2. jAlert показывает пользовательское поле и по определению должен выполнить обратный вызов doAlert ()
  3. Как только первый jAlert завершит работу, он выполнитобратный вызов и откройте другой экземпляр jALert

Что на самом деле происходит

  1. Функция doAlert срабатывает до фактического jAlert, который вызывает обратный вызов
  2. Первый JAlert срабатывает ОК!но не отображается, потому что уже есть jAlert isntance и jsut игнорирует все, что происходит

В заключение

Этот плагин не может обрабатывать несколько вызовов внутри, а обратный вызов неверен!потому что он не перезванивает, а вызывает функцию до того, как он вызовет себя или ожидает принятия исходного jAlert

Решение

  1. Найти другой плагин
  2. Создатьвнутренняя система очередей jScript.каким-то образом, основываясь на том, насколько ужасно работает этот плагин

Почему работает оповещение ();работать тогда ??!?!?!?!?

Потому что, когда вы звоните alert();, выполнение кода останавливается и ждет, пока вы не нажмете OK и не продолжит код.

Так что извинитесказать, но этот плагин не работает должным образом, и я предлагаю вам найти еще один.

1 голос
/ 29 декабря 2011

Предыдущий ответ был частично правильным, но не смог определить массив, содержащий несколько предупреждений ($ .alerts.waitingCalls).Приведенный ниже код заменяет весь файл jquery.alerts.js (весь пакет доступен по адресу: http://code.google.com/p/jalert-plus/downloads/list)

// jQuery Alert Dialogs Plugin
//
// Version 1.1 (extended)
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Mike Walters
// 27 December 2011
// http://code.google.com/p/jalert-plus/downloads/list
//
// Visit http://abeautifulsite.net/notebook/87 for more information
//
// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )
// 
// History:
//
//      1.00 - Released (29 December 2008)
//
//      1.01 - Fixed bug where unbinding would destroy all resize events
//
//      DECEMBER 2011 - added ability to popup multiple alerts (mike walters)
//
// License:
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC. 
//



(function($) {

    $.alerts = {

        // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time

        verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
        horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
        repositionOnResize: true,           // re-centers the dialog on window resize
        overlayOpacity: .01,                // transparency level of overlay
        overlayColor: '#FFF',               // base color of overlay
        draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
        okButton: '&nbsp;OK&nbsp;',         // text for the OK button
        cancelButton: '&nbsp;Cancel&nbsp;', // text for the Cancel button
        dialogClass: null,                  // if specified, this class will be applied to all dialogs

        waitingCalls: new Array(),

        raiseNextDialog: function() {
            $.alerts.callIsActive = false;
            if ($.alerts.waitingCalls.length>0) {
                var params = $.alerts.waitingCalls.shift();
                $.alerts._show(params[0], params[1], params[2], params[3], params[4]);
            }
        },

        dialogShallWait: function (title, msg, value, type, callback) {
            if ($.alerts.callIsActive) {

                $.alerts.waitingCalls.push([title, msg, value, type, callback]);
                return true; // can't show now
            } else {
                $.alerts.callIsActive = true;
                return false;
            }
        },


        // Public methods

        alert: function(message, title, callback) {
            if( title == null ) title = 'Alert';
            $.alerts._show(title, message, null, 'alert', function(result) {
                if( callback ) callback(result);
            });
        },

        confirm: function(message, title, callback) {
            if( title == null ) title = 'Confirm';
            $.alerts._show(title, message, null, 'confirm', function(result) {
                if( callback ) callback(result);
            });
        },

        prompt: function(message, value, title, callback) {
            if( title == null ) title = 'Prompt';
            $.alerts._show(title, message, value, 'prompt', function(result) {
                if( callback ) callback(result);
            });
        },

        // Private methods

        _show: function(title, msg, value, type, callback) {


        if ( $.alerts.dialogShallWait(title, msg, value, type, callback) ) return;

            $.alerts._hide();
            $.alerts._overlay('show');

            $("BODY").append(
              '<div id="popup_container">' +
                '<h1 id="popup_title"></h1>' +
                '<div id="popup_content">' +
                  '<div id="popup_message"></div>' +
                '</div>' +
              '</div>');

            if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);

            // IE6 Fix
            var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 

            $("#popup_container").css({
                position: pos,
                zIndex: 99999,
                padding: 0,
                margin: 0
            });

            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );

            $("#popup_container").css({
                minWidth: $("#popup_container").outerWidth(),
                maxWidth: $("#popup_container").outerWidth()
            });

            $.alerts._reposition();
            $.alerts._maintainPosition(true);

            switch( type ) {
                case 'alert':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');

                    $("#popup_ok").click( function() {
                        $.alerts._hide();
                        callback(true);
                        $.alerts.raiseNextDialog();
                    });
                    $("#popup_ok").focus().keypress( function(e) {
                        if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
                    });
                break;
                case 'confirm':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_ok").click( function() {
                        $.alerts._hide();
                        if( callback ) callback(true);
                        $.alerts.raiseNextDialog();
                    });
                    $("#popup_cancel").click( function() {
                        $.alerts._hide();
                        if( callback ) callback(false);
                        $.alerts.raiseNextDialog();
                    });
                    $("#popup_ok").focus();
                    $("#popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                break;
                case 'prompt':
                    $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_prompt").width( $("#popup_message").width() );
                    $("#popup_ok").click( function() {
                        var val = $("#popup_prompt").val();
                        $.alerts._hide();
                        if( callback ) callback( val );
                        $.alerts.raiseNextDialog();
                    });
                    $("#popup_cancel").click( function() {
                        $.alerts._hide();
                        if( callback ) callback( null );
                        $.alerts.raiseNextDialog();
                    });
                    $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                    if( value ) $("#popup_prompt").val(value);
                    $("#popup_prompt").focus().select();
                break;
            }

            // Make draggable
            if( $.alerts.draggable ) {
                try {
                    $("#popup_container").draggable({ handle: $("#popup_title") });
                    $("#popup_title").css({ cursor: 'move' });
                } catch(e) { /* requires jQuery UI draggables */ }
            }
        },

        _hide: function() {
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false);
        },

        _overlay: function(status) {
            switch( status ) {
                case 'show':
                    $.alerts._overlay('hide');
                    $("BODY").append('<div id="popup_overlay"></div>');
                    $("#popup_overlay").css({
                        position: 'absolute',
                        zIndex: 99998,
                        top: '0px',
                        left: '0px',
                        width: '100%',
                        height: $(document).height(),
                        background: $.alerts.overlayColor,
                        opacity: $.alerts.overlayOpacity
                    });
                break;
                case 'hide':
                    $("#popup_overlay").remove();
                break;
            }
        },

        _reposition: function() {
            var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
            var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
            if( top < 0 ) top = 0;
            if( left < 0 ) left = 0;

            // IE6 fix
            if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();

            $("#popup_container").css({
                top: top + 'px',
                left: left + 'px'
            });
            $("#popup_overlay").height( $(document).height() );
        },

        _maintainPosition: function(status) {
            if( $.alerts.repositionOnResize ) {
                switch(status) {
                    case true:
                        $(window).bind('resize', $.alerts._reposition);
                    break;
                    case false:
                        $(window).unbind('resize', $.alerts._reposition);
                    break;
                }
            }
        }

    }

    // Shortuct functions
    jAlert = function(message, title, callback) {
        $.alerts.alert(message, title, callback);
    }

    jConfirm = function(message, title, callback) {
        $.alerts.confirm(message, title, callback);
    };

    jPrompt = function(message, value, title, callback) {
        $.alerts.prompt(message, value, title, callback);
    };

})(jQuery);
1 голос
/ 26 августа 2011

У меня была та же проблема, и я решил ее так: в jquery.alerts.js, перед комментарием для публичных функций, я вставил это:

    raiseNextDialog: function() {
        $.alerts.callIsActive = false;
        if ($.alerts.waitingCalls.length>0) {
            var params = $.alerts.waitingCalls.shift();
            $.alerts._show(params[0], params[1], params[2], params[3], params[4]);
        }
    },
    dialogShallWait: function (title, msg, value, type, callback) {
        if ($.alerts.callIsActive) {
            $.alerts.waitingCalls.push([title, msg, value, type, callback]);
            return true; // can't show now
        } else {
            $.alerts.callIsActive = true;
            return false;
        }
    },

Идея состоит в том, что еслипредыдущий диалог все еще открыт, мы помещаем вызов в массив, который будет использоваться при закрытии диалога.

Теперь нам все еще нужно добавить строку в начало функции _show ():

if ( $.alerts.dialogShallWait(title, msg, value, type, callback) ) return;

И для пяти обработчиков .click () нам нужно добавить эту строку после вызова обратного вызова:

$.alerts.raiseNextDialog();

Вот и все!

Я хотел обновить создателя, ноне было никакого способа оставить комментарий на его сайте ... И я использую замечательную версию, продемонстрированную здесь , которая использует стандартные темы.Просто отлично!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...