Как реализовать свернутый вид формы внутри div с помощью jQuery?

Question

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

Как это реализовать? Или есть готовый плагин для достижения этого с помощью jQuery?

Answer 1

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

jQuery('#my-div').click(function(){
    jQuery(this).removeClass('smaller').addClass('bigger');
});
jQuery('#my-div').blur(function(){
    jQuery(this).removeClass('bigger').addClass('smaller');
});

Или что-то похожее на это.

Answer 2

Просто создайте его и сделайте его маленьким, а переполнение - скрытым.

Затем при клике анимируйте больше.

редактирование:

о, верно. Итак, вы хотите, чтобы все было маленьким?

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

Может сработать, это просто теория с моей головы.

пример:

$("#container").click(function () {
      $(this).siblings().css({width:25%, height:25%, font-size:25%});
})

и т.д ...