Introducción: jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. jqxProgressBar se usa para representar un widget de barra de progreso de jQuery que indica visualmente el progreso de una operación larga.
La propiedad de plantilla se utiliza para establecer o devolver la plantilla como alternativa a los estilos predeterminados. Acepta valor de tipo String y su valor predeterminado es ‘predeterminado’.
Sus valores posibles son los siguientes
- ‘ default’: Es la plantilla por defecto y su estilo depende del valor de la propiedad “theme”.
- ‘primary’: Establece el estilo azul oscuro para un peso visual extra.
- ‘éxito’: Establece el estilo verde para una acción exitosa o positiva.
- ‘warning’: Establece el estilo naranja que representa precaución.
- ‘peligro’: Establece el estilo rojo que representa la acción peligrosa o negativa.
- ‘info’: Fija el botón azul, no ligado a una acción o uso semántico.
Sintaxis:
Establezca la propiedad de la plantilla .
$('selector').jqxProgressBar({ template: String });
Devuelve la propiedad de la plantilla .
var template = $('selector').jqxProgressBar('template');
Archivos vinculados: descargue jQWidgets desde el enlace. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<enlace 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/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxprogressbar.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad de la plantilla jqxProgressBar 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/jqx-all.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxprogressbar.js"></script>
<style>
h1,
h3 {
text-align: center;
}
#jqxPB {
margin-left: 40%;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxProgressBar template Property
</h3>
<div id='jqxPB'></div>
<script type="text/javascript">
$(document).ready(function() {
$("#jqxPB").jqxProgressBar({
value: 60,
width: 250,
height: 30,
template: 'success'
});
});
</script>
</body>
</html>
Producción:
