類似瀏覽器的選項卡 - jquery UI選項卡定位

我正在使用JQuery UI選項卡添加/刪除功能。類似瀏覽器的選項卡 - jquery UI選項卡定位

我的HTML是

<div id="dialog" title="Tab data"> 
    <form> 
     <fieldset class="ui-helper-reset"> 
      <label for="tab_title">Title</label> 

      <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> 
      <label for="tab_content">Content</label> 
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> 
     </fieldset> 
    </form> 
</div> 

<button id="add_tab">Add Tab</button> 

<div id="tabs"> 
    <ul> 

    </ul> 

</div>

我jQuery是

$(function() { 
     var $tab_title_input = $("#tab_title"), 
      $tab_content_input = $("#tab_content"); 
     var tab_counter = 2; 

     // tabs init with a custom tab template and an "add" callback filling in the content 
     var $tabs = $("#tabs").tabs({ 
      tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
      add: function(event, ui) { 
       var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; 
       $(ui.panel).append("<p>" + tab_content + "</p>"); 
      } 
     }); 

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

     // addTab form: calls addTab function on submit and closes the dialog 
     var $form = $("form", $dialog).submit(function() { 
      addTab(); 
      $dialog.dialog("close"); 
      return false; 
     }); 

     // actual addTab function: adds new tab using the title input from the form above 
     function addTab() { 
      var tab_title = $tab_title_input.val() || "Tab " + tab_counter; 
      $tabs.tabs("add", "#tabs-" + tab_counter, tab_title); 
      tab_counter++; 
     } 

     // addTab button: just opens the dialog 
     $("#add_tab") 
      .button() 
      .click(function() { 
       $dialog.dialog("open"); 
      }); 

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

我想是切換到新創建的標籤自動&還的位置，旁邊加上「新標籤」按鈕，標籤就像我們在瀏覽器中這些天。

我試圖在標籤<ul>內插入「添加標籤」按鈕，但後來，標籤無法正常工作。

任何幫助，將不勝感激！

UPDATE

這裏是工作的解決方案：http://jsfiddle.net/SjW4f/20/

來源

2011-09-22 MANnDAaR

只是看着它。 –

這裏是：http://jsfiddle.net/SjW4f/21/

你需要工作一點點重新排序選項卡上add事件做出add選項卡中最新的。

更新到工作版本

來源

2011-09-22 08:21:32 Samich

嘿薩米奇，謝謝你的回答，但新創建的標籤不顯示內容...我的意思是第一次創建標籤顯示的內容，但2,3,4 ....未能顯示內容.. – MANnDAaR

我想有錨問題在'+'周圍添加標籤如果您刪除了錨標籤，則內容的加載效果非常好。 – MANnDAaR

Checkout lates version。我想它可以像你想要的那樣工作。 – Samich

http://jsfiddle.net/SjW4f/4/ 我改變了兩件事情。添加選項卡後，我添加了一個「選擇」方法。我還將您的直播活動更改爲代表活動。

來源

2011-09-22 08:06:00

謝謝Alistair！這工作完美！ – MANnDAaR

類似瀏覽器的選項卡 - jquery UI選項卡定位

回答

相關問題