Возможно ли иметь jeditable popup вместо inline

Question

У меня есть таблица html. есть много столбцов, чтобы вписаться, многие столбцы показывают изображения для представления данных. Я использую jeditable, чтобы позволить пользователям щелкнуть по изображению и выбрать из раскрывающегося списка или ввести текст в текстовое поле и обновить это поле (которое затем отображает соответствующее изображение в возвращаемом контенте. (Отлично работает)

одна из проблем заключается в том, что некоторые из ширины столбцов очень малы, поэтому, когда вы нажимаете на изображение, вы получаете текстовое поле, но его путь к малым (поскольку он ограничен табличной компоновкой). У вас нет достаточно места для текстового поля (его только о 1/8 дюйма в ширину), я бы как-то хотел, чтобы текстовое поле всплывало над таблицей (возможно, в маленьком диалоговом окне или что-то еще), поэтому у меня больше ширины, чтобы кто-то мог вводить более длинный текст.

любые предложения?

Answer 1

Параметры cssclass или стиля jeditable могут делать то, что вы хотите - если форма, которую создает jeditable, имеет абсолютное позиционирование, таблица не будет расширяться.

Если то, что вы можете получить с помощью CSS не идет достаточно далеко, это достаточно легко создать свой собственный вариант любой JQuery плагин - просто найти ту часть, которая создает виде

var form = $('<form />'); 

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

Answer 2

Вы могли бы реально редактируемой DIV скрытый в абсолютном положении над колонке, и сделать название, чтобы огонь редактируемой

Что-то вроде этого (неработающего кода, размещены только для иллюстрации идеи)

<div class="jeditable" id="firstcol">jEditable field</div> 
<th><span class="jeditable-activate">Edit me</span></td> 

И в JQuery:

$('.jeditable-activate').click(function() { 
    $(this).prev().show().click(); 
}); 

Answer 3

jEditable имеет настройки ширины, который может быть установлен на «авто» (по умолчанию), «Нет» или количество пикселей. Итак, если вы сделаете что-то вроде этого:

$(".click").editable(url, { 
     indicator : "<img src='img/indicator.gif'>", 
     tooltip : "Click to edit...", 
     width  : 400, 
     style : "inherit" 
    }); 

Вы можете адаптировать ширину редактирования в соответствии с вашими потребностями. Это, конечно, расширит таблицу, но я не вижу в этом проблемы. Я считаю, что это предпочтительнее, чем всплывающее диалоговое окно, так как после всего этого происходит редактирование на месте.