ASP.NET Zone

Hallo,

ich würde gerne nach Klicken auf einen Button einen Tab erstellen bzw. bei einem anderen Button den Tab wieder löschen.
Ausserdem möchte ich alle elemente die im ersten Tab sind in den dynamisch erstellten Tabs auch haben und auf die Werte dieser Tabs zugreifen.

Wie kann ich das denn am besten umsetzen?

meine tabs sehen so aus:

<div id="tabs">

<ul>

<a href="tabs-1">work 1</li>

</ul>

<div id="tabs-1">

dropwdownlist

button

datepicker

</div>

</div>

der code zum button:
<div id="AddWorker">

<span id="Add" class="ui-button-text">

<button class="ui-button ui-buton-text-only ui-widget ui-state-default ui-corner-all" id="AddWork">Add Worker</button>

</span>

</div>

JS-Code:

<script type="text/javascript">

$(document).ready(function(){

$('#AddWorker').click(function(){

tabs.tabs('add', 'Worker +1');

});

}

ich habe es jetzt mit folgendem Code, den ich gegoogelt habe, geschafft tabs zu erstellen:

<script type="text/javascript">
$(document).ready(function () {




$(function () {

// var $tab_title_input = $("#tab_title"),

// $tab_content_input = $("#tab_content");

var tab_counter = 1;


var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');

$addButton.click(function () { addTab(); });


// tabs init with a custom tab template and an "add" callback filling in the content

var $tabs = $("#tabs").tabs({ autoHeight: true, fillSpace: true,

tabTemplate: "<li><a href='tabs-" + tab_counter + "'>worker " + tab_counter + "</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",

add: function (event, ui) {

var tab_content = $('#tabs').html();

$(ui.panel).append("<p>" + tab_content + "</p>");

$("#tabs ul.ui-tabs-nav").append($addButton);

}

});


$("#tabs ul.ui-tabs-nav").append($addButton);


// actual addTab function: adds new tab using the title input from the form above

function addTab() {

var tab_title = "worker " + tab_counter;

$tabs.tabs("add", "#tabs-" + tab_counter, tab_title)

.tabs("select", "#tabs-" + tab_counter, tab_title);

tab_counter++;

}


// close icon: removing the tab on click

$("#tabs span.ui-icon-close").live("click", function () {

var index = $("li", $tabs).index($(this).parent());

$tabs.tabs("remove", index);

tab_counter--;

});

});

});
    </script>

aber der Add-Button (der immer rechts neben dem gerade erstellten Tab-Reiter sitzt)ist kleiner als der Tab-Reiter.
Ausserdem kann ich mit dem Close-Icon den Tab nicht wieder schließen.
Wenn ich jetzt auf das Add-Icon klicke wird mir eine neue Tableiste innerhalb des Tabs erzeugt.
Ausserdem werden die Elemente (Datepicker, ASP:Calendar,...) die im ersten Tab sind nicht in alle weiter erzeugten Tabs übernommen.

Wie kann ich denn diese Probleme lösen?

Hab heut schon den ganzen Tag mit den Tabs rumgespielt aber bin zu keiner Lösung gekommen.

Mfg

Tobi