Любая замена JQuery alert () для родного JavaScript? - PullRequest
Новая
       9

Любая замена JQuery alert () для родного JavaScript?

4 голосов
/ 06 февраля 2011

Я бы хотел заменить нативное предупреждение javascript () своим собственным, чтобы иметь возможность контролировать тему и придавать ей более JJueryUI внешний вид.Я пробовал множество альтернатив - JQueryUI Dialog, jAlert, jqAlert.Однако, похоже, что все они не работают синхронно таким же образом, как исходное предупреждение.

Пример: 

function mytest()
{
    alert('one');
    alert('two');
    alert('three');
}

В этом примере с исходным предупреждением () 3диалоги будут появляться один за другим подряд.Но в заменителях они появляются сразу!

Есть идеи?

Ответы [ 9 ]

13 голосов
/ 06 февраля 2011

Собственный alert() переводит браузер в тупик . Вы не найдете никаких сторонних библиотек, которые делают это, потому что это невозможно. *

Редактировать

Я собрал небольшую демонстрацию того, как вы можете использовать один диалог jQuery вместо предупреждения. 

var alertManager = (function() {
    var _queue = [],
        _opts = {
            modal: true,
            autoOpen: false,
            buttons: {
                OK: function ()
                {
                    $(this).dialog('close');
                    var next = _queue.shift();
                    if (typeof next === 'string')
                    {
                        _dialog.text(next).dialog('open');
                    }
                }
            }
        },
        _dialog = $('<div id="alertDialog" title="Alert!"></div>').dialog(_opts),

        _self = {};

    _self.show = function (message) {
        if (_dialog.dialog('isOpen')) {
            _queue.push(String(message));
        }
        else {
            _dialog.text(message).dialog('open');
        }
    }

    return _self;
}());



$('#clicky').click(function ()
{
    alertManager.show('alert numero uno');
    alertManager.show('alert #2');
    alertManager.show({foo: 'bar'});
    alertManager.show(document.getElementById('clicky'));
    alertManager.show('last one');
});

Горячая демонстрация здесь & # x2192;

Вы также можете довольно легко превратить это в плагин jQuery.

*, хотя вы можете подделать его с помощью петли while, которая вращается, пока диалог открыт. Я не рекомендую это.

4 голосов
/ 23 октября 2012

Я давно нашел библиотеку, которая решила эту проблему для предупреждения, подсказки и подтверждения, она довольно проста в использовании:

Демо здесь: http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )

скачать здесь: http://labs.abeautifulsite.net/archived/jquery-alerts/jquery.alerts-1.1.zip

2 голосов
/ 06 февраля 2011

предупреждение jquery: 

  JQuery.fn.alert = function(message) {
     alert(message);
  };

пример использования: 

 $("#item1").alert("hello");

Боже мой: D

jquery толькорамки DOM.это не другой javascript!JQuery это всего лишь несколько строк JavaScript.и не заменяя javascript.

, если вы хотите создать диалоговое окно, то я могу предложить вам поискать плагин jquery.

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

1 голос
/ 06 февраля 2011

Если вы ищете и альтернативное поведение, вы можете попробовать: http://plugins.jquery.com/project/freeow

также предупреждает пользователя, но не блокирует браузер, как сказал "Мэтт Болл"

0 голосов
/ 24 октября 2013

DAlert jQuery UI Plugin Попробуйте это: andrewdex.github.io/dalert

0 голосов
/ 12 февраля 2013

Тем временем я также недавно создал новую функцию, позволяющую подтверждать поля с помощью диалогового окна jqueryui.

Очень просто использовать 

dlgConfirm('Are you sure you want to cancel this change-email request? <br><label>Current password<br><input type="password"></label>',
             'Cancel Email Change', 'Continue', function(dlg){
       //do ajax or something
       return false; //do not close dialog until ajax is complete
    }

dlgConfirm('Are you sure you want to submit this form', function(dlg){
    $('form', dlg).submit();
    return true;
});

Вот исходный код (общедоступныйдомен): 

<script>
   /**
    * Open confirmation dialog (jqueryui modal)
    *
    * @param {string} c_text text/html to show in the dialog box
    * @param {string|function(dlg_element)} c_title|confirm_callback title of the dialog box (or callback function)
    * @param {string|function(dlg_element)} c_btn_text|confirm_callback confirm button text (or callback function)
    * @param {string|function(dlg_element)} c_btn_cancel_text|confirm_callback cancel button text (defaults to 'Cancel') (or callback function)
    * @param {function(dlg_element)} confirm_callback callback after the modal box is confirmed 
    */
   function dlgConfirm(c_text, c_title, c_btn_text, c_btn_cancel_text, confirm_callback){

      if (typeof(confirm_callback) !== 'function'){
         if (typeof(c_title) == 'function'){
            confirm_callback = c_title;
         }else if (typeof(c_btn_text) == 'function'){
            confirm_callback = c_btn_text;
         }else if (typeof(c_btn_cancel_text) == 'function'){
            confirm_callback = c_btn_cancel_text;
         }
      }

      if (typeof(c_text) !== 'string'){
         c_text = 'Are you sure?';
      }
      if (typeof(c_title) !== 'string'){
         c_title = 'Confirm';
      }  
      if (typeof(c_btn_text) !== 'string'){
         c_btn_text = 'Confirm';
      }  
      if (typeof(c_btn_cancel_text) !== 'string'){
         c_btn_cancel_text = 'Cancel';
      }     

      if ($('#dlgConfirm').length == 0){
         $('body').append('<div id="dlgConfirm" title="Confirm" style="display: none">Are you sure?</div>');
      }
      var btns = {};
      btns[c_btn_text] = function() {
             var dlg = this;
             if (typeof(confirm_callback) == 'function'){
                if (confirm_callback(dlg) !== false){
                   $(this).dialog('close');
                }
             }          
      };
      btns[c_btn_cancel_text] = function() {
             $( this ).dialog("close");
      };

      $('#dlgConfirm').dialog({
         title: c_title,
         autoOpen: false,
         resizable: false,
         //height:170, //commented out so autosize works
         modal: true,
         buttons: btns
       }).html(c_text).dialog('open');
   }
   </script>
0 голосов
/ 10 сентября 2011

Как насчет наложения предупреждений?
Они будут появляться все сразу, но пользователь видит только первое, пока не закроет это, затем появится второе (покажется) и так далее.
-Может быть легко достигнуто путем обновления «глобальной» переменной last-z-index.

0 голосов
/ 06 февраля 2011

Вы можете использовать и отлично управлять этими диалоговыми окнами http://jqueryui.com/demos/dialog/

Просто вызывать их при необходимости.

0 голосов
/ 06 февраля 2011

Вы можете легко имитировать синхронность обычных js-предупреждений с помощью диалоговых окон jQueryUI.Просто используйте предоставленные события - в данном случае close, который вызывается при закрытии диалогового окна: 

<div id="dialog" title="Dialog Title">Dialog</div>
<div id="dialog2" title="Dialog Title">Another dialog</div>
$("#dialog").dialog({
    close: function(event, ui) {
        $("#dialog2").dialog();
    }
});

Теперь, когда вы закрываете первое диалоговое окно, открывается второе.

...