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. El jqxExpander representa un widget jQuery que muestra las secciones de encabezado y contenido. Haga clic en la sección del encabezado para expandir o contraer el contenido.
La propiedad del tema se usa para establecer o devolver el tema para el widget jqxExpander. Acepta valor de tipo string y su valor predeterminado está vacío («»). Para usar esta propiedad, primero, debemos incluir la hoja de estilo del tema (jqx.energyblue.css) en la sección del encabezado. El archivo del tema incluye después del archivo » jqx.base.css «.
Sintaxis:
$('selector').jqxExpander({ theme: String });
Archivos vinculados: descargue jQWidgets desde el enlace dado. 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” />
<enlace rel=”hoja de estilo” href=”jqwidgets/styles/jqx.energyblue.css” tipo =”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/jqxexpander .js”></secuencia de comandos>
Ejemplo: El siguiente ejemplo ilustra la propiedad del tema jQWidgets jqxExpander .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.energyblue.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/jqxexpander.js"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxExpander theme Property
</h3>
<div id='jqxExp'>
<div>GeeksforGeeks</div>
<div style="text-align: justify;">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, ...
</div>
</div>
</center>
<script type="text/javascript">
$(document).ready(function() {
$("#jqxExp").jqxExpander({
width: 250,
height: 150,
theme: 'energyblue'
});
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxexpander/jquery-expander-api.htm
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA