script.aculo.us Controles deslizantes opción setEnabled

La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. Los controles deslizantes son pistas delgadas que permiten al usuario ingresar valores. Se realiza definiendo un rango de valores que el usuario puede seleccionar arrastrando el controlador al valor apropiado.

Conjunto de controles deslizantes Habilitado

Sintaxis:

setEnabled()

Parámetros: Esta función no tiene parámetros.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Include the required scripts -->
    <script type="text/javascript" 
        src="prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="scriptaculous.js?load = slider">
    </script>
  
    <!-- Style the Sliders so that they
        are properly visible -->
    <style type="text/css">
        .track {
            width: 250px;
            background-color: gray;
            height: 5px;
            position: relative;
        }
  
        .track .handle {
            width: 20px;
            height: 10px;
            background-color: green;
            cursor: move;
            position: absolute;
            top: -2px;
        }
  
        .pad {
            padding: 25px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h2>Sliders setEnabled</h2>
  
    <p>
        A disabled slider can be enabled 
        by using the setEnabled() method
        as shown below.
    </p>
  
    <div class="pad">
        <div id="track-hor" class="track">
            <div id="handle-hor" class="handle">
            </div>
        </div>
    </div>
  
    <p>Current Slider 1 Value:
        <span id="out">0</span>
    </p>
  
  
    <div class="pad">
        <div id="track-hor2" class="track">
            <div id="handle-hor2" class="handle">
            </div>
        </div>
    </div>
  
    <button onclick="enableSlider()">
        Enable Second Slider
    </button>
  
    <p>Current Slider 2 Value:
        <span id="out2">0</span>
    </p>
  
    <script type="text/javascript">
  
        // Initialize the slider
        let slider = new Control.Slider('handle-hor',
            'track-hor', {
  
            // Define the range
            range: $R(1, 100),
            disabled: true,
  
            onSlide: (val) => {
                document.querySelector("#out")
                    .textContent = val;
            }
        });
  
        let slider2 = new Control.Slider('handle-hor2',
            'track-hor2', {
  
            // Define the range
            range: $R(1, 100),
            disabled: true,
  
            onSlide: (val) => {
                document.querySelector("#out2")
                    .textContent = val;
            });
  
        function enableSlider() {
  
            // Set the value of the slider
            // to the given value
            slider2.setEnabled();
        }
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *