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.
InPlaceEditor HighlightColor el color que se usará cuando el usuario se desplace sobre un elemento editable.
Sintaxis:
{ highlightColor : 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 que se usará cuando el usuario se desplace sobre un elemento editable.
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 a custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the color to
// be used to highlight the
// element
highlightColor: "#00FF00"
}
);
// InPlaceEditor with a custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement3',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the color to
// be used to highlight the
// element
highlightColor: "#FF00FF"
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor highlightColor Option</h2>
<p>
The "highlightColor" option is used to
specify the color to be used when the
user hovers over the editable element.
</p>
<b>
This element has the highlightColor
as the default one.
</b>
<div id="editableElement">
Hover over this element to
see the highlightColor.
</div>
<br>
<b>
This element has the highlightColor
set to a custom color.
</b>
<div id="editableElement2">
Hover over this element to
see the highlightColor.
</div>
<br>
<b>
This element has the highlightColor
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