La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El Ajax.InPlaceEditor se usa para hacer que los elementos sean editables, lo que permite al usuario editar contenido en la página y enviar los cambios al servidor.
Filas de InPlaceEditor número de filas que se mostrarán en InPlaceEditor. Cualquier valor superior a «1» daría como resultado un área de texto de varias líneas como área de entrada.
Sintaxis:
{ rows: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: .
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo: Se requiere el siguiente script para simular el guardado de datos en el servidor.
PHP
<?php
if( isset($_REQUEST["value"]) ) {
$str = $_REQUEST["value"];
echo $str;
}
?>
El siguiente script demuestra esto con el ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = controls">
</script>
<script type="text/javascript">
window.onload = function () {
// Default InplaceEditor with no
// options
new Ajax.InPlaceEditor(
'editableElement',
'http://localhost/tmpscripts/inplace.php',
);
// InplaceEditor with the rows
// option changed to a custom value
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the number of rows
// to be used in the InplaceEditor
rows: 3
}
);
// InplaceEditor with the rows
// option changed to a custom value
new Ajax.InPlaceEditor(
'editableElement3',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the number of rows
// to be used in the InplaceEditor
rows: 8
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor rows Option</h2>
<p>
The "rows" option is used to specify
the number of rows to be used in the
InPlaceEditor.
</p>
<b>
This element has the rows as the
default one.
</b>
<div id="editableElement">Click to edit</div>
<br>
<b>This element has the rows set to 3 rows.</b>
<div id="editableElement2">Click to edit</div>
<br>
<b>This element has the rows set to 8 rows.</b>
<div id="editableElement3">Click to edit</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA