jQuery UI标签在顶部和底部

Question

I would like to have a Jquery UI tab with top and button menu function, is it possible to do that ? (the content are loaded via ajax ,what i mean is the top tab and bottom tab both at the same time.)

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

Thank you in advance!

Answer 1

I am a bit confused about what you want to achieve, but if you are trying to make similiar layout as I am in jQuery UI tabs - how to change tab position ,then if you dont mind having the tabs layout of fixed height, then you can simply move the tabs by css as I did here http://jsfiddle.net/L6QjK/2/

If you DO mind the fixed height, my only idea so far is to create layout with one control panel, than add some <div> looking as control panel and move some tabs after initialization from the code by usinge something like this:

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

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

This was working when all the tabs were static, but I have ran to some errors, when adding new tabs dynamicaly, so consider this as a hint not as an exact answer

Answer 2

I think i have finaly found your answer. Look to my post, I have written there how to make tabs on the top and bottom same time jQuery UI tabs - how to change tab position

and if zou find this helpful, mark this as an answer to lead others to the right sollution