类似浏览器的选项卡 - 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选项卡定位

回答

相关问题