Zmiana pozycji dla toastr Powiadomienie

Próbuję zmienić pozycję na mój toast na div click.Zmiana pozycji dla toastr Powiadomienie

klasa pozycji: nie zmienia się na Dół.? czego tu brakuje?

i jak używać

toastr.optionsOverride = 'positionclass: tost-bottom-full-width';

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 
<head> 
    <title></title> 
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/jquery-1.6.4.js")"></script> 
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/toastr.js")"></script> 
    <link rel="stylesheet" type="text/css" href="~/content/toastr.css" /> 
</head> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     // show when page load 
     toastr.info('Page Loaded!'); 

     $('#linkButton').click(function() { 
      toastr.optionsOverride = 'positionclass:toast-bottom-full-width'; 
      // show when the button is clicked 
      toastr.success('Click Button', 'ButtonClick', 'positionclass:toast-bottom-full-width'); 
     }); 

    }); 

</script> 

<body> 
    <div id ="linkButton" > click here</div> 
</body>

Aktualizacja 1

po debugowania zauważyłem że poniżej getOptions metoda z toastr.js jest nadrzędne 'positionclass: tost-bottom-full-width' do „tosty-top -right”

function getOptions() { 
     return $.extend({}, defaults, toastr.options); 
    }

aktualizacja 2 Lin e 140 w toastr.js nie jest z powodzeniem rozszerzanie m opcjeOprowadzenie do opcji. ??

 if (typeof (map.optionsOverride) !== 'undefined') { 
      options = $.extend(options, map.optionsOverride); 
      iconClass = map.optionsOverride.iconClass || iconClass; 
     }

aktualizacja 3 stanowisko służbowe problem został rozwiązany, ale muszę wspomnieć klasy pozycja 3 razy jak poniżej. Jestem pewien, że istnieje mniej hałaśliwy sposób, aby to osiągnąć.

$('#linkButton').click(function() { 

    toastr.optionsOverride = 'positionclass = "toast-bottom-full-width"'; 
    toastr.options.positionClass = 'toast-bottom-full-width'; 
    //show when the button is clicked 
    toastr.success('Click Button', 'ButtonClick', 'positionclass = "toast-bottom-full-width"'); 
});

Źródło

2013-06-24 swapneel

można po prostu ustawić go tak, jak pokazano w demie toastr: http://codeseven.github.io/toastr/ lub niniejszego Demo: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB

toastr.options = { 
    "debug": false, 
    "positionClass": "toast-bottom-full-width", 
    "onclick": null, 
    "fadeIn": 300, 
    "fadeOut": 1000, 
    "timeOut": 5000, 
    "extendedTimeOut": 1000 
}

Źródło

2013-06-30 20:07:06

Dzięki @John. Wykreśliłem z podanych przykładów Z pewnych powodów muszę ustawić go 2 razy, aby działało. Dziękuję za wspaniałą bibliotekę – swapneel

@JohnPapa Czy możesz wyjaśnić, gdzie to umieścić? Próbowałem już wstawić mój dokument, a także tuż przed moim wezwaniem do toastr.warning. Wydaje się, że to nie zajmuje. BTW Próbuję tylko zmienić showDuration, więc moje opcje wyglądają tak: 'toastr.options = { " showDuration ":" 20000 ", }' – wilblack

Wersja '2.0.2' ma problem, w którym' positionClass' nie jest przestrzegane we wszystkich przypadkach: [Zobacz problem na GitHub] (https://github.com/CodeSeven/toastr/issues/156). Zostało to naprawione w '2.0.3', ale w momencie, gdy piszę ten komentarz, nie ma jeszcze wersji' 2.0.3'. – Scott

Ya Jest zdecydowanie bug tutaj ...

Dla przykład. Ustawienie opcji jest nieco lepkie. Ustawiam je dynamicznie tuż przed wywołaniem typu tostu, który chcę. Za pierwszym razem opcje nie mają znaczenia. Następny toast wydaje się zbierać opcje, a potem toast nie zmieni się.

Na przykład

var logger = app.mainModule.factory('logger', ['$log', function ($log) { 

var error = function (msg, data, showtoast) { 

    if (showtoast) { 
     toastr.options = { 
      "closeButton": true, 
      "debug": false, 
      "positionClass": "toast-bottom-full-width", 
      "onclick": null, 
      "showDuration": "300", 
      "hideDuration": "1000", 
      "timeOut": "300000", 
      "extendedTimeOut": "1000", 
      "showEasing": "swing", 
      "hideEasing": "linear", 
      "showMethod": "fadeIn", 
      "hideMethod": "fadeOut" 
     }; 
     toastr.error(msg); 
    } 
    $log.error(msg, data); 
}; 
var info = function (msg, data, showtoast) { 

    if (showtoast) { 
     toastr.options = { 
      "closeButton": true, 
      "debug": false, 
      "positionClass": "toast-bottom-right", 
      "onclick": null, 
      "showDuration": "300", 
      "hideDuration": "1000", 
      "timeOut": "300000", 
      "extendedTimeOut": "1000", 
      "showEasing": "swing", 
      "hideEasing": "linear", 
      "showMethod": "fadeIn", 
      "hideMethod": "fadeOut" 
     }; 
     toastr.info(msg); 
    } 
    $log.info(msg, data); 
}; 
var warning = function (msg, data, showtoast) { 

    if (showtoast) { 
     toastr.options = { 
      "closeButton": false, 
      "debug": false, 
      "positionClass": "toast-bottom-right", 
      "onclick": null, 
      "showDuration": "300", 
      "hideDuration": "1000", 
      "timeOut": "5000", 
      "extendedTimeOut": "1000", 
      "showEasing": "swing", 
      "hideEasing": "linear", 
      "showMethod": "fadeIn", 
      "hideMethod": "fadeOut" 
     }; 
     toastr.warning(msg); 
    } 
    $log.warning(msg, data); 
}; 

var success = function (msg, data, showtoast) { 

    if (showtoast) { 
     toastr.options = { 
      "closeButton": false, 
      "debug": false, 
      "positionClass": "toast-bottom-right", 
      "onclick": null, 
      "showDuration": "300", 
      "hideDuration": "1000", 
      "timeOut": "5000", 
      "extendedTimeOut": "1000", 
      "showEasing": "swing", 
      "hideEasing": "linear", 
      "showMethod": "fadeIn", 
      "hideMethod": "fadeOut" 
     }; 

     toastr.success(msg); 
    } 
    $log.info(msg, data); 
}; 


var logger = { 
    success: success, 
    error: error, 
    info: info, 
    warning: warning 

}; 
return logger; 
}]);

Źródło

2013-09-19 01:05:09

Mam również ten problem. LMK, jeśli to wymyśliłeś. –

Mój problem polegał na tym, że górny pojemnik zawiera wszystkie grzanki. Jeśli różnią się stylem, to pierwsze zasady. Wywołanie toastr.remove() natychmiast usunie wszystko i zresetuje pozycjonowanie. –

I nie może się znaleźć w wersji 2.0.3! Najnowsza wersja to 1.4.1 see this

skończyło się na zmianę sztywno wartość dla positionClass w „kątowe-toastr.tpls.js”

Teraz jest centrowanie poprawnie!

Źródło

2015-06-03 19:57:23

to łatwy proste kroki, aby zmienić położenie ...... zobaczyć w poniżej ..

najpierw zadeklarować klasę pozycja przed pokazując komunikat.

EX: toastr.options.positionClass = 'toast-bottom-right';

Następnie pokazać swój komunikat jak poniżej:

Command: toastr "sukcesu"

nadzieję, że z dobrze .... Dzięki

Używałem go w mój projekt Laravel ... Podam mój kod, jeśli go rozumiesz ...

<script src="{{ asset('js/toastr.min.js') }}" type="text/javascript"></script> 
<script type="text/javascript"> 


    @if (Session::has('success')) 

     toastr.options.positionClass = 'toast-bottom-right'; 
     toastr.success("{{ Session::get('success') }}"); 

    @endif 


</script>

toastr notifications

Źródło

2017-11-24 00:25:57

Zmiana pozycji dla toastr Powiadomienie

Odpowiedz

Powiązane problemy