web-dev-qa-db-fra.com

Changement de positionclass pour la notification toastr

J'essaie de changer de classe de position pour mon pain grillé sur div clic.

positionclass: n'est pas changé en bas.? Qu'est-ce que j'oublie ici?

et comment utiliser

toastr.optionsOverride = 'positionclass: toast-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>

mise à jour 1

Après le débogage, j'ai remarqué que la méthode getOptions de toastr.js ci-dessous est prioritaire sur "positionclass: toast-bottom-full-width" en "toast-top-right-right" 

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

update 2 La ligne 140 dans toastr.js n'est pas avec succès l'extension de m optionsOverride dans les options.

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

mise à jour 3 Le problème de position a été corrigé, mais je dois mentionner la classe de position 3 fois comme ci-dessous. Je suis sûr qu'il existe un moyen moins bruyant d'y parvenir.

$('#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"');
});
jqueryasp.net-mvctoastr
23
swapneel

Vous pouvez simplement le définir comme ceci, comme indiqué dans la démonstration toastr: http://codeseven.github.io/toastr/ Ou cette démonstration: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB

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

Ya il y a certainement un bug ici ...

Par exemple. Définir les options est un peu collant. Je les mets dynamiquement juste avant d’appeler le type de pain que je veux. La première fois, les options importent peu. Les toasts suivants semblent choisir les options, puis les toasts ne changeront pas après.

Par exemple

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;
}]);
6
Doug Beard

Je n'arrive pas à trouver la version 2.0.3! La dernière version est la 1.4.1 voyez ceci

J'ai fini par changer la valeur codée en dur pour positionClass dans 'angular-toastr.tpls.js'

Maintenant, il se centre correctement!

0
Arnold.Krumins

c'est une étape simple et facile pour changer de position ...... voir ci-dessous ..

d'abord déclarer la classe de position avant d'afficher le message.

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

Puis affichez votre message comme ci-dessous:

Command:toastr "succès"

J'espère que ça marche bien ... Merci

Je viens de l'utiliser dans mon projet Laravel .... Je mettrai mon code ici si vous le comprenez ...

<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>

notifications toastr

0
Shimul K. Sarkar