468,490 Members | 2,603 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,490 developers. It's quick & easy.

how to add close button tab header.

i need know how to add close button to tab header
Jun 12 '13 #1
2 3100
Dormilich
8,651 Expert Mod 8TB
a self-defined tab or the browser’s tab?

the former just needs to call window.close() the latter is not possible.
Jun 12 '13 #2
Sherin
77 64KB
Try This Code

Expand|Select|Wrap|Line Numbers
  1. <html lang="en">
  2. <head>
  3.   <meta charset="utf-8" />
  4.   <title>jQuery UI Tabs - Default functionality</title>
  5.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  6.   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  7.   <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  8.   <script>
  9.   $(function() {
  10.     $( "#tabs" ).tabs();
  11.     $(".ui-closable-tab").live( "click", function() {
  12.         var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
  13.         var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  14.         $( "#" + panelId ).remove();
  15.         $("#"+tabContainerDiv).tabs("refresh");
  16.         var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
  17.         if (tabCount<1) {
  18.             $("#"+tabContainerDiv).hide();
  19.         }
  20.     });
  21.   });
  22.   </script>
  23.   <style>
  24.   .ui-icon-circle-close {
  25.     cursor:pointer;
  26.   }
  27.   </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="tabs">
  32.   <ul>
  33.     <li><a href="#tabs-1">Nunc tincidunt</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
  34.     <li><a href="#tabs-2">Proin dolor</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
  35.     <li><a href="#tabs-3">Aenean lacinia</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
  36.   </ul>
  37.   <div id="tabs-1">
  38.     <p>Tab 1 Content</p>
  39.   </div>
  40.   <div id="tabs-2">
  41.     <p>Tab 2 Content</p>
  42.   </div>
  43.   <div id="tabs-3">
  44.     <p>Tab 3 Content</p>
  45.   </div>
  46. </div>
  47. </body>
  48. </html>
Dec 7 '20 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by moose | last post: by
5 posts views Thread by Nick250 | last post: by
5 posts views Thread by Reggie | last post: by
2 posts views Thread by Bruce | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by theflame83 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.