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 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.
InPlaceEditor guardando Texto el texto que se mostrará mientras se envía el texto al servidor para guardarlo Guardando…
Sintaxis:
{ savingText : value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: Esta es una string que especifica el texto que se mostrará mientras se envía el texto al servidor. es «Guardar…»
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
// Simulate the time taken by
// the server
sleep(1);
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 savingText
// option changed to a custom value
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the text to be used
// while sending to server
savingText: "Saving the contents..."
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor savingText Option</h2>
<p>
The "savingText" option is used to
specify the text to be shown when the
text is being saved.
</p>
<b>
This element has the savingText as
the default one.
</b>
<div id="editableElement">Click to edit</div>
<br>
<b>
This element has the savingText
set to a custom value.
</b>
<div id="editableElement2">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