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 clickToEditText para que se muestre cuando el usuario pasa el mouse sobre el elemento editableHaga clic para editar”.
Sintaxis:
{ clickToEditText : string }
Valor: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- string: esta es una string que especifica el texto que se mostrará cuando el usuario pase el mouse sobre el elemento editable. es «Haga clic para editar».
El siguiente ejemplo ilustra el uso de la opción clickToEditText de InPlaceEditor.
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 a modified
// clickToEditText value
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the text to be used for
// the hover text of the editor
clickToEditText:
"Click here to start editing"
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor clickToEditText Option</h2>
<p>
The "clickToEditText" option is used to
specify the text to be shown when the user
hovers the mouse over the editable element.
</p>
<b>This element has the clickToEditText as
the default one.</b>
<div id="editableElement">
Hover over this element to see the
clickToEditText value.
</div>
<br>
<b>
This element has the clickToEditText
set to a custom value.
</b>
<div id="editableElement2">
Hover over this element to see the
clickToEditText value.
</div>
</body>
</html>
El siguiente script es el archivo PHP requerido para simular el guardado de datos en el servidor.
PHP
<?php
if( isset($_REQUEST["value"]) ) {
$str = $_REQUEST["value"];
echo $str;
}
?>
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