开发者

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

继续阅读：cssjavascriptjqueryjquery-ui

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9