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 cols número de columnas que se mostrarán en InPlaceEditor. Esta propiedad funciona tanto para la entrada de área de una sola línea como para la de varias líneas.
Sintaxis:
{ cols: 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
<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 cols
// option changed to a custom value
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the number of columns
// to be used in the InplaceEditor
cols: 5
}
);
// InplaceEditor with the cols
// option changed to a custom value
new Ajax.InPlaceEditor(
'editableElement3',
'http://localhost/tmpscripts/inplace.php',
{
// Specify the number of columns
// to be used in the InplaceEditor
cols: 60
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor cols Option</h2>
<p>The "cols" option is used to specify
the number of columns to be used in
the InPlaceEditor.</p>
<b>This element has the cols as the
default value.</b>
<div id="editableElement">Click to edit</div>
<br>
<b>This element has the cols set to 5.</b>
<div id="editableElement2">Click to edit</div>
<br>
<b>This element has the cols set to 60.</b>
<div id="editableElement3">
Click to edit multiline
</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