logoMemo クラウド環境でのメモ帳

jQuery1.0.3(2006年版)のプラグインtabs.jsの使用例。Bootstrap-tabsと同じ機能だがタブのスタイルに画像を使っている。過去に使ってきたオリジナル/script/jquerytabs.jsにはjQuery1.1.3.1を含む。ここで使っているスクリプトはBootstrapと併用できるようにした/assets/js/tabs.jsで、下記のコードを追加した。

$(function() { $('#jQueryTabs').tabs({ fxSlide: false, fxFade: true, fxSpeed: 'normal' });});

タブを記述するページで、<div id="jQueryTabs">と書く。初期パラメータを変えたいときは本文でfunctionを書く。

/assets/js/jquery.jsを先に読み込む必要がある。スタイルはscript/jquerytabs.cssと同じだが、今後のカストマイズで混乱しないように別個に/assets/css/tabs.cssとした。

Oneの内容
Twoの内容
Threeの内容
<link href="/assets/css/tabs.css" rel="stylesheet" type="text/css">
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/tabs.js"></script>
<div id="jQueryTabs">
  <ul class="tabs-nav">
    <li class="tabs-selected"><a href="#one"><span>One</span></a></li>
    <li class=""><a href="#two"><span>Two</span></a></li>
  </ul>
  <div id="one" class="tabs-container">
   Oneの内容
  </div>
  <div id="two" class="tabs-container tabs-hide">
   Twoの内容
  </div>
</div>
同ページに異なるタブを書くことができる。functionを別名で呼び出し、ID名を別に書けばよい。
Oneの内容
Twoの内容
Threeの内容
<script type="text/javascript">
  $(function() { $('#areaTabs').tabs({ fxSlide: true, fxFade: true, fxSpeed: 500 });});
</script>

Bootstrap-Tabs BACK | HOME | ARCHIVE ハンディGPS