読者です 読者をやめる 読者になる 読者になる

ネット偽善者でもいいじゃない

悩んでるなら面白いマンガ読もう

jQuery_uiのエフェクトの書き方がfxからshowに変わってる

jQuery_ui の使用がバージョンに異なっていて困ったので記載

2014年11月現在、jQuery_uiのバージョン1.11.2を使っていますが バージョンが違っているせいかコードの記載方法が異なる・・・

エフェクトをつけるのに fx opacityなどを使っていたのですが全然動かない・・・

例えば今、jQuery_uiでtabsを扱っているのですが ネットで検索した情報や一年前の本などではちょっと書き方が異なってて詰まったので記載

tabsのエフェクトを変える

jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions

のサイトが真っ先にヒットしたけど 今は記述の仕方が違うみたいなので注意!

jQuery_uiのサイトのAPI Documentationを参考にしました

http://api.jqueryui.com/tabs/

例えば、タブをゆっくり表示させる透明度変化のアニメーションは

古い

$('#tabs').tabs({fx: {opacity: "toggle", duration: "normal"}})

のように記載していましたが

新しい

$('#tabs').tabs({show:{effect:"fade", duration: 100}});

(完全に一致したエフェクトではないみたいですが)

のようになります。 色々と試してみなければですねー

ちなみにtabsだけ作りたい場合のコード全体を下に記載しておきます (jquery-ui.min.jsなど必要なファイルのディレクトリはご自分で場所を設定されてください)

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>jQuery_UI_tabs</title>
       <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
       <script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script>
       <script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
       <script>
           window.addEventListener("load", function () {
               resizeTo(400, 300); //ウインドウサイズを指定
               //タブ切り替えインターフェースの実装
           });
           $(function(){
               $('#tabs').tabs({show:{effect:"fold", duration:"normal"}});
           });
       </script>
       <style>
    body{
        font: 10px "Trebuchet MS", sans-serif;
        margin: 40px
    }
    .demoHeaders {
        margin-top: 2em;
    }
    </style>
   </head>
    <body>
    <!-- tabs -->
        <h2 class="demoHeaders">Tabs</h2>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">First</a></li>
                    <li><a href="#tabs-2">Second</a></li>
                    <li><a href="#tabs-3">Third</a></li>
                </ul>
                <div id="tabs-1">タブ1番です
                </div>
                <div id="tabs-2">タブ2番です
                </div>
                <div id="tabs-3">タブ3番です
                </div>
            </div>
    </body>
</html>