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. La barra de navegación jqxse utiliza para representar un widget de jQuery que tiene secciones de encabezado y contenido. Al hacer clic sobre el encabezado, el contenido se expandirá o colapsará según corresponda.
losinitContentLa propiedad se usa como una función de devolución de llamada que se llama cuando el contenido de un elemento debe inicializarse. Aquí, el argumento de índice muestra qué elemento se inicializa.
Sintaxis:
Establezca la propiedad initContent :
$("Selector").jqxNavigationBar({
initContent: function (index) {
$("#jqxButton").jqxButton({
$('#jqxbutton_for_initContent')
.on('click', function () {
$('#jqx_Navigation_Bar')
.jqxNavigationBar('disable');
});
});
}
});
Devuelve la propiedad initContent :
var initContent =
$('Selector').jqxNavigationBar('initContent');
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/jqxexpander.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnavigationbar.js”></script>
Ejemplo: El siguiente ejemplo ilustra jQWidgets jqxNavigationBarpropiedad initContent utilizada para deshabilitar la barra de navegación.
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/jqxexpander.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxnavigationbar.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxNavigationBar initContent Property
</h3>
<div id="jqx_Navigation_Bar" style="margin: 25px;"
align="left">
<div>First Header</div>
<div>
<h8>Content for the first header</h8>
<ul>
<li>GFG</li>
<li>CSE</li>
</ul>
</div>
<div> Second Header</div>
<div>
<input type="button" style="margin: 29px;"
id="jqxbutton_for_initContent"
value="Disable"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqx_Navigation_Bar").
jqxNavigationBar({
width: 250,
height: 132,
initContent: function (index) {
if (index === 0) {
$('#jqxbutton_for_initContent').
on('click', function () {
$('#jqx_Navigation_Bar').
jqxNavigationBar(
'disable');
});
}
}
});
$("#jqxbutton_for_initContent").
jqxButton({
width: 100,
});
});
</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