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.
La opción de resaltadoEndColor de InPlaceEditor se usa para especificar el color al que se desvanece el resaltado del elemento editable. El color debe especificarse en seis dígitos hexadecimales. La string de color predeterminada es «#FFFFFF».
Sintaxis:
{ highlightEndColor : color }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- color: esta es una string que especifica el color al que se desvanece el resaltado del elemento editable. la string es ”#FFFFFF”.
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
<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 custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the color to
// be used to fade the
// highlight of the element
highlightEndColor: "#FF0000"
}
);
// InPlaceEditor with a custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement3',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the color to
// be used to fade the
// highlight of the element
highlightEndColor: "#00FFEC"
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor highlightEndColor Option</h2>
<p>The "highlightEndColor" option is used
to specify the color that the highlight
of the editable element fades to.</p>
<b>This element has the highlightEndColor
as the default one.</b>
<div id="editableElement">Hover over this
element to see the highlightColor.</div>
<br>
<b>This element has the highlightEndColor
set to a custom color.</b>
<div id="editableElement2">Hover over this
element to see the highlightColor.</div>
<br>
<b>This element has the highlightEndColor
set to a another custom color.</b>
<div id="editableElement3">Hover over this
element to see another highlightColor.</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