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

この記事は2013年8月15日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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

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>

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

3つめは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がなくなっていることです。

4つめは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がクラスに付加/削除が切り替わるのみなのですね。

5.まとめ

いかがだったでしょうか。
ON/OFFをクリックする度に切り替えるトグルボタンが実装できることがわかりました。
また、メソッド名を切り替えると動きが変わるというjQueryUIのコツが少し掴めたのではないでしょうか。
次回はjQueryUIシリーズ最終回、ユーティリティ編です。

6.参考ページ

jQueryUI公式サイト:http://jqueryui.com/
jQuery 日本語リファレンス:http://js.studio-kingdom.com/jqueryui/widgets

  • このエントリーをはてなブックマークに追加

PAGE TOP