從javascript函數添加刪除jQuery選項卡

Question

我是jQuery的新手，我需要進一步瞭解一個讓我卡住了一段時間的主題。 我正在開發一個應用程序，其中使用HTML5 + Javascript生成GUI前端，我需要處理一個字符串（來自用戶）並在運行中修改它們的選項卡和數量。 （即使創建和銷燬標籤）。

爲標籤的代碼是從JQueryUI挑選：

<script> 
$(function() { 
var tabTitle = $("#tab_title"), 
tabContent = $("#tab_content"), 
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
tabCounter = 2; 

var tabs = $("#tabs").tabs(); 
// modal dialog init: custom buttons and a "close" callback resetting the form inside 
var dialog = $("#dialog").dialog(
{ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
    Add: function() 
    { 
    addTab(); 
    $(this).dialog("close"); 
    }, 
    Cancel: function() 
    { 
     $(this).dialog("close"); 
    } 
    }, 
    close: function() { 
    form[ 0 ].reset(); 
    } 
} 
); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function(event) 
{ 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() 
{ 
    var label = tabTitle.val() || "Tab " + tabCounter, 
    id = "tabs-" + tabCounter, 
    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; 
    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 
// addTab button: just opens the dialog 
$("#add_tab").button().click(function() {dialog.dialog("open");}); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() {var panelId = $(this).closest("li").remove().attr("aria-controls"); 
$("#" + panelId).remove(); 
tabs.tabs("refresh");}); 

}); 

function test() 
{ 
/* 
    TODO: Generate the tab title and content and update the GUI with the new tab, generated 
      only by writing it in the code. 

*/ 
} 
</script> 

我已經工作了很多關於這個問題，但我不能找到一種方法，從功能測試（）在我的腳本中定義添加的標籤。我如何訪問原始代碼中提供的功能？

謝謝！

Answer 1

只需將此函數添加到您的代碼。

function anotherTab(title, content) { 
    var label = title || "Tab " + tabCounter, 
    id = "tabs-" + tabCounter, 
    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
    tabContentHtml = content || "Tab " + tabCounter + " content."; 
    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

現在，如果你需要一個新的標籤瞬間 - 你把anotherTab('Tab Name', 'Some content here.');在test功能 - 但你需要把所有的代碼在同樣的情況下，使其協同工作 - 像這樣做：

<script> 
    $(function() { 
    // ORIGINAL CODE YOU'VE COPIED FROM JQUERY.... 
    // ...AND AFTER IT BUT BEFORE '});' 

    // 'anotherTab' function code... 

    function test() { 
     anotherTab('NEW TAB', 'NEW CONTENT'); 
    } 

    test(); 
    }); 
</script> 

編輯。 好了 - 所以，如果你需要一個全局範圍 - 這個代碼將會像下面這樣：

<script> 
    // global mytabs object containing all data and methods related to our tabs 
    var mytabs = { 
     tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
     tabCounter: 2, 
     tabs: '', 
     init: function(){ 
      // make tabs with jQuery 
      this.tabs = $("#tabs").tabs(); 
      // handle close-tab icons click event 
      this.tabs.delegate("span.ui-icon-close", "click", function() { 
       var panelId = $(this).closest("li").remove().attr("aria-controls"); 
       $("#" + panelId).remove(); 
       mytabs.tabs.tabs("refresh"); 
      }); 
     }, 
     addNewTab: function(title, content){ 
      var label = title || "Tab " + this.tabCounter, 
       id = "tabs-" + this.tabCounter, 
       li = $(this.tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
       tabContentHtml = content || "Tab " + this.tabCounter + " content."; 
      this.tabs.find(".ui-tabs-nav").append(li); 
      this.tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
      this.tabs.tabs("refresh"); 
      this.tabCounter++; 
     } 
    } 

    // when document is ready initiate tabs 
    $(function() { 
     mytabs.init(); 
    } 

    // your test function 
    function test() { 
     // just use a method defined in mytabs 
     mytabs.addNewTab('Added Tab', 'Some content...'); 
    } 
</script>