Question

我正在尝试创建一个标签式菜单，我希望除第一个选项卡之外的所有菜单选项卡都可以关闭。很像雅虎邮箱GUI。收件箱和联系人选项卡不可关闭，而后续选项卡可以关闭。

这是我的代码：

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”时，我都会添加一个新选项卡。我实际上想要创建一个新选项卡（如果尚未创建）并选择相应的选项卡（如果已创建）。我怎么能这样做？

Answer 1

在init上，使用

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

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

1 个答案: