1

我正在尝试创建一个选项卡式菜单，我想要除第一个选项卡之外的所有选项卡，它是可关闭的菜单选项卡。很像 yahoo 邮件 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”时，我都会添加一个新选项卡。如果尚未创建，我实际上想创建一个新选项卡，如果已创建，则选择相应的选项卡。我怎样才能做到这一点？

4

1 回答 1

0

在初始化时，使用

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-03T15:53:10.803 回答