jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. jqxNotification representa un widget de jQuery que se puede usar para mostrar algún contenido de notificación al usuario. El contenido del widget jqxNotification se puede modificar según las necesidades del usuario.
La propiedad de plantilla se utiliza para establecer o devolver la propiedad de plantilla. es decir, esta propiedad se utiliza para establecer o devolver la plantilla de notificación. Acepta valor de tipo string y su valor predeterminado es ‘info’.
Sus posibles valores son los siguientes.
- ‘info’: El color de la notificación es de color azul.
- ‘advertencia’: El color de la notificación es de color naranja.
- ‘éxito’: El color de la notificación es de color verde.
- ‘error’: El color de la notificación es de color rojo.
- ‘mail’: El color de la notificación es de color azul.
- ‘tiempo’: El color de la notificación es de color negro.
- ‘null’: El color de la notificación es de color blanco.
Sintaxis:
- Establezca la propiedad de la plantilla .
$('Selector').jqxNotification({ template : string });
- Devuelve la propiedad de la plantilla .
var template = $('Selector').jqxNotification('template');
Archivos vinculados: descargue https://www.jqwidgets.com/download/ desde el enlace. En el archivo HTML, busque los archivos de script en la carpeta descargada:
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnotification.js”> </script>
Ejemplo : El siguiente ejemplo ilustra la propiedad de la plantilla jqxNotification en jQWidgets:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxnotification.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxNotification template property</h3>
<div id="not">
Notification
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#not").jqxNotification({
position: "top-left",
opacity: 0.9,
autoOpen: true,
autoClose: false,
template: "success",
position: 'center'
});
});
</script>
</body>
</html>
Producción:
