<div style="margin-left: 20px; padding: 10px;">
<p>Вы можете отредактировать заголовок ниже (дважды кликните по нему):</p>
<span id="testme" class="editable">Отредактируй меня!</span>
<p> </p>
<p>Следующий тоже: </p>
<span id="testme2" class="editable">А меня?</span>
<p> </p>
<p>А вот и длинный текст: </p>
<span class="longtext" id="testme3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel mi sit amet orci gravida euismod. Mauris congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur urna eros, rhoncus ac, auctor et, vestibulum in, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a ipsum vitae odio pretium mollis. Vestibulum venenatis metus aliquet enim. Nullam sit amet lectus. Etiam quis metus scelerisque pede sodales fringilla. Fusce neque neque, dapibus nec, pulvinar ut, commodo at, lacus. Morbi sed justo eget leo porttitor imperdiet. Ut felis. Praesent ullamcorper arcu vitae est gravida fringilla. In at sapien. In venenatis nunc et lacus.</span>
</div>
function bind(toObject, methodName)
{
return function(e){toObject[methodName](e)}
}
function listen(object, hevent, hfunc)
{
if (object.addEventListener)
object.addEventListener(hevent,hfunc,false);
else if (object.attachEvent)
object.attachEvent('on'+hevent,hfunc);
}
function listenex(object, hevent, lobject, lfunc)
{
listen(object, hevent, bind(lobject, lfunc));
}
function EditableField(editableid)
{
//Устанавливаем переменные
this.editable = $(editableid);
//Флаг редактирования
this.isediting = false;
//Флаг номера клика
this.clicked_last = false;
//Переменные изменения состояния
this.callback_begin_edit = false;
this.callback_finish_edit = false;
//Подключаем обработчики событий
if (!window.opera)
listenex(this.editable, "dblclick", this, "handler_clicked");
else
listenex(this.editable, "click", this, "handler_clicked_opera");
//Создаём сами обработчики
this.handler_clicked = function()
{
//Если поле не редактируется
if (this.isediting == false)
{
//Если задан обработчик, вызываем его
if (this.callback_begin_edit != false)
this.callback_begin_edit(this.editable);
//Создаём поле редактирования
if (this.editable.innerHTML.length < 100)
{
//Если поле небольшое
var intbox = document.createElement("input");
}
else
{
//Если поле большое
var intbox = document.createElement("textarea");
intbox.style.height = this.editable.clientHeight + "px";
}
intbox.id = this.editable.id + "_edit";
intbox.className = this.editable.className;
intbox.value = this.editable.innerHTML;
//Очищаем весь HTML
this.editable.innerHTML = "";
//И присоединяем наше поле-редактор
this.editable.appendChild(intbox);
//Устанавливаем значение индикатора редактирования
this.isediting = true;
}
else
{
//В противном случае, применяем изменения
this.editable.innerHTML = $(this.editable.id + "_edit").value;
//Меняем значение индикатора
this.isediting = false;
//Если задан обработчик, вызываем его
if (this.callback_finish_edit != false)
this.callback_finish_edit(this.editable);
}
}
//Обработчик для Opera
this.handler_clicked_opera = function()
{
if (this.clicked_last == false)
{
this.clicked_last = true;
tmp_this = this;
setTimeout("tmp_this.clicked_last = false", 1000);
}
else
{
this.clicked_last = false;
this.handler_clicked();
}
}
//Сбросить по таймауту клик
this.handler_clicked_opera_clear = function()
{
alert(this.clicked_last);
}
}
var efield = new EditableField("testme");
var secondfield = new EditableField("testme2");
var thirdfield = new EditableField("testme3");