ui-tabsで外部ページに遷移する方法

備忘録。

How to follow a tab's URL instead of loading its content via ajax http://jqueryui.com/demos/tabs/

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    }
});

このように指定すると、Ajaxを使わずに、aタグで指定されたURLのページへ遷移することができる。で、各ページに同様に記述し、それぞれデフォルトの選択タブをセットしておくと、タブを遷移しているように見え…ないこともない。そういうふうに使うのでは何のためにui-tabsを使うのか意味がないようにも思えるが、Ajaxに対応していない昔のページをとりあえず見た目だけでも置き換えるその場しのぎになるのだ。

タブの部分は

<div id="tabs">

<ul>
<li><a href="index.html">タブ1</a></li>
<li><a href="index2.html">タブ2</a></li>
<li><a href="index3.html">タブ3</a></li>
</ul>

<div id="tab1">
ページの内容
</div>

</div>

とする。それでもって、タブのイニシャライズの記述を、それぞれのページで

$('#tabs').tabs();
$('#tabs').tabs({ "selected": 1 }); // 2つのめのタブを選択状態に
$('#tabs').tabs({ "selected": 2 }); // 3つのめのタブを選択状態に

とすればよい。