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 las 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, vamos a aprender la opción de clases filtrables de jQuery Mobile . La opción de clases se usa para especificar clases adicionales para agregar a los elementos del widget.
Sintaxis:
Inicialice el filtrable con la opción de clases especificada, cambiando la temática para la clase filtrable de interfaz de usuario.
$( ".selector" ).filterable({ children: ".my-children" });
-
Obtener una propiedad de la opción de clases:
var themeClass = $( ".selector" ) .filterable( "option", "classes.ui-filterable" ); -
Obtener una propiedad de la opción de clases:
$( ".selector" ).filterable( "option", "classes.ui-filterable", "highlight" );
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code .jquery.com/jquery-1.11.0.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo: este ejemplo demuestra la opción de clases filtrables de jQuery Mobile.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script>
$(document).ready(function () {
$(".items").filterable({});
$(".btnclass").bind("click", function () {
var classes = $( ".items" ).filterable(
"option", "classes.ui-filterable" );
$("#divID").html("<b>Classes:" +
classes + "</b>"
);
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>
jQuery Mobile Filterable classes Option
</h3>
</div>
<div role="main" class="ui-content">
<div >
<ul class="items" style="list-style-type:none;">
<li>
<a href="https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
</div>
</div>
<input type="button" Value="Classes Option"
class="btnclass" />
<br>
<div id="divID"></div>
</div>
</center>
</body>
</html>
Producción:
Opción de clases filtrables de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#option-classes
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA