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 jqxDropDownButton se usa para ilustrar un widget de jQuery que contiene una cantidad de elementos seleccionables y expandibles que se muestran en el botón desplegable.
La propiedad de plantilla se usa para especificar la plantilla del botón desplegable que se muestra, que se usa como una opción de los estilos predeterminados. Es de tipo string y el valor predeterminado es ‘predeterminado’.
Hay varios valores posibles que son aplicables con la propiedad de plantilla que se proporciona a continuación:
- default : como sugiere el nombre, esta es la plantilla predeterminada. El estilo dependerá únicamente del valor de la propiedad «tema».
- primario: para mostrar un peso visual adicional, utiliza un azul oscuro para el estilo.
- éxito: para mostrar la acción exitosa o positiva, utiliza el color verde para el estilo.
- advertencia: El estilo naranja se usa para indicar precaución.
- peligro: para indicar una acción peligrosa o negativa, utiliza el color rojo para el estilo
- info: Es un botón azul que no está ligado a una acción o uso semántico.
Sintaxis:
- Se utiliza para establecer la propiedad de la plantilla.
$("Selector").jqxDropDownButton({ template: 'primary'});
- Se utiliza para obtener la propiedad de la plantilla.
var template = $('Selector').jqxDropDownButton('template');
Archivos vinculados: descargue jQWidgets desde el enlace. 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/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js ”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad de plantilla jqxDropDownButton 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/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>jQWidgets jqxDropDownButton template property</h3>
<br />
<div>
<input
type="button"
id="jqxBtn"
style="margin-bottom: 25px"
value="Please click here"/>
</div>
<div id="log"></div>
<div style="float: center" id="jqxDdB">
<div id="jqxT">
<ul>
<li>GFG</li>
<li>Languages
<ul>
<li>C</li>
<li>Java</li>
</ul>
</li>
<li>Subjects
<ul>
<li>Data Structutre</li>
<li>Algorithm</li>
</ul>
</li>
</ul>
</div>
</div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxBtn").jqxButton({
width: "200px",
height: "40px",
});
$("#jqxDdB").jqxDropDownButton({
height: "25px",
width: "70px",
template: "danger",
});
$("#jqxT").jqxTree({});
$("#jqxDdB").jqxDropDownButton("setContent", "Select");
$("#jqxBtn").on("click", function () {
var temp = $("#jqxDdB").jqxDropDownButton("template");
$("#log").html("Template name: " + temp);
});
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbutton/jquery-button-api.htm?search=
Publicación traducida automáticamente
Artículo escrito por nidhi1352singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA