HsbtDiary

■ [javascript][jquery] jQuery で tab ui を作る

jQuery UI というのを使うらしい。

使い方は Configure your download から必要なコンポーネントを選択してからダウンロードして生成された js/jquery-ui-1.8.5.custom.min.js を include するだけ。tabs の場合は development-bundle/themes/base/jquery.ui.tabs.css も必要かもしれない。

上記の2ファイルを view から参照するようにした後は以下のようなコードでタブが生成される。

- content_for :head do
  :javascript
    $(function() {
      $('#tabs').tabs();
    });

#tabs
  %ul
    %li
      %a{:href => "#tab1"} タブ1
    %li
      %a{:href => "#tab2"} タブ2

  #tab1
    foo

  #tab2
    foo

tabs の中に色々処理を書くことで tab クリック時の挙動とか、エフェクトを変えられるようだけど、その辺はまた後で。

■ [javascript][jquery] jQuery.ui.tabs でタブを切り替えた時に何かする

タブの選択情報自体を保持して DB に書き込む必要があったので、 jQueryその２ - natu_nの日記 を参考にして、hidden field に埋め込む術を使った。

$('#tabs').tabs({
  show: function() {
    var tab = $('.ui-tabs-selected a').attr('href').slice(1);
    var doc = document.getElementById('user_category');
    doc.setAttribute('value', tab);
  });
});

div#hoge というタブ名称を使っている場合は hoge が user_category の value に設定される。便利。