jQueryUIをはじめる方は必見、超簡単サンプル集～その５～

jQueryUIのサンプルスクリプトを作成していきます。
今回はエフェクト編後半戦です。

・jQuery及びjQueryUIのバージョンは次の通りです。
jQuery ：1.9.1
jQueryUI：1.10.3

・そして、今回作成するのは次の4個。
Show, SwitchClass, Toggle, ToggleClass

早速一つずつサンプルを見ていきましょう。
まずは、Showのサンプルです。

1.Showのサンプルスクリプト

前回のHideの逆であることがわかります。
構成は殆ど同じなので分かりやすいですね。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
  .toggler{ width: 500px; height: 200px; }
  #effect { width: 400px; height: 135px; border:1px solid #000; padding:5px;}
  </style>
  <script>
  $(function() {
    function runEffect() {
      var selectedEffect = $( "#effectTypes" ).val();   //選択されたエフェクトが
何か取得
      var options = {};                                 //オプションは殆どのエフ
ェクトでは設定しなくてOK
      if (selectedEffect === "scale"){                  //scaleとsizeが選択され>ている場合はオプションを設定する
        options={percent:0};
      } else if (selectedEffect === "size") {
        options={to:{width:200, height:60}};
      }
      $( "#effect" ).show(selectedEffect, options, 1000, callback);     //実行
    };

    function callback(){        //一旦showしたら再び非表示にする
      setTimeout(function(){
        $( "#effect:visible" ).removeAttr("style").fadeOut();
      }, 1000 );
    };

    $( "#button" ).click(function() {
      runEffect();
      return false;
    });

    $("#effect").hide();
  });
  </script>
</head>
<body>
<input type="button" id="button" value="click">
<div class="toggler">
  <div id="effect">
    <h3>Show</h3>
    <p>このボックスが選択したアクションで表示されます</p>
  </div>
</div>
<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>
</body>
</html>

→script記述の最後に「$(“#effect”).hide();」でデフォルトでは非表示にしているところが意外にポイントかもしれません。

次はSwitchClassを実装してみましょう。

2.SwitchClassのサンプルスクリプト

ColorAnimationのサンプルと似ていますが、今回はswitchclassでクラス名を切り替えています。

<html lang="ja">
<head>
        <meta type="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
        #effect{border:1px solid #000; padding:10px;}
        .before{width:500px; height:200px;}
        .after {width:750px; height:300px;}
        </style>
        <script>
        $(function(){
                $("#button").click(function(){
                        $(".before").switchClass("before","after",1000);
                        $(".after").switchClass("after","before",1000);
                        return false;
                });
        });
        </script>
</head>
<body>
<input type="button" id="button" value="click!">
<div class="toggler">
        <div id="effect" class="before">この要素のclassがswitchする</div>
</div>
</body>
</html>

→勝手にアニメーションしてくれるところがいいですね。

３つめはToggleです。

3.Toggleのサンプルスクリプト

showとhideを組み合わせたものと考えるとわかりやすいでしょうか。
ON,OFFのトグルボタンなどでよく使われます。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
  #effect { width: 400px; height: 135px; border:1px solid #000; padding:5px;}
  </style>
  <script>
  $(function() {
    function runEffect() {
      var selectedEffect = $( "#effectTypes" ).val();   //選択されたエフェクトが何か取得
      var options = {};                                 //オプションは殆どのエフェクトでは設定しなくてOK
      if (selectedEffect === "scale"){                  //scaleとsizeが選択されている場合はオプションを設定する
        options={percent:0};
      } else if (selectedEffect === "size") {
        options={to:{width:200, height:60}};
      }
      $( "#effect" ).toggle(selectedEffect, options, 1000);     //実行
    };
    $( "#button" ).click(function() {
      runEffect();
      return false;
    });
  });
  </script>
</head>
<body>
<input type="button" id="button" value="click">
<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>
<div id="effect">
<h3>Toggle</h3>
<p>このボックスが選択したアクションで表示/非表示されます</p>
</div>
</body>
</html>

→show,hideメソッドをtoggleメソッドに書き換えれば基本的にOKです。
ポイントとしてはcallbackがなくなっていることです。

４つめはToggleClass。
本日はこれで最後です。

4.ToggleClassのサンプルスクリプト

AddClass,RemoveClassのトグルバージョンです。
show/hide⇒toggleの関係がこちらにもあてはまりますね。callbackが不要になります。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
    .orgClass{width:400px; height:300px; font-size:18px; background-color:blue;}
    .newClass{width:600px; height:400px; font-size:32px; background-color:red;}
  </style>
  <script>
  $(function() {
    $( "#button" ).click(function() {
      $( "#effect" ).toggleClass( "newClass", 1000);
      return false;
    });
  });
  </script>
</head>
<body>
<input type="button" id="button" value="click">
<div id="effect" class="orgClass">この領域にクラス「newClass」をaddします</div>
</body>
</html>

→ポイントはスタイルをnewClassをorgClassより先に記述していると反映されないところでしょうか。
ToggleClassでは単純にnewClassがクラスに付加/削除が切り替わるのみなのですね。