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. jqxTagCloud se usa para mostrar un conjunto de etiquetas generadas por el usuario que acompañan a los artículos, publicaciones o videos en un sitio web.
La propiedad minColor se utiliza para establecer u obtener la propiedad minColor para especificar el color de las etiquetas de los elementos con el atributo de valor más bajo. Esta propiedad, junto con la propiedad maxColor , establecerá el color de las etiquetas en forma de gradiente según su atributo de valor hacia el valor más alto. Sus valores posibles son todos los colores compatibles con el navegador, incluido el rgba.
Sintaxis:
-
Para establecer la propiedad minColor .
$('#jqxTagCloud').jqxTagCloud({ minColor: 'black' }); -
Para obtener la propiedad minColor .
var value = $('#jqxTagCloud').jqxTagCloud({ 'minColor' });
Archivos vinculados: descargue jQWidgets desde el enlace dado. 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.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtagcloud.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets jqxTagCloud minColor . En el siguiente ejemplo, el valor de la propiedad minColor se ha establecido en ‘negro’.
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.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdata.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxtagcloud.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTagCloud minColor Property
</h3>
<div id="Tag_Cloud"></div>
<input type="button" style="margin:28px;"
id="button_for_minColor"
value="Value of the minColor property"/>
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
var Data_for_TagCloud = [
{ Name: "GFG", Rating: 4 },
{ Name: "is a", Rating: 3 },
{ Name: "CS", Rating: 2 },
{ Name: "Portal.", Rating: 5 },
];
var dataAdapter = new
$.jqx.dataAdapter({
localData: Data_for_TagCloud
});
$('#Tag_Cloud').jqxTagCloud({
width: 450,
source: dataAdapter,
displayMember: 'Name',
valueMember: 'Rating',
maxColor: 'red',
minColor: 'black'
});
$("#button_for_minColor").
jqxButton({
width: 300
});
$("#button_for_minColor").jqxButton().
click(function () {
var Value_of_minColor =
$('#Tag_Cloud').jqxTagCloud('minColor');
$("#log").html((Value_of_minColor));
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA