jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante la biblioteca jQuery JavaScript . jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, utilizaremos la opción de desplazamiento clasificable de jQuery UI. Si la opción de desplazamiento se establece en verdadero, la página se desplaza cuando llega a un borde. Es de tipo booleano y su valor por defecto es true .
Sintaxis:
Inicializar la ordenable con la opción de desplazamiento que tiene el valor booleano específico, que se puede dar como:
$( "Selector" ).sortable({ scroll: false });
-
Para configurar la opción de desplazamiento:
$( "Selector" ).sortable( "option", "scroll", false );
-
Para obtener la opción de desplazamiento:
var scroll = $( "Selector" ).sortable( "option", "scroll" );
Enlace CDN: agregue los scripts de jQuery Mobile necesarios para su proyecto:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src= “https://code.jquery. com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: El siguiente ejemplo ilustra la opción de desplazamiento clasificable de jQuery UI donde hemos establecido la opción de desplazamiento en falso y el evento de inicio se activará y mostrará la opción de desplazamiento actual.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<title>jQuery UI Sortable scroll option</title>
<style>
#sortableList {
list-style-type: none;
}
.geeks {
margin: 10px;
background: lightgreen;
padding: 10px;
border: 1px solid green;
font-size: 25px;
}
</style>
<script>
$(function () {
$('#sortableList').sortable({
start: function (event, ui) {
$("#sortedList").html ($("#sortedList").html()
+"Start event triggered when scroll option is "+
$( "#sortableList" ).sortable( "option",
"scroll" )+"<br>");
},
scroll:false
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable scroll option</h2>
<ul id="sortableList">
<li id="Tutorials" class="geeks">
1.Free Tutorials
</li>
<li id="Articles" class="geeks">
2.Millions of articles
</li>
<li id="Webinars" class="geeks">
3.Webinars by Industry Experts
</li>
<li id="Courses" class="geeks">
4.Live, Online and Classroom Courses
</li>
</ul>
<h2>
<span id='sortedList'></span>
</h2>
</center>
</body>
</html>
Producción:
Opción de desplazamiento ordenable de jQuery UI
Referencia: https://api.jqueryui.com/sortable/#option-scroll
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA