La interfaz de usuario de jQuery consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery , CSS y HTML . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El método jQuery UI Resizable widget() se usa para invocar el método widget. Este método no acepta ningún parámetro.
Sintaxis:
var widget = $( ".selector" ).resizable( "widget" );
Parámetro: Este método no acepta ningún parámetro.
Enlaces CDN:
<link href=”https:/code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”>
<script src=”https:/code.jquery. com/jquery-1.10.2.js”></script>
<script src=”https:/code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Ejemplo:
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
"https:/code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"https:/code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https:/code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
.container{
width: 170;
}
#right-div{
float: center;
}
#left-div,#right-div
{
width: 150px;
height: 150px;
text-align: center;
border: 2px solid black;
}
</style>
<script>
$(function() {
$( "#right-div" ).resizable();
var widget = $( "#right-div" ).resizable('widget');
console.log(widget)
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Resizable widget() Method</h3>
<div class="container">
<div id="right-div">
<h3 class="gfg">I'm widget</h3>
</div>
</div>
</center>
</body>
</html>
Producción:
- Con efecto redimensionable:
- En consola:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA