На этом шаге мы рассмотрим основные свойства и события этого виджета.

    Материал этого шага базируется на http://it-route.ru/jeditable_manual_ru/.

    Можно получить полный контроль над Ajax-запросами. Для этого нужно заменить url на функцию. Остальные параметры остаются без изменений.

$('.editable').editable(function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
     type    : 'textarea',
     submit  : 'OK',
 });

    Стоит отметить, что функция должна возвращать строку. Обычно это отредактированный текст. Он будет показан на странице после окончания редактирования.

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

• (String) method - метод используется, когда отправляется отредактированный контент. По умолчанию значение POST.

• (Function) callback - функция вызывается после отправки данных формы. Она получает два параметра. Value содержит отправленный текст. Settings содержит настройки плагина. Внутри функции this ссылается на оригинал редактируемого элемента.

  $('.editable').editable('http://www.example.com/save.php', {
       type     : 'textarea',
       submit   : 'OK',
       callback : function(value, settings) {
           console.log(this);
           console.log(value);
           console.log(settings);
       }
   });
  

• (String) name - имя отправляемого параметра, который содержит отредактированный текст. Значение по умолчанию value.

  $('.editable').editable('http:www.example.com/save.php', {
      name     : 'new_value'
  });
  

• (String) id - имя отправляемого параметра, который содержит id редактируемого элемента. Значение по умолчанию id.

  $('.editable').editable('http://www.example.com/save.php', {
       id     : 'element_id'
   });
  

• (Mixed) submitdata - дополнительный параметр. Может содержать как данные, так и функцию, возвращающую данные.

  $(".editable").editable("http://www.example.com/save.php", {
     submitdata : {foo: "bar"};
  });
  
  $(".editable").editable("http://www.example.com/save.php", {
     submitdata : function(value, settings) {
         return {foo: "bar"};
     }
  });
  

• (String) type - тип элемента для ввода данных. По умолчанию это один из перечисленных: text, textarea или select. Дополнительные типы можно добавить, используя пользовательское API.
• (Integer) rows - количество строк в textarea.
• (Integer) cols - количество столбцов в textarea.
• (Integer) height - высота элемента ввода в пикселях. Значение по умолчанию auto. Это означает, что высота вычисляется автоматически. Можно установить значение none.
• (Integer) width - ширина элемента ввода в пикселях. Значение по умолчанию auto. Это означает, что ширина вычисляется автоматически. Можно установить значение none.
• (String) loadurl - обычно содержимое формы будет такое же, как и содержимое редактируемого элемента. Однако, этот параметр позволит загрузить данные с внешнего URL.

  $(".editable").editable("http://www.example.com/save.php", {
      loadurl : "http://www.example.com/load.php"
  });
  

  Стоит заметить, что идентификатор редактируемого элемента будет автоматически добавлен к запросу. Например, URL может выглядеть так:

    http://www.example.com/load.php?id=element_id
  

• (String) loadtype - тип запроса при использовании loadurl. По умолчанию используется GET. Вы так же можете использовать GET или POST.
• (Mixed) loaddata - дополнительный параметр при использовании loadurl. Может содержать как данные, так и функцию, возвращаемую данные.

  $(".editable").editable("http://www.example.com/save.php", {
     loaddata : {foo: "bar"};
  });
  	
  $(".editable").editable("http://www.example.com/save.php", {
     loaddata : function(value, settings) {
         return {foo: "bar"};
     }
  });
  

• (Mixed) data - данные формы, передающиеся для редактирования. Может содержать как строку, так и функцию, возвращаемую строку. Может быть полезно. когда надо изменить данные перед их редактированием.

  $(".editable").editable("http://www.example.com/save.php", {
     data : "Lorem ipsum";
  });
  
  $(".editable").editable("http://www.example.com/save.php", {
      data: function(value, settings) {
        // Convert <br> to newline. 
        var retval = value.replace(/<br[\s\/]?>/gi, '\n');
        return retval;
      }
  });
  

    По умолчанию, когда пользователь щелкает за пределами редактируемой области, все изменения отменяются. Вы можете управлять этим, устанавливая параметр onblur. Возможные значения:

• cancel - щелчок за пределами редактируемой области отменяет изменения. Нажатие на кнопку отправки отсылает данные.
• submit - щелчок за пределами редактируемой области отправляет данные.
• ignore - щелчок за пределами редактируемой области игнорируется. Нажатие на ESC отменяет изменения. Нажатие на кнопку отправки отсылает данные.

    Событие, после которого начинается редактирование может быть определено в опции event. Все события из jQuery поддерживаются. Наиболее часто используемые - click и dblclick.

    На следующем шаге мы рассмотрим расширение Masked Input.

Предыдущий шаг Содержание Следующий шаг