Question

我现在能够成功创建动态标签，但我如何关闭它们？如图所示，左侧的关闭图标浮动：

enter image description here

这是我目前使用的代码：

<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 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>

Answer 1

jQuery UI标签没有closable选项。

This jQuery UI page展示了如何做到这一点。

Here's a basic demo。你有一堆我已经清理好的JS，仔细看看它。

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>

新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();
    });
});

Answer 2

这是我使用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);
    }
});

在jquery中创建可关闭的选项卡

2 个答案:

HTML

新CSS

的JavaScript