Динамические табы с пустой формой каждый раз
Добрый день уважаемые знатоки.
Есть задача, сделать динамические табы, в которых создавалась бы форма заложенная в таблице с 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, время: 14:21. |