jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. Tiene más de 60 widgets de interfaz de usuario que ayudan a crear un diseño de interfaz de usuario atractivo.
¿Por qué jQWidgets?
jQWidgets es independiente de la plataforma, compatible con varios navegadores y funciona en diferentes dispositivos, como dispositivos móviles, tabletas y PC. Detecta automáticamente el tipo de dispositivo y la versión del navegador. Es de tamaño pequeño y muy extensible. Podemos cargar los widgets y temas individuales a pedido para optimizar el tiempo de descarga y ahorrar memoria. Todos los jQWidgets están optimizados para una mejor experiencia de usuario para trabajar con los diferentes dispositivos que tienen diferentes sistemas operativos y versiones de navegadores.
Descarga e instalación: existen dos formas de instalar jQWidgets.
Método 1: descargue el archivo jQWidget en formato zip desde el siguiente enlace. Después de descargar el archivo zip, extraiga los archivos y guárdelos en la carpeta. Después de eso, cree un nuevo archivo HTML y agregue el código jQWidget en el archivo e incluya el enlace del widget dentro de la sección principal.
https://www.jqwidgets.com/download/
Método 2: Instalar jQWidgets usando npm. Asegúrese de haber instalado Node.js y npm .
-
Abra el símbolo del sistema de Node.js y ejecute el siguiente comando:
npm install jqwidgets-framework - demos & scripts or npm install jqwidgets-scripts - scripts or npm install jqwidgets-ng - angular modules
-
Para obtener la información del paquete jQWidget npm, use el siguiente comando:
npm info jqwidgets-framework
Comprendamos el funcionamiento de JQWidgets a través de un ejemplo.
Ejemplo: El siguiente ejemplo ilustra la propiedad deshabilitada jqxButton en jQWidgets.
HTML
<!DOCTYPE html>
<html>
<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 jqxButton disabled Property
</h3>
<br />
<input type="button" id="jqxBtn"
style="padding: 5px 20px;"
value="Click here" />
<div id="log"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxBtn").jqxButton({
width: "100px",
height: "60px",
disabled: true,
});
var d = $("#jqxBtn").jqxButton("disabled");
$("#log").text("Button disabled: " + d);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA