Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамические табы с пустой формой каждый раз (https://javascript.ru/forum/dom-window/57659-dinamicheskie-taby-s-pustojj-formojj-kazhdyjj-raz.html)

soloinnet 13.08.2015 14:45

Динамические табы с пустой формой каждый раз
 
Добрый день уважаемые знатоки.
Есть задача, сделать динамические табы, в которых создавалась бы форма заложенная в таблице с id='tabulatable'.
Задачу я решил используя исходник из
http://ruseller.com/lessons/les1095/demo/index.html
Но встретился с проблемой, при работе с текстом всё в порядке, а вот при работе с формами метод append всегда создаёт одну и туже форму с заполненными полями, что нам не годится. Нам нужна пустая форма на каждой новой вкладке.

Заложить готовую форму как html в append нет возможности, каждый раз на странице может оказываться совершенно иная форма генерируемая в C#.

Вложить код html+c# в append я не смогу (не осилил) соответственно решил вынести его в отдельный объект с ID.

Пытался клонировать объект и вставлять его, результата нет.

Пример на jsfiddle

soloinnet 14.08.2015 17:17

Решено спасибо
 
Сам спросил, сам ответил, ой какой самостоятельный. ))

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">&times;</a>';
                $("#tabul").append('<li id="t' + count + '" class="ntabs">Закладка ' + count + '&nbsp;&nbsp;' + 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.