jQuery Mobile es un conjunto de herramientas de widgets de interacción con el sistema del usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. En este artículo, aprenderemos sobre el método de actualización de Mobile Rangeslider() .
Se utiliza un Rangeslider para obtener los datos en el rango dado. Tiene dos valores, el primer valor representa el rango inferior y el último valor representa el rango superior. El método refresh() se utiliza para volver a representar el control deslizante de rango creado.
Sintaxis :
$('selector').rangeslider('refresh');
Parámetros: este método no acepta ningún parámetro.
Vínculos CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src =”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.5.0-alpha. 1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
Ejemplo: En este ejemplo, primero cambiamos los valores del control deslizante de rango y luego invocamos el método refresh() para actualizar el control deslizante a los valores correctos.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
<script>
$(document).ready(function () {
// Only refresh the values
$("#changeBtn").on('click', function () {
$("#range-slider-1").val(9);
$("#range-slider-2").val(68);
});
// Update the slider to reflect the new values
$("#refreshBtn").on('click', function () {
$("#GFG").rangeslider("refresh");
alert("Refreshed");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1 style="text-align: center;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
jQuery Mobile Rangeslider
refresh() Method
</h3>
</div>
<div role="main" class="ui-content">
<div data-role="rangeslider" id="GFG">
<label for="range-slider-1">
Rangeslider:
</label>
<input name="range-slider-1"
id="range-slider-1" min="0"
max="100" value="30" type="range">
<label for="range-slider-2">
Rangeslider:
</label>
<input name="range-slider-2"
id="range-slider-2" min="0"
max="100" value="96" type="range">
</div>
<input type="button" id="changeBtn"
style="width: 250px;"
value="Change slider values">
<input type="button" id="refreshBtn"
style="width: 250px;"
value="Refresh">
</div>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/rangeslider/#method-refresh
Publicación traducida automáticamente
Artículo escrito por manojkumarreddymallidi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA