script.aculo.us — Редактирование на месте

Редактирование на месте является одной из отличительных черт приложений Web 2.0.style.

Редактирование на месте подразумевает получение нередактируемого контента, такого как <p>, <h1> или <div>, и предоставление пользователю возможности редактировать его содержимое, просто щелкая его.

Это превращает статический элемент в редактируемую зону (однострочную или многострочную) и выскакивает кнопки отправки и отмены (или ссылки, в зависимости от ваших параметров), чтобы пользователь зафиксировал или откатил изменение.

Затем он синхронизирует редактирование на стороне сервера через Ajax и снова делает элемент не редактируемым.

Чтобы использовать возможности редактирования на месте script.aculo.us, вам необходимо загрузить модули controls.js и effect.js вместе с модулем prototype.js. Итак, ваша минимальная загрузка для script.aculo.us будет выглядеть так —

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Создание текстового редактора на месте

Весь синтаксис конструкции выглядит следующим образом:

new Ajax.InPlaceEditor(element, url [ , options ] )

Конструктор для Ajax.InPlaceEditor принимает три параметра:

• Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

• Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

• Обычные варианты хэша.

Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

Обычные варианты хэша.

Опции

При создании объекта Ajax.InPlaceEditor вы можете использовать один или несколько из следующих параметров.

OK для подтверждения

Логическое значение, указывающее, должна ли отображаться кнопка «ОК» или нет. По умолчанию true.

okText

Текст для размещения на кнопку ОК. По умолчанию «хорошо».

cancelLink

Логическое значение, указывающее, должна ли отображаться ссылка отмены. По умолчанию true.

cancelText

Текст ссылки отмены. По умолчанию «отмена».

savingText

Текстовая строка, отображаемая как значение элемента управления во время операции сохранения (запрос, инициированный нажатием кнопки ОК), обрабатывается. По умолчанию «Сохранение».

clickToEditText

Текстовая строка, которая появляется как подсказка элемента управления при наведении курсора мыши.

строки

Количество строк, отображаемых при активном элементе управления редактированием. Любое число больше 1 вызывает использование элемента текстовой области, а не элемента текстового поля. По умолчанию 1.

смещ_по_столбцам

Количество столбцов в активном режиме. Если опущено, ограничение столбца не накладывается.

размер

То же, что и cols, но применяется только тогда, когда в строках 1.

highlightcolor

Цвет, применяемый к фону текстового элемента при наведении мыши. По умолчанию бледно-желтый.

highlightendcolor

Цвет, до которого цвет подсветки исчезает как эффект.

Обратите внимание — в некоторых браузерах поддержка выглядит нечеткой.

loadingText

Текст, отображаемый в элементе управления во время операции загрузки. По умолчанию это «Загрузка».

loadTextURL

Задает URL-адрес ресурса на стороне сервера, с которым необходимо связаться, чтобы загрузить начальное значение редактора, когда он входит в активный режим. По умолчанию не выполняется операция загрузки бэкэнда, и начальным значением является текст целевого элемента.

externalControl

Элемент, который должен служить «внешним контролем», который запускает перевод редактора в активный режим. Это полезно, если вы хотите, чтобы другая кнопка или другой элемент запускали редактирование элемента управления.

ajaxOptions

Объект хеша, который будет передан базовому объекту Ajax Prototype для использования в качестве хеша его параметров.

Параметры обратного вызова

Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options

OnComplete

Функция JavaScript, которая вызывается при успешном завершении запроса на сохранение. По умолчанию применяется эффект выделения для редактора.

OnFailure

Функция JavaScript, которая вызывается при сбое запроса на сохранение. По умолчанию выдается предупреждение с сообщением об ошибке.

Перезвоните

Функция JavaScript, которая вызывается непосредственно перед отправкой запроса на сохранение, чтобы получить строку запроса для отправки в запрос. Функция по умолчанию возвращает строку запроса, приравнивающую параметр запроса «значение» к значению в текстовом элементе управления.

Параметры CSS-стиля и идентификатора DOM

Вы также можете использовать одну из следующих опций для управления поведением редактора на месте —

savingClassName

Имя класса CSS, примененное к элементу во время операции сохранения. Этот класс применяется при выполнении запроса к сохраняющему URL-адресу и удаляется при возврате ответа. Значением по умолчанию является «сохранение места редактора».

formClassName

Имя класса CSS применяется к форме, созданной, чтобы содержать элемент редактора. По умолчанию «inplaceeditor-form».

FormID

Идентификатор, примененный к форме, созданной для содержания элемента редактора.

пример

Live Demo

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>		
   </body>
</html>

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>
		
      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>