如何使除jQuery UI中可关闭的第一个选项卡以外的所有选项

我试图创建一个选项卡式菜单，并且我希望除了第一个选项卡（菜单选项卡可关闭）之外的所有选项。很像雅虎邮件GUI。收件箱和联系人标签不可关闭，而后续标签可关闭。如何使除jQuery UI中可关闭的第一个选项卡以外的所有选项

这里是我的代码：

jQuery(function() { 
     var mytabs = jQuery("#tabs").tabs({tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"}); 

     jQuery("#tabs span.ui-icon-close").live("click", function() { 
     var index = jQuery("li", mytabs).index(jQuery(this).parent()); 
     $tabs.tabs("remove", index); 
     }); 

}); 

<script type="text/javascript"> 

function openComplaintDiv(complaint, complaintNo,demographic_no) { 
var htmlContent= "complaint = '"+complaint+"'complaintNo ='"+complaintNo+"'for user = '"+demo_no+"'"; 
jQuery("#tabs").tabs().tabs('add', '#vtab_'+complaint.replace(" ","_"), complaint.replace(" ","_")); 
jQuery("#vtab_"+complaint.replace(" ","_")).html(htmlContent); 
return false; 
} 

</script> 

<style> 
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } 
</style> 

<html> 
    <body> 
      <div id="tabs"> 
    <ul> 
     <li><a href="#mainMenu">Home</a></li> 

    </ul> 

    <div id="mainMenu"> 

     <div id="addTab" onclick="addNewComplaintDiv();"><a style="padding:6px 6px 6px 17px;text-decoration:none;position:relative" href="#" id="addTab_1" class="ui-state-default ui-corner-all"> 
      <span style="position:absolute;top:4px;left:1px" class="ui-icon ui-icon-plus"></span> 
      Add new complaint 
     </a></div> 
     <table class="normal"> 
     <% 

      for (Integer key : complaintMap.keySet()) { %> 
      <tr><td style="height:50px;"><div id="openComplaint_<%=key%>" onclick="openComplaintDiv('<%=complaintMap.get(key)%>',<%=key%>,<%=demo_no%>);"><a style="padding:6px 6px 6px 17px;text-decoration:none;position:relative" href="#" id="addTab_1" class="ui-state-default ui-corner-all"> 
        <%=complaintMap.get(key)%> 
       </a></div> </td></tr> 
      <% } %> 
      </table> 
    </div> 
</div> 

</body> 
</html>

此代码的所有标签关闭的，但我不希望“MAINMENU”选项卡是关闭的。此外，每次点击“主菜单”选项卡中的“投诉div”时，我都会添加一个新选项卡。我实际上想要创建一个新选项卡（如果它尚未创建），并选择相应的选项卡（如果它已创建）。我怎样才能做到这一点？

来源

2012-07-03 Sapphire

与$替换所有的jQuerys小号......这不会解决您的问题，但我不知道你为什么会那么做 – maxhud

有原型在我页面，所以我必须使用jQuery而不是“$”。 – Sapphire

在初始化，使用

disabled: [1] 

var mytabs = jQuery("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    disabled: [1] 
});

来源

2012-07-03 15:53:10 aowie1

感谢工作....但我怎么能“添加”一个标签取决于它是否存在或不。如果您看到我的代码，我正在为“投诉地图”中的条目数量创建可点击的“div”。如果div已经创建，我想要打开div而不是创建一个重复的div。 – Sapphire

在创建新选项卡以确定是否存在或不存在时，您使用了什么标准？如果你正在创建一个“新”选项卡，为什么会有重复？创建一个新的应该只是追加和增加现有的索引。反正，有这种方法调用：.tabs（“add”，url，label，[index]） – aowie1

我有一个可点击的项目列表在我的“主页”标签中，当点击一个新的标签时打开。 ''jQuery（“＃tabs”）。tabs（）。tabs（'add'，'#childTab _'+ comp_joined，comp_joined）;'这段代码创建一个新的标签而不检查它是否存在。加入'[index]'选项可以解决这个问题吗？ – Sapphire

如何使除jQuery UI中可关闭的第一个选项卡以外的所有选项

回答

相关问题