jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, usaremos la opción jQuery Mobile Listview autodividersSelector. Esta opción viene dada por la extensión “ listview.autodividers” y el valor de esta opción es una función que devuelve una string. Recibe un objeto de colección jQuery que contiene un elemento. Calcula la string devuelta del elemento. Se llama a la función para cada elemento de la lista en la secuencia, y se crea un divisor cada vez que la función devuelve un valor para un elemento de la lista que es diferente del valor que devolvió para el elemento de la lista anterior.
Sintaxis:
Inicializando Listview con la opción autodividersSelector .
$( ".selector" ).listview({
autodividersSelector: function ( li ) {
var out = /* generate a string */;
return out;
}
});
Obtener la opción autodividersSelector .
var autodividersSelector = $( ".selector" ) .listview( "option", "autodividersSelector" );
Enlace CDN: agregue los siguientes scripts de jQuery Mobile que necesitará en su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=” //code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile- 1.5.0-alpha.1.min.js”></secuencia de comandos>
Ejemplo: Este ejemplo demuestra la opción jQuery Mobile Listview autodividersSelector.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Listview
autodividersSelector Option</h3>
<div id="divID">
<div role="main" class="ui-content">
<ul data-role="listview">
<li>
<a href="index.html">
GeeksforGeeks
</a>
</li>
<li><a href="index.html">GFG</a></li>
<li><a href="index.html">gfg</a></li>
</ul>
</div>
</div>
<input type="button" id="Button"
value="Value of the autodividersSelector Option">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#divID").listview({
autodividers: true,
autodividersSelector: function ( li ) {
var out = "autodividersSelector";
return out;
}
});
$("#Button").on('click', function () {
var a = $("#divID").listview(
"option", "autodividersSelector"
);
$("#log").html(a);
});
});
</script>
</body>
</html>
Producción:
jQuery Mobile Listview autodividersSelector option
Referencia: https://api.jquerymobile.com/listview/#option-autodividersSelector
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA