EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
En este artículo, aprenderemos a diseñar un control deslizante con jQuery EasyUI. El control deslizante. El tipo y el rango del control deslizante se pueden personalizar en las opciones del control deslizante.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-slider">
Propiedades:
- ancho: Es el ancho del control deslizante.
- altura: Es la altura del control deslizante.
- mode: Indica qué tipo de slider.
- invertido: cuando esta propiedad se establece en verdadero, los valores mínimo y máximo se invertirán.
- showTip: Define si mostrar información de tips.
- disabled: Define si deshabilitar el control deslizante.
- rango: Define si mostrar el control deslizante de rango.
- valor: Define el valor por defecto.
- min: Define el valor mínimo permitido.
- max: Define el valor máximo permitido.
- Paso: Define el valor por el cual el deslizador aumenta o disminuye.
- regla: Define la etiqueta al lado del deslizador.
- tipFormatter: es una función para formatear el valor del control deslizante.
- convertidor: es la función de convertidor que permite a los usuarios determinar cómo convertir un valor a la posición del control deslizante.
Evento:
- onChange: Se dispara cuando se cambia el valor del campo.
- onSlideStart: se activa cuando se comienza a arrastrar el control deslizante.
- onSlideEnd: se activa cuando el control deslizante ha terminado de arrastrarse.
- onComplete: se activa cuando el usuario cambia el valor del control deslizante.
Métodos:
- opciones: Devuelve las opciones del control deslizante.
- destroy: Destruye el objeto slider.
- redimensionar: Establece el tamaño del control deslizante.
- getValue: Obtiene el valor del control deslizante.
- getValues: obtiene la array de valores del control deslizante.
- setValue: establece el valor del control deslizante.
- setValues: establece el valor del control deslizante en forma de array.
- clear: Borra el valor del slider.
- reset: Restablece el valor del control deslizante.
- enable: Habilita el componente slider.
- disabled: Deshabilita el componente slider.
Enlace CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Ejemplo 1:
HTML
<html> <head> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!-- jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!-- jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!-- jQuery library of EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <h3>EasyUI jQuery slider widget</h3> <!-- Define the EasyUI slider with markup --> <input id="gfg" class="easyui-slider"> </body> </html>
Producción:
Ejemplo 2:
HTML
<html>
<head>
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet"
type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet"
type="text/css"
href="themes/mobile.css">
<link rel="stylesheet"
type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery slider widget</h3>
<div style="padding: 25px">
<!-- Define the element that will
created as the slider -->
<input id='gfg'>
</div>
<script type="text/javascript">
// Initialize the EasyUI slider
$('#gfg').slider({
height: "250px",
mode: 'v',
min: 0,
max: 9,
showTip: true
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jeasyui.com/documentation/slider.php