サンプル

jQuery UIタブのサンプルを少し試してみます。

      $('#jqtab-example1 > ul')
          .tabs({ fxFade: true, fxSpeed: 'fast' });
メソッドtabsの引数から、フェイドエフェクトfxFadeと エフェクトスピードfxSpeed ("slow", "normal", "fast" ,またはミリ秒) を指定しています。
  <script type="text/javascript">
   $(function() {
      $('#jqtab-example2 > ul').tabs({fxFade:true,fxSpeed:'fast'});
   });
  </script>
  
  <div id="jqtab-example2">
    <ul>
      <li><a href="#tab2-1"><span>JavaScript</span></a></li>
      <li><a href="#tab2-2"><span>解説</span></a></li>
      <li><a href="#tab2-3"><span>リンク</span></a></li>
    </ul>

    <div id="tab2-1">
      $('#jqtab-example1 > ul')<br>
          .tabs({ fxFade: true, fxSpeed: 'fast' });
    </div>

    <div id="tab2-2">
     メソッドtabsの引数から、フェイドエフェクトfxFadeと
     エフェクトスピードfxSpeed
     ("slow", "normal", "fast" ,またはミリ秒) を指定しています。
    </div>

    <div id="tab2-3">
     ソース
    </div>
  </div>
     
      $('#jqtab-example3 > ul').tabs({ fxSlide: true });
メソッドtabsの引数から、スライドエフェクトfxSlideを指定しています。
  <script type="text/javascript">
   $(function() {
      $('#jqtab-example3 > ul').tabs({ fxSlide: true });
   });
  </script>

  <div id="jqtab-example3">
    <ul>
      <li><a href="#tab3-1"><span>jQuery</span></a></li>
      <li><a href="#tab3-2"><span>解説</span></a></li>
      <li><a href="#tab3-3"><span>ソース</span></a></li>
    </ul>

    <div id="tab3-1">
    <pre class="pro-source">
   $(function() {
      $('#jqtab-example3 > ul').tabs({ fxSlide: true });
   });</pre>
    </div>

    <div id="tab3-2">
メソッドtabsの引数から、スライドエフェクトfxSlideを指定しています。 
    </div>

    <div id="tab3-3">
     ソース
    </div>
  </div>
     $('#jqtab-example4 > ul').tabs({ cache: false });
a要素のhref属性へ、読み込みたいテキストファイルを指定するだけです。
例:<li><a href="./test2.txt"><span>Ajaxロードサンプル1</span></a></li>
Ajaxロードサンプル2はimgタグを書いたファイルを読み込んでいます。
  <script type="text/javascript">
   $(function() {
      $('#jqtab-example4 > ul').tabs({ cache: false });
   });
  </script> 

  <div id="jqtab-example4">
    <ul>
      <li><a href="#tab4-1"><span>jQuery</span></a></li>
      <li><a href="./test2.txt"><span>Ajaxロードサンプル1</span></a></li>
      <li><a href="./test3.txt"><span>Ajaxロードサンプル2</span></a></li>
      <li><a href="#tab4-2"><span>解説</span></a></li>
      <li><a href="#tab4-3"><span>ソース</span></a></li>
    </ul>

    <div id="tab4-1">
    <pre class="pro-source">
     $('#jqtab-example4 > ul').tabs({ cache: false });</pre>
    </div>

    <div id="tab4-2">
a要素のhref属性へ、読み込みたいテキストファイルを指定するだけです。<br>
例:<li><a href="./test2.txt"><span>Ajaxロードサンプル1</span></a></li><br>
Ajaxロードサンプル2はimgタグを書いたファイルを読み込んでいます。
    </div>

    <div id="tab4-3">
<pre class="pro-source">ソース</pre>
    </div>
  </div>

jQuery UIタブのサンプルは、UI/Tabs Demoでもいくつかみることができます。 あらかじめ開くタブを指定したり、プログラムで開閉を制御したり、無効化したり、タブを追加削除するなど多くの機能が用意されています。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。