Changer positionclass pour la Notification toastr
J'essaie de changer positionclass pour mon toast sur div click.
Positionclass: n'est pas changé en bas.? ce qui me manque ici?
Et comment utiliser
Toastr.optionsOverride = 'positionclass:toast-bas-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 ci-dessous la méthode getOptions de toastr.js est prioritaire 'positionclass:toast-bas-full-width' à toast-en haut à droite'
function getOptions() {
return $.extend({}, defaults, toastr.options);
}
Mise à Jour 2 Ligne 140 dans toastr.js n'étend pas avec succès 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 Postion 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"');
});
4 réponses
Vous pouvez simplement le Définir comme ceci, comme indiqué dans la démo toastr: http://codeseven.github.io/toastr/ ou cette démo: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB
toastr.options = {
"debug": false,
"positionClass": "toast-bottom-full-width",
"onclick": null,
"fadeIn": 300,
"fadeOut": 1000,
"timeOut": 5000,
"extendedTimeOut": 1000
}
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 toast que je veux. La première fois, les options n'ont pas d'importance. Le prochain toast semble ramasser les options, puis le toast après cela ne changera pas.
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;
}]);
Je n'arrive pas à trouver la version 2.0.3! La dernière version est 1.4.1 voir ceci
J'ai fini par changer la valeur codée en dur pour positionClass dans ' angular-toastr.npt.js"
Maintenant, il est centrage correctement!
Il est un facile étapes simples pour changer la position......voir ci-dessous..
Déclarez D'abord la classe de position avant d'afficher le message.
EX: toastr.options.positionClass = 'toast-bottom-right';
Puis montrer votre message comme ci-dessous:
Command:toastr"succès"
Espérons avec le travail bien....Merci
Je viens de l'utiliser dans mon projet Laravel.... Je vais mettre 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>
