Динамические табы с пустой формой каждый раз
Добрый день уважаемые знатоки.
Есть задача, сделать динамические табы, в которых создавалась бы форма заложенная в таблице с id='tabulatable'. Задачу я решил используя исходник из http://ruseller.com/lessons/les1095/demo/index.html Но встретился с проблемой, при работе с текстом всё в порядке, а вот при работе с формами метод append всегда создаёт одну и туже форму с заполненными полями, что нам не годится. Нам нужна пустая форма на каждой новой вкладке. Заложить готовую форму как html в append нет возможности, каждый раз на странице может оказываться совершенно иная форма генерируемая в C#. Вложить код html+c# в append я не смогу (не осилил) соответственно решил вынести его в отдельный объект с ID. Пытался клонировать объект и вставлять его, результата нет. Пример на jsfiddle |
Решено спасибо
Сам спросил, сам ответил, ой какой самостоятельный. ))
1 - необходимо append делать клона элемента tabulatable 2 - в последней части скрипта прописаны условия дублирования и hide show привязанные к <p> аппенд делать внутри параграфа Рабочий скрипт для вышеуказанного fiddle $(function() { var total_tabs = 0; // Инициализируем первую закладку total_tabs++; addtab(total_tabs); $("#addtab, #litab").click(function() { total_tabs++; $("#tabcontent p").hide(); addtab(total_tabs); return false; }); function addtab(count) { var tabl = document.getElementById("tabulatable"); var tablclone = tabl.cloneNode(true); var closetab = '<a href="" id="closetab' + count + '" class="closetab">×</a>'; $("#tabul").append('<li id="t' + count + '" class="ntabs">Закладка ' + count + ' ' + closetab + '</li>'); $("#tabcontent").append('<p id="c' + count + '">Содержание закладки № ' + count + tablclone.innerHTML + '</p>'); $("#tabul li").removeClass("ctab"); $("#t" + count).addClass("ctab"); $("#t" + count).bind("click", function() { $("#tabul li").removeClass("ctab"); $("#t" + count).addClass("ctab"); $("#tabcontent p").hide(); $("#c" + count).fadeIn('slow'); }); $("#closetab" + count).bind("click", function() { // Активируем предыдущую закладку $("#tabul li").removeClass("ctab"); $("#tabcontent p").hide(); $(this).parent().prev().addClass("ctab"); $("#c" + count).prev().fadeIn('slow'); $(this).parent().remove(); $("#c" + count).remove(); return false; }); } }); Тему можно закрывать, всем спасибо все свободны )) |
Часовой пояс GMT +3, время: 02:43. |