Question

我想有一个带有顶部和按钮菜单功能的Jquery UI选项卡，是否可以这样做？（内容是通过ajax加载的，我的意思是顶部标签和底部标签同时出现。）

<script type="text/javascript" charset="utf-8">
    $(function() {
        $( "#tabs" ).tabs({                 
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            },
            cookie: {
                // store cookie for a day, without, it would be a session cookie
                expires: 1
            }
        });
});
</script>
<div id="tabs"> 
    <ul id="top"> 
       <li><a href="top1.php">top 1</a></li> 
       <li><a href="top2.php">top 2</a></li> 
    </ul> 
    <ul id="bottom"> 
       <li><a href="bottom.php">bottom 1</a></li> 
       <li><a href="bottom.php">bottom 2</a></li> 
    </ul> 
</div>

提前谢谢！

Answer 1

我对你想要实现的目标感到有点困惑，但是如果你想在jQuery UI tabs - how to change tab position中进行类似的布局，那么如果你不介意选择固定高度的标签布局，那么你可以只需像我在这里http://jsfiddle.net/L6QjK/2/

那样用css移动标签

如果你注意固定的高度，我到目前为止唯一的想法是用一个控制面板创建布局，而不是添加一些<div>看起来像控制面板，并在初始化之后从代码中移动一些标签这样：

$("#yourFakeControlPanel").append($(".ui-tabs-nav").find("#yourTab"));

$(".ui-tabs-nav").find("#yourTab").remove();

当所有选项卡都是静态的时，这是有效的，但是当我动态添加新标签时，我遇到了一些错误，因此请将此视为提示而不是确切的答案

Answer 2

我想我最终找到了答案。看看我的帖子，我已经在那里写了如何在同一时间jQuery UI tabs - how to change tab position

的顶部和底部制作标签

如果你觉得这很有帮助，那就把它标记为引导他人去正确解决方案的答案

顶部和底部都有jquery ui tab

2 个答案: