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 jqxToolBar se usa para ilustrar un widget jQuery que muestra una barra de herramientas donde varias herramientas se pueden agregar espontáneamente. Además, de forma predeterminada, jqxToolBar favorece algunos widgets, a saber, jqxButton, jqxToggleButton, jqxDropDownList, jqxComboBox y jqxInput. Sin embargo, las herramientas personalizadas también se pueden agregar.
El método addTool() se usa para agregar una herramienta al jqxToolBar que se muestra. No devuelve nada.
Sintaxis:
$('#Selector').jqxToolBar('addTool', "button", "first", false,
function (type, tool, menuToolIninitialization) {
var width = 90;
if (menuToolIninitialization === true) {
width = "100%";
}
tool.text("New_Button");
tool.jqxButton({ width: width });
});
Parámetros:
- Tipo: Es el tipo declarado de la nueva herramienta. Donde, los valores posibles pueden ser un botón, una lista desplegable, un botón de alternancia, un cuadro combinado, una entrada y también personalizados. Es de tipo string.
- Posición: Es la posición indicada donde se va a insertar la herramienta. Los valores posibles aquí son primero y último. Es de tipo string.
- Separador: Indica si se va a incluir un separador después de la nueva herramienta. Y los posibles valores aquí son verdadero y falso. Es de tipo booleano.
- Función de devolución de llamada de inicialización: es la función de devolución de llamada indicada que se invocará después de que se haya inicializado la nueva herramienta. Es de tipo función. Aquí, se pueden pasar tres parámetros que son los siguientes:
- tipo: Es el tipo indicado de la herramienta.
- herramienta: es un objeto jQuery declarado que representa la herramienta.
- menuToolIninitialization: indica si la función de devolución de llamada se invoca para la herramienta de la barra de herramientas, es decir, falso o para la herramienta del menú emergente, es decir, verdadero. Es de tipo booleano.
Archivos vinculados: descargue https://www.jqwidgets.com/download/ desde el enlace proporcionado. 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/jqxbuttons.js”> </script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type= ”texto/javascript” src=”jqwidgets/jqxinput.js”></script>
<tipo de secuencia de comandos = «texto/javascript» src = «jqwidgets/jqxtoolbar.js»></secuencia de comandos>
El siguiente ejemplo ilustra el método jqxToolBar addTool() en jQWidgets.
Ejemplo:
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/jqxbuttons.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxinput.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxtoolbar.js"></script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxToolBar addTool() method
</h3>
<div id="jqxtb"></div>
<div>
<input type="button" id="jqxBtn"
style="margin-top: 25px"
value="Click here" />
</div>
<br>
<div id="log"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxtb").jqxToolBar({
width: "100%",
theme: "energyblue",
height: 70,
tools:
"button button | dropdownlist combobox | input",
initTools:
function (type, index, tool,
menuToolIninitialization) {
switch (index) {
case 0:
tool.text("Button1");
break;
case 1:
tool.text("Button2");
break;
case 2:
tool.jqxDropDownList({
width: 100,
source: ["Java", "Scala", "C++"],
selectedIndex: 2
});
break;
case 3:
tool.jqxComboBox({
width: 60,
source: [4, 5, 8, 10, 15],
selectedIndex: 3
});
break;
case 4:
tool.jqxInput({
width: 140,
placeHolder: "Search..."
});
break;
}
}
});
$("#jqxBtn").jqxButton({
width: "140px",
height: "30px",
});
$("#jqxBtn").on("click", function () {
$('#jqxtb').jqxToolBar('addTool',
"button", "first", true,
function (type, tool, menuToolIninitialization) {
var width = 90;
if (menuToolIninitialization === true) {
width = "90%";
}
tool.text("Button0");
tool.jqxButton({
width: width
});
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nidhi1352singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA