creating closable tabs in jquery_问答_开发者_运维开发者技术经验分享

i am now able to successfully create dynamic tabs but how do i close them each? as seen here with the close icon floated to the left:

creating closable tabs in jquery

here is the code i am using so far:

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/reset-fonts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/examples.css" />
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.core.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/extensions/ui.tabs.paging.js"></script>
4<script type="text/javascript"> 
$(function($) {
   $('#example').tabs();
   $('#example').tabs('paging');
   var $tabs= $('#example')
    .tabs('paging')({
        'closable':true, //Default false
    });
});
</script>
<script type="text/javascript"> 
function addTab(selector, index) {
    var myTabs = jQuery(selector);

    if (index == undefined)
        index = myTabs.tabs('length');

    tabId = '#tab' + (new Date).getTime();

    myTabs.tabs('add', tabId, $('#TAB_NAME').val());

    $(tabId).load('new_tab_data.txt');
}
</script>
<style>
html {
    overflow-y: scroll !important;
}
.tabs {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 10px 5px 1px 5px;
    zoom:1;
}
.tabs:after {
    display: block;
    clear: both;
    content: " ";
}
.tabs li {
    float: left;
    margin: 0 1px 0 0;
    padding-left: 5px;
}
.tabs a {
    display: block;
    position: relative;
    top: 1px;
    border: 1px solid #ccc;
    border-bottom: 0;
    z-index: 2;
    padding: 2px 9px 3px;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
}
.tabs a:focus, .tabs a:active {
    outline: none;
}
.tabs a:hover, .tabs a:focus, .tabs a:active {
    background: #fff;
    cursor: pointer;
}
.ui-tabs-selected a {
    background-color: #fff;
    color: #000;
    font-weight: bold;
    padding: 2px 9px 1px;
    border-bottom: 1px solid #fff;
    border-top: 3px solid #fabd23;
    border-left: 1px solid #fabd23;
    border-right: 1px solid #fabd23;
    margin-bottom: -1px;
    overflow: visible;
}
.ui-tabs-hide {
    display: none;
    background-color: #fff
}
.ui-tabs-panel {
    padding: 0.5em;
}
.ui-tabs-paging-next {
    float: right !important;
}
.ui-tabs-paging-prev, .ui-tabs-paging-next {
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 1px !important;
}
#example2 .ui-tabs-paging-prev, #example2 .ui-tabs-paging-next {
    font-weight: bold;
}
.ui-tabs-paging-prev a, .ui-tabs-paging-next a {
    display: block;
    position: relative;
    top: 1px;
    border: 0;
    z-index: 2;
    padding: 0;
    /* color: #444; */ 
    text-decoration: none;
    background: transparent !important;
    cursor: pointer;
}
.ui-tabs-paging-next a:hover, .ui-tabs-paging-next a:focus, .ui-tabs-paging-next a:active, .ui-tabs-paging-prev a:hover, .ui-tabs-paging-prev a:focus, .ui-tabs-paging-prev a:active {
    background: transparent;
}
.ui-tabs-paging-disabled {
    visibility: hidden;
}
</style>
</head>
<body>
<input type="text" id="TAB_NAME" value="New Tab" size="10" />
<button onclick="addTab('#example');">Add</button>
<div id="example">
  <ul class="tabs">
    <li><a href="#tab1">Pretium</a></li>
  </ul>
  <div id="tab1">
    <p>Morbi consequat iaculis quam. Suspendisse pharetra, turpis molest开发者_如何转开发ie varius adipiscing, est ligula eleifend lorem, in iaculis lectus nibh ac nibh. Curabitur semper condimentum neque. Praesent at diam ac diam gravida elementum. Mauris aliquet vehicula elit. Donec aliquet velit. Integer lobortis lacus in augue. Cras dignissim. Pellentesque facilisis ultrices orci. Morbi ligula ipsum, rutrum in, convallis eu, accumsan quis, odio. Quisque lorem sapien, dictum vulputate, rhoncus id, facilisis vel, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec neque magna, elementum id, posuere eget, elementum eu, pede.</p>
    <p>Donec non turpis. Quisque cursus adipiscing orci. Sed non lectus. Fusce nec turpis. Etiam tincidunt. Nam tempus, nulla vitae pretium elementum, ante massa rhoncus dolor, nec ultrices felis tellus in dolor. Pellentesque ut justo. Sed ligula. Praesent vel lorem eu est convallis sodales. Nam porta iaculis orci.</p>
  </div>
</div>
</body>
</html>

There is no closable option for jQuery UI tabs.

This jQuery UI page shows how to do this sort of thing.

Here's a basic demo. You had a bunch of wonky JS that I've cleaned up, take a good close look at it.

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/reset-fonts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/examples.css" />
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.core.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/extensions/ui.tabs.paging.js"></script>
<style>
html {
    overflow-y: scroll !important;
}
.tabs {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 10px 5px 1px 5px;
    zoom:1;
}
.tabs:after {
    display: block;
    clear: both;
    content: " ";
}
.tabs li {
    float: left;
    margin: 0 1px 0 0;
    padding-left: 5px;
}
.tabs a {
    display: block;
    position: relative;
    top: 1px;
    border: 1px solid #ccc;
    border-bottom: 0;
    z-index: 2;
    padding: 2px 9px 3px;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
}
.tabs a:focus, .tabs a:active {
    outline: none;
}
.tabs a:hover, .tabs a:focus, .tabs a:active {
    background: #fff;
    cursor: pointer;
}
.ui-tabs-selected a {
    background-color: #fff;
    color: #000;
    font-weight: bold;
    padding: 2px 9px 1px;
    border-bottom: 1px solid #fff;
    border-top: 3px solid #fabd23;
    border-left: 1px solid #fabd23;
    border-right: 1px solid #fabd23;
    margin-bottom: -1px;
    overflow: visible;
}
.ui-tabs-hide {
    display: none;
    background-color: #fff
}
.ui-tabs-panel {
    padding: 0.5em;
}
.ui-tabs-paging-next {
    float: right !important;
}
.ui-tabs-paging-prev, .ui-tabs-paging-next {
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 1px !important;
}
#example2 .ui-tabs-paging-prev, #example2 .ui-tabs-paging-next {
    font-weight: bold;
}
.ui-tabs-paging-prev a, .ui-tabs-paging-next a {
    display: block;
    position: relative;
    top: 1px;
    border: 0;
    z-index: 2;
    padding: 0;
    /* color: #444; */ 
    text-decoration: none;
    background: transparent !important;
    cursor: pointer;
}
.ui-tabs-paging-next a:hover, .ui-tabs-paging-next a:focus, .ui-tabs-paging-next a:active, .ui-tabs-paging-prev a:hover, .ui-tabs-paging-prev a:focus, .ui-tabs-paging-prev a:active {
    background: transparent;
}
.ui-tabs-paging-disabled {
    visibility: hidden;
}
</style>
</head>
<body>
<input type="text" id="TAB_NAME" value="New Tab" size="10" />
<button id="clickme">Add</button>
<div id="example">
  <ul class="tabs">
    <li><a href="#tab1">Pretium <span class="ui-icon ui-icon-close">Remove Tab</span></a></li>
  </ul>
  <div id="tab1">
    <p>Morbi consequat iaculis quam. Suspendisse pharetra, turpis molestie varius adipiscing, est ligula eleifend lorem, in iaculis lectus nibh ac nibh. Curabitur semper condimentum neque. Praesent at diam ac diam gravida elementum. Mauris aliquet vehicula elit. Donec aliquet velit. Integer lobortis lacus in augue. Cras dignissim. Pellentesque facilisis ultrices orci. Morbi ligula ipsum, rutrum in, convallis eu, accumsan quis, odio. Quisque lorem sapien, dictum vulputate, rhoncus id, facilisis vel, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec neque magna, elementum id, posuere eget, elementum eu, pede.</p>
    <p>Donec non turpis. Quisque cursus adipiscing orci. Sed non lectus. Fusce nec turpis. Etiam tincidunt. Nam tempus, nulla vitae pretium elementum, ante massa rhoncus dolor, nec ultrices felis tellus in dolor. Pellentesque ut justo. Sed ligula. Praesent vel lorem eu est convallis sodales. Nam porta iaculis orci.</p>
  </div>
</div>
</body>
</html>

New CSS

.tabs li a {
    padding-right: 20px;
} 
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(http://jqueryui.com/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/;
}
.tabs li .ui-icon-close { 
    position: absolute;
    margin: 0.2em 0.2em 0 0;
    cursor: pointer;
    top: 0;
    right: 0;
}
.ui-icon-close { background-position: -80px -128px; }

JavaScript

$(function($) {
    var $tabs = $('#example').tabs({
        tabTemplate: "<li><a href='#{href}'>#{label} <span class='ui-icon ui-icon-close'>Remove Tab</span></a></li>",
        add: function(event, ui) {
            // for whatever reason (probably something to do with event bubbling)
            // .live() doesn't work, so we need to bind click to close like this
            $('.tabs li a span.ui-icon-close').unbind('click').click(function() {
                var index = $('li', $tabs).index($(this).parent().parent());
                $tabs.tabs('remove', index);
                return false;
            });
        }
    });

    function addTab() {

        var tabId = '#tab' + new Date().getTime();

        $tabs.tabs('add', tabId, $('#TAB_NAME').val());

        $(tabId).load('new_tab_data.txt');
    }

    $('#clickme').click(function() {
        addTab();
    });
});

This was a demo I found online using jQuery:

<blockquote>
$('#tabs').w2tabs({
    name: 'tabs',
    active: 'tab1',
    tabs: [
        { id: 'tab1', caption: 'Tab 1' },
        { id: 'tab2', caption: 'Tab 2', closable: true },
        { id: 'tab3', caption: 'Tab 3', closable: true },
        { id: 'tab4', caption: 'Tab 4', closable: true },
        { id: 'tab5', caption: 'Tab 5', closable: true },
        { id: 'tab6', caption: 'Tab 6', closable: true },
        { id: 'tab7', caption: 'Tab 7', closable: true },
        { id: 'tab8', caption: 'Tab 8', closable: true }
    ],
    onClick: function (event) {
        $('#tab-content').html('Tab: ' + event.target);
    }
});