jquery - ejemplos - Cambio de posición de clase para la notificación toastr
toastr position (4)
Estoy tratando de cambiar la posición de clase para mi brindis en div clic.
positionclass: no se cambia a Bottom.? ¿que me estoy perdiendo aqui?
y como usar
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>
actualización 1
después de la depuración, me he dado cuenta de que debajo del método getOptions de toastr.js se reemplaza ''positionclass: toast-bottom-full-width'' a ''toast-top-right''
function getOptions() {
return $.extend({}, defaults, toastr.options);
}
actualización 2 La línea 140 en toastr.js no está extendiendo con éxito m optionsOverride en las opciones.
if (typeof (map.optionsOverride) !== ''undefined'') {
options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
actualización 3 El problema de la posición se ha solucionado, pero debo mencionar la clase de posición 3 veces como se indica a continuación. Estoy seguro de que hay una manera menos ruidosa de lograr esto.
$(''#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"'');
});
Parece que no puedo encontrar la versión 2.0.3! La última versión es 1.4.1 ver esto
Terminé cambiando el valor codificado para positionClass en ''angular-toastr.tpls.js''
¡Ahora se está centrando correctamente!
Puede configurarlo así, como se muestra en la demostración toastr: http://codeseven.github.io/toastr/ o esta demostración: 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 definitivamente hay un error aquí ...
Por ejemplo. Configurar las opciones es un poco pegajoso. Los puse dinámicamente justo antes de llamar al tipo de tostada que quiero. La primera vez, las opciones no importan. La siguiente tostada parece recoger las opciones, y luego la tostada después de eso no cambiará.
Por ejemplo
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;
}]);
es un sencillo y sencillo paso para cambiar la posición ... ver más abajo ...
Primero declare la clase de posición antes de mostrar el mensaje.
EX: toastr.options.positionClass = ''toast-bottom-right'';
Luego muestre su mensaje de la siguiente manera:
Command: toastr "éxito"
Espero que funcione bien .... Gracias
Solo lo usé en mi proyecto Laravel ... Pondré mi código aquí si lo entiende ...
<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>
