Tabla de contenido
Introducción
toastr.js es un complemento de mensajes emergentes muy conciso, la razón principal es que sus scripts y archivos de estilo son pequeños.
Y puede modificar el archivo de estilo según sus propias necesidades, que se pueden aplicar en muchos escenarios diferentes.
https://codeseven.github.io/toastr/
https://github.com/CodeSeven/toastr
1. Preparación
Se deben introducir tres archivos antes de llamar al complemento tostador:
jquery.js,toastr.js,toastr.css
Por ejemplo, es posible importar a través de un CDN:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
2. Fácil de usar
Después de la introducción, simplemente puede llamar directamente a través de toastr.xxx y seleccionar el cuadro emergente correspondiente según el tipo de mensaje. Por ejemplo:
Nota: El segundo parámetro es el título, y se puede modificar el estilo, que se presentará a continuación.
toastr.info("请阅读当前提示信息！")
toastr.info("请阅读当前提示信息！","信息")
toastr.success("恭喜，操作成功了！")
toastr.success("恭喜，操作成功了！", "成功")
toastr.warning("注意，这是一条警告信息！")
toastr.warning("注意，这是一条警告信息！", "警告")
toastr.error("操作失败了！");
toastr.error("操作失败了！", "失败");
// toastr.clear();// 移除所有,有动画效果
// toastr.remove();// 移除所有，没有动画效果
La ventana emergente se parece a:
Nota: Cuando el mouse bloquea el enfoque, el color se acentuará, como se muestra en el cuadro de viñetas de éxito con el título a continuación.
3. Uso avanzado
Puede personalizar el estilo del cuadro de viñetas modificando el archivo de estilo toastr.css.
Ejemplo 1: Modificar el color de la ventana emergente y el estilo del título
Como se muestra en la figura a continuación, puede modificar el valor del color de fondo del cuadro de viñetas de color de fondo correspondiente y agregar el estilo de tamaño de fuente.
Efecto:
Ejemplo 2: personalizar las acciones emergentes modificando los elementos de configuración
var messageOpts = {
"closeButton": true,// 是否显示关闭按钮
"progressBar":true,// 是否显示进度条
"positionClass": "toast-bottom-left",// 弹出窗的位置
"showDuration": "1000",// 显示的动画时间
"hideDuration": "1000",// 消失的动画时间
"timeOut": "6000",// 弹窗展现时间
"showEasing": "swing",//显示时的动画缓冲方式
"hideEasing": "linear",//消失时的动画缓冲方式
"showMethod": "fadeIn",//显示时的动画方式
"hideMethod": "fadeOut", //消失时的动画方式
"allowHtml":true,// 允许弹窗内容包含 HTML 语言
};
toastr.options = messageOpts;
toastr.warning("注意，这是一条警告信息！", "警告")
Estilo emergente:
Ejemplo 3: personalizar la posición de visualización del cuadro emergente
Personalice un estilo de ventana emergente que se muestra en el medio de la página de la siguiente manera: (la posición que se muestra se puede ajustar de manera flexible)
"positionClass": "toast-center-center",// 弹出窗的位置配置
4. Explicación detallada de los elementos de configuración de opciones
Los siguientes son ejemplos de elementos de configuración de uso común:
| 1 | 2 | 3 |
|---|---|---|
| boton cerrar | Ya sea para mostrar el botón de cerrar | [falso predeterminado] verdadero: mostrar; falso: no mostrar |
| barra de progreso | si mostrar la barra de progreso | [falso predeterminado] verdadero: mostrar; falso: no mostrar |
| positionClass | La posición de visualización del cuadro emergente | [predeterminado tostada-superior-derecha superior derecha] tostada-superior-izquierda: superior izquierda tostada-superior-derecha: superior derecha tostada-superior-centro: superior central tostada-superior-ancho-completo: superior central (ancho completo) tostada- inferior derecha: parte inferior derecha tostada-inferior-izquierda: parte inferior izquierda tostada-inferior-centro: parte inferior central tostada-inferior-ancho-completo: parte inferior central (ancho completo) |
| showDuration | Mostrar duración de la animación | 【Predeterminado 300ms】unidad: milisegundo |
| ocultarDuración | Desaparecer la duración de la animación | [Predeterminado 1000ms] Unidad: milisegundo |
| se acabó el tiempo | tiempo de visualización emergente | 【Predeterminado 5000ms】unidad: milisegundo |
| tiempo de espera extendido | Después de perder el foco del mouse, vuelva a mostrar la hora | [Predeterminado 1000ms] Unidad: milisegundo |
| onMostrado | La acción desencadenada cuando se muestra la ventana emergente | brindis.opciones.onMostrado = function() { console.log('hola'); } |
| onHidden | La acción desencadenada cuando la ventana emergente desaparece automáticamente | brindis.opciones.onHidden = function() { console.log('adiós'); } |
| al hacer clic | La acción desencadenada cuando se hace clic en la ventana emergente | brindis.opciones.onclick = function() { console.log('clic'); } |
| onCloseClick | La acción desencadenada cuando la ventana emergente se cierra manualmente | toastr.options.onCloseClick = function() { console.log('botón de cierre presionado'); } |
| matar para descartar | Haga clic si el cuadro emergente desaparece inmediatamente | [Verdadero predeterminado] verdadero: desaparece inmediatamente; falso: no desaparece |
Además, la prueba maxOpened no es válida y no aparecerá en la lista por ahora.