El script.aculo.us es una biblioteca de navegador cruzado que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El Ajax.InPlaceEditor se utiliza para hacer que los elementos sean editables, lo que permite al usuario editar el contenido de la página y enviar los cambios al servidor.
La opción de tamaño de InPlaceEditor se utiliza para definir el ancho del campo editable.
Sintaxis:
{ size: value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: Este es un número que define el ancho del campo editable.
Ejemplo:
Para demostrar el uso de esta función, consulte el siguiente código. La parte JavaScript del código creará un editor en el lugar para elementos específicos. Al hacer clic en Haga clic en mí para el tamaño 10 , verá el editor en el lugar junto con el tamaño establecido.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<p id="editme1">Click me for size 10</p>
<p id="editme2">Click me for size 50</p>
<p id="editme3">Click me for size 100</p>
<!-- JavaScript part to initialize the objects -->
<script type="text/javascript">
new Ajax.InPlaceEditor('editme1',
'test.html', { size: 10 });
new Ajax.InPlaceEditor('editme2',
'test.html', { size: 50 });
new Ajax.InPlaceEditor('editme3',
'test.html', { size: 50 });
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
test.html El siguiente código es el contenido del archivo «test.html» utilizado en el código HTML anterior.
<!DOCTYPE html> <html> <body> GeeksforGeeks </body> </html>