jQuery UI es una tecnología basada en la web y consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, JavaScript Library. 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, utilizaremos el método de instancia() de jQuery UI Resizable para recuperar el objeto de instancia de tamaño variable. Si el elemento no tiene ninguna instancia asociada, se devuelve undefined. No acepta ningún parámetro para su funcionamiento.
Sintaxis:
var Instance = $( ".selector" ).resizable( "instance" );
Parámetro: Este método no acepta ningún parámetro.
Tipo de devolución: este método devuelve un valor de objeto que contiene el objeto de instancia del tamaño variable.
Enlace CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts a su proyecto.
<link 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: Este ejemplo describe los usos del método jQuery UI Resizable instance().
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/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>
<style>
h1 {
color: green;
}
.container {
width: 320px;
}
#resizable-div {
width: 150px;
height: 150px;
text-align: center;
border: 2px solid black;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var instances = $("#resizable-div")
.resizable("instance");
document.getElementById('GFG').innerHTML
+= "Instance Value: " +
Object.keys(instances).length;
});
});
$(function () {
$("#resizable-div").resizable();
$("#resizable-div").resizable('enable');
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Resizable instance() Method</h3>
<div class="container">
<div id="resizable-div">
<h3 class="gfg" style = "color:green;">
I'm Enable
</h3>
</div>
</div>
<br>
<input type="button"
id="btn"
style="width: 200px; height: 40px; font-size : 20px;"
value="Instance">
<h4><span id="GFG"></span></h4>
</center>
</body>
</html>
Producción:
jQuery UI Instancia redimensionable() Método
Referencia: https://api.jqueryui.com/resizable/#method-instance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA