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

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

javascript jquery css jquery-ui

Javascript 在jquery中创建可关闭的选项卡,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,我现在可以成功创建动态选项卡，但如何关闭每个选项卡？如图所示，关闭图标向左浮动：以下是我目前使用的代码： <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" m

我现在可以成功创建动态选项卡，但如何关闭每个选项卡？如图所示，关闭图标向左浮动：

以下是我目前使用的代码：

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


4.
$（函数（$）{
$（“#示例”）.tabs（）；
$（'示例'）.tabs（'分页'）；
var$tabs=$（“#示例”）
.tabs（“分页”）({
“可关闭”：true，//默认值false
});
});
函数addTab（选择器、索引）{
var myTabs=jQuery（选择器）；
如果（索引==未定义）
index=myTabs.tabs（'length'）；
tabId='#tab'+（新日期）.getTime（）；
myTabs.tabs（'add'，tabId，$（'#TAB_NAME'）.val（）；
$（tabId）.load（'new_tab_data.txt'）；
}
html{
溢出y：滚动！重要；
}
.标签{
背景色：#eee；
边框底部：1px实心#ccc；
列表样式：无；
保证金：0；
填充：10px 5px 1px 5px；
缩放：1；
}
.标签：之后{
显示：块；
明确：两者皆有；
内容：“；
}
李先生{
浮动：左；
边距：0 1px 0；
左侧填充：5px；
}
.标签a{
显示：块；
位置：相对位置；
顶部：1px；
边框：1px实心#ccc；
边界底部：0；
z指数：2；
填充：2px 9px 3px；
颜色：#444；
文字装饰：无；
空白：nowrap；
}
.tabs a:焦点，.tabs a:活动{
大纲：无；
}
.tabs a:悬停，.tabs a:焦点，.tabs a:活动{
背景：#fff；
光标：指针；
}
.ui选项卡已选定{
背景色：#fff；
颜色：#000；
字体大小：粗体；
填充：2px 9px 1px；
边框底部：1px实心#fff；
边框顶部：3件实心#fabd23；
左边框：1px实心#fabd23；
右边框：1px实心#fabd23；
边缘底部：-1px；
溢出：可见；
}
.ui选项卡隐藏{
显示：无；
背景色：#fff
}
.ui选项卡面板{
填充：0.5em；
}
.ui选项卡下一页分页{
浮子：对！很重要；
}
.ui选项卡分页上一页，.ui选项卡分页下一页{
背景：透明！重要；
边界：0！重要；
页边距底部：1px！重要；
}
#示例2.ui选项卡分页上一页，#示例2.ui选项卡分页下一页{
字体大小：粗体；
}
.ui选项卡分页上一页a、.ui选项卡分页下一页a{
显示：块；
位置：相对位置；
顶部：1px；
边界：0；
z指数：2；
填充：0；
/*颜色：#444；*/
文字装饰：无；
背景：透明！重要；
光标：指针；
}
.ui选项卡下一页分页a:hover、.ui选项卡下一页分页a:focus、.ui选项卡下一页分页a:active、.ui选项卡上一页分页a:hover、.ui选项卡上一页分页a:focus、.ui选项卡上一页分页a:active{
背景：透明；
}
.ui选项卡分页已禁用{
可见性：隐藏；
}
添加



艾库利斯·奎姆医院。悬钩子属植物，是一种多年生土牛蒡属植物，是一种叶舌属植物。库拉比图尔森佩尔内克调味品。在直径ac直径孕妇元素处进行预处理。毛里斯·阿利奎特·埃利特。Donec aliquet velit。奥古斯的整数lobortis lacus。高贵的人。奥氏食道炎。同侧舌苔、芸香、康瓦利斯、阿库姆桑·奎斯、奥迪奥。智者的智慧，权势，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧，智者的智慧。Lorem ipsum dolor sit amet，是一位杰出的领导者。Donec neque magna、elementum id、posuere eget、elementum eu、pede
不要吃火鸡。奎斯克·库苏斯正在向奥奇进发。我是非莱克托斯。Fusce nec turpis。艾蒂安·廷西登。不，不，不，不，不，不，不，不，不。佩伦茨克和胡斯托。塞德·利古拉。这是一个很好的例子。Nam porta iaculis orci

jQuery UI选项卡没有可关闭的

选项
演示如何做这类事情
。你有一堆我已经清理过的不可靠的JS，仔细看看
HTML
JavaScript
$（函数（$）{
var$tabs=$（“#示例”）.tabs({
选项卡模板：“”，
添加：功能（事件、用户界面）{
//出于任何原因（可能与事件冒泡有关）
//.live（）不起作用，因此需要像这样绑定单击以关闭
$（'.tabs li a span.ui图标关闭'）。取消绑定（'click'）。单击（函数（）{
var index=$（'li'，$tabs）.index（$（this.parent（）.parent（））；
$tabs.tabs（'remove'，index）；
返回false；
});
}
});
函数addTab（）{
var tabId='#tab'+new Date（）.getTime（）；
$tabs.tabs（'add'，tabId，$（'#TAB_NAME'）.val（））；
$（tabId）.load（'new_tab_data.txt'）；
}
$（'#clickme'）。单击（函数（）{
addTab（）；
});
});
这是我使用jQuery在网上找到的一个演示：



$（“#制表符”）.w2tabs({
名称：“制表符”，
活动：“tab1”，
选项卡：[
{id:'tab1'，标题：'tab1'}，
{id:'tab2'，标题：'tab2'，closable:true}，
{id:'tab3'，标题：'tab3'，closable:true}，
{id:'tab4'，标题：'tab4'，closable:true}，
{id:'tab5'，标题：'tab5'，closable:true}，
{id:'tab6'，标题：'tab6'，closable:true}，
{id:'tab7'，标题：'tab7'，closable:true}，
{id:'tab8'，标题：'tab8'，closable:true}
],
onClick：函数（事件）{
$（'#tab content'）.html（'tab:'+event.target）；
}
});
这看起来像是在使用jQueryUI。是这样吗？@Andrew:显示的外部JS文件强烈表明是这样的。我刚刚意识到选项卡分页将不再有效。。。我该如何重新实现它？正如在div区域中有太多选项卡时看到的：@jean:ahhh，好的。这真的令人担忧吗？老实说，对于可关闭的标签，有比我从你的代码中拼凑出来的更好的解决方案，比如。谢谢！但是，当我在一个允许用户随心所欲地动态添加和删除标签的系统中实现标签时，它看起来有点不整洁。你的解决方案是exc
<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>

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

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

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