2012-07-03 2 views
1

Я пытаюсь создать меню с вкладками, и мне нужны все, кроме первой вкладки, которая является закрывающейся вкладкой меню. Очень похоже на графический интерфейс Yahoo. Вкладки «Входящие» и «Контакты» не закрываются, а последующие вкладки являются закрываемыми.Как сделать все, кроме первой вкладки, закрывающейся в 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» на вкладке «Главное меню». Я действительно хочу создать новую вкладку, если она еще не создана, и выберите соответствующую вкладку, если она уже создана. Как я могу это сделать?

+0

заменить все ваши jQuerys с $ s ...... что обыкновение решить вашу проблему, но я не знаю, почему вы бы не сделать это – maxhud

+2

Там же прототип на моем , поэтому я должен использовать jQuery вместо «$». – Sapphire

ответ

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

спасибо, что сработало .... но как я могу «добавить» вкладку в зависимости от того, существует она или нет. Если вы видите мой код, я создаю clickable 'div' для количества записей в файле requestMap. Если div уже создан, я хочу, чтобы div был открыт вместо создания дубликата div. – Sapphire

+0

Какие критерии вы используете при создании новых вкладок, чтобы определить, существует ли он или нет? Если вы создаете «новую» вкладку, почему бы существовать дубликат? Создание нового должно просто добавлять и увеличивать существующий индекс. В любом случае, есть этот метод для вызова: .tabs ("add", url, label, [index]) – aowie1

+0

У меня есть список кликаемых элементов на моей вкладке «Главная», которая при нажатии открывается на новой вкладке. 'jQuery (« # tabs »). tabs(). tabs ('add', '#childTab _' + comp_joined, comp_joined);' Этот код создает новую вкладку, не проверяя, существует ли она или нет. Добавил бы параметр '[index]' решить эту проблему? – Sapphire

Смежные вопросы