开发者

Separating Tabs from Container in jQuery UI

I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.

What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents positi开发者_Go百科on in the middle. Like this:

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
    <div id="tabs">
       <ul>
            <li>Pets</li>
            <li>Family</li>
            <li>Bio</li>
       </ul>
     </div>
</div>

So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).


I think what you need to do is use the 'select' method

So you would bind your links to the tab you want to click

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
   <ul>
        <li id="pets">Pets</li>
        <li id="family">Family</li>
        <li id="bio">Bio</li>
   </ul>
 </div>
</div>
$(function(){
//set-up your tabs as normal first

     $('#bio').click(function(){
        $('#center_console').tabs("select", '#bio');
     });
});

You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did

Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/

thanks

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜