Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
El control deslizante se utiliza para especificar el rango de valores cuando arrastramos el control deslizante. Podemos crear el control deslizante para establecer el rango y los usuarios pueden elegir cualquier valor arrastrando el control deslizante. Control deslizante La traducción de valores no lineales se utiliza para enfocar los valores importantes en el control deslizante. Cuando el control deslizante se enfoca en los valores más altos, usamos la función de valor de posición de tipo log y cuando el control deslizante se enfoca en los valores más bajos, usamos la función de valor de posición de tipo pow . En este artículo, discutiremos la traducción de valores no lineales del control deslizante en Foundation CSS.
Foundation CSS Slider Traducción de valores no lineales Atributo:
- data-position-value-function: Se utiliza para enfocar los valores importantes en el control deslizante. Cuando le asignamos una función de registro , se enfocará en valores más altos y cuando le asignamos la función pow , se enfocarán los valores más bajos.
Sintaxis:
<div class="slider"
data-slider
data-position-value-function="VALUE" >
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1" aria-controls="">
</span>
</div>
Ejemplo 1: el siguiente código demuestra la traducción de valores no lineales del control deslizante mediante la función de registro .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Slider Non-linear value translation
</h3>
<strong>
Using log function:
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider"
data-slider
data-position-value-function="log">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
aria-controls="slider-value">
</span>
</div>
</div>
<div>
<input type="number" id="slider-value">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Foundation CSS Slider Traducción de valores no lineales
Ejemplo 2: el siguiente código demuestra la traducción de valores no lineales del control deslizante mediante la función pow .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Slider Non-linear value translation
</h3>
<strong>
Using pow function:
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider"
data-slider
data-position-value-function="pow">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
aria-controls="slider-value">
</span>
</div>
</div>
<div>
<input type="number"
id="slider-value">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Foundation CSS Slider Traducción de valores no lineales
Referencia: https://get.foundation/sites/docs/slider.html#non-linear-value-translation
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA