Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2015, 14:45
Новичок на форуме
Отправить личное сообщение для soloinnet Посмотреть профиль Найти все сообщения от soloinnet
 
Регистрация: 08.06.2015
Сообщений: 9

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

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

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

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

Пример на jsfiddle
Ответить с цитированием
  #2 (permalink)  
Старый 14.08.2015, 17:17
Новичок на форуме
Отправить личное сообщение для soloinnet Посмотреть профиль Найти все сообщения от soloinnet
 
Регистрация: 08.06.2015
Сообщений: 9

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

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;
                });
            }

        });


Тему можно закрывать, всем спасибо все свободны ))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не каждый раз отрабатывает jQuery.form NapalmRain AJAX и COMET 7 19.03.2014 12:18
Динамические Табы и drag&drop Surlik jQuery 3 16.11.2013 00:53
Как сделать так что бы каждый раз открывалась разная страница Fiestu Общие вопросы Javascript 4 11.09.2011 20:27
window.open Каждый раз в новом окне MadGest Общие вопросы Javascript 4 04.09.2010 16:14