jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxScrollView se usa para representar un widget que se usa para ver contenido que es más ancho que el área visible delineada por la pantalla del dispositivo. Aquí, los elementos particulares se eligen mediante movimientos de arrastre o haciendo clic/tocando los botones en la parte inferior de jqxScrollView.
La propiedad animationDuration se usa para configurar u obtener la duración de la animación que comienza cuando se cambia la página actual.
Sintaxis:
-
Para configurar la propiedad animationDuration :
$("#jqxScrollView").jqxScrollView({ animationDuration: 4000 }); -
Para obtener la propiedad animationDuration :
var animationDuration = $('#jqxScrollView') .jqxScrollView('animationDuration');
Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css”/>
<script type=”text/javascript” src=”scripts/jquery.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollview.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets jqxScrollView animationDuration . En el siguiente ejemplo, el valor de la propiedad animationDuration se ha establecido en 4000.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css"/>
<script type="text/javascript"
src="scripts/jquery.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxscrollview.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxScrollView animationDuration Property
</h3>
<div id='jqx_Scroll_View'>
<div style="background-color: #006400">
First Screen
</div>
<div style="background-color: #FF0000">
Second Screen
</div>
</div>
<input type="button" style="margin: 28px;"
id="button_for_animationDuration"
value="Navigate to the next page"/>
<script type="text/javascript">
$(document).ready(function () {
$("#jqx_Scroll_View").jqxScrollView({
width: 300,
height: 200,
animationDuration: 4000
});
$("#button_for_animationDuration").jqxButton({
width: 250
});
$("#button_for_animationDuration").jqxButton().
click(function () {
$('#jqx_Scroll_View').
jqxScrollView(
'forward');
});
});
</script>
</center>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxscrollview/jquery-scrollview-api.htm
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA