お手軽高機能！Closure UI【goog.ui.AnimatedZippy】

お手軽高機能！Closure UI

稲毛透

2012.10.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.AnimatedZippy」は、「ヘッダ」として設定した要素のクリックにより「コンテンツ」として設定した要素の表示／非表示切り替えを可能とするウィジェットです。「goog.ui.Zippy」との違いはクラス名の通り、コンテンツ部の開閉時にアニメーションする点です。

デモ

AnimatedZippyを二つ設置しました。それぞれ「AnimatedZippy～」と表示されているヘッダをクリックして動作を確認できます。

AnimatedZippy 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas commodo convallis nisi. Cras rhoncus elit non dolor. Vivamus gravida ultricies arcu. Praesent ipsum erat, vehicula et, ultrices at, dignissim at, ipsum. Aenean venenatis. Fusce blandit laoreet urna. Aliquam et pede condimentum lorem posuere molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce euismod, justo in feugiat feugiat, urna metus sagittis felis, in varius neque mauris vitae dui. Nunc vel sapien in diam laoreet euismod. Mauris quis felis ut ipsum auctor feugiat. Nulla facilisi. Proin vitae urna. Quisque dignissim commodo nisl. Curabitur bibendum.

AnimatedZippy 2

AnimatedZippy 1のイベントリスナにはハンドラを追加してあり、AnimatedZippy 1が閉じた際にはAnimatedZippy 2が開き、AnimatedZippy 1が開いた際にはAnimatedZippy 2が閉じるという動作をします。

デモコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>goog.ui.Zippy</title>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.events');
      goog.require('goog.ui.AnimatedZippy');
      goog.require('goog.ui.ZippyEvent');
    </script>
    <style>
      h2.zippy-header {
        background: #C0C0FF;
        margin-top: 10px;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 1px 3px;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
      }
      p.zippy-content {
        background: #DEDEFF;
        border: solid #C0C0FF;
        border-width: 0px 3px 3px 3px;
        margin-top: 0px;
        padding: 3px;
        text-align: justify;
        overflow: hidden;
      }
      div.zippy-content {
        background: #DEDEFF;
        border: solid #C0C0FF;
        border-width: 0px 3px 3px 3px;
        margin-top: 0px;
        padding: 3px;
        text-align: justify;
        overflow: hidden;
      }
      .goog-zippy-expanded img {
        width: 19px;
        height: 16px;
        background-image: url('http://closure-library.googlecode.com/svn/trunk/closure/goog/images/minus.png');
      }
      .goog-zippy-collapsed img {
        width: 19px;
        height: 16px;
        background-image: url('http://closure-library.googlecode.com/svn/trunk/closure/goog/images/plus.png');
      }
    </style>
  </head>
  <body>
    <h2 id="header1" class="zippy-header">
    　　<img src="http://closure-library.googlecode.com/svn/trunk/closure/goog/images/blank.gif" />
    　　AnimatedZippy 1
    </h2>
    <p id="content1" class="zippy-content">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas commodo
          convallis nisi. Cras rhoncus elit non dolor. Vivamus gravida ultricies arcu.
          Praesent ipsum erat, vehicula et, ultrices at, dignissim at, ipsum. Aenean
          venenatis. Fusce blandit laoreet urna. Aliquam et pede condimentum lorem
          posuere molestie. Pellentesque habitant morbi tristique senectus et netus et
          malesuada fames ac turpis egestas. Fusce euismod, justo in feugiat feugiat,
          urna metus sagittis felis, in varius neque mauris vitae dui. Nunc vel sapien
          in diam laoreet euismod. Mauris quis felis ut ipsum auctor feugiat. Nulla
          facilisi. Proin vitae urna. Quisque dignissim commodo nisl. Curabitur
          bibendum.
    </p>
    <h2 id="header2" class="zippy-header">
    　　<img src="http://closure-library.googlecode.com/svn/trunk/closure/goog/images/blank.gif" />
    　　AnimatedZippy 2
    </h2>
    <div id="content2" class="zippy-content">
      <div><input type="text" placeholder="テキストインプット" /></div>
      <div><button>ボタン1</button><button>ボタン2</button></div>
    </div>
    <script>
      var az1 = new goog.ui.AnimatedZippy('header1', 'content1', true);
      var az2 = new goog.ui.AnimatedZippy('header2', 'content2', false);
      goog.events.listen(az1, goog.ui.Zippy.Events.TOGGLE, function(event) {
        az2.setExpanded(!event.expanded);
      });
    </script>
  </body>
</html>

使い方

AnimatedZippyクラスのインスタンスを生成するだけで利用できます。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.events');
  goog.require('goog.ui.AnimatedZippy');
  goog.require('goog.ui.ZippyEvent');
</script>

6行目: Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～11行目: 必要とするClosure Libraryを宣言します。ここでは主役である「goog.ui.AnimatedZippy」と、イベントハンドリングの為に「goog.events」「goog.ui.ZippyEnvet」を宣言しています。

HTML要素

<h2 id="header1" class="zippy-header">
　　<img src="http://closure-library.googlecode.com/svn/trunk/closure/goog/images/blank.gif" />
　　AnimatedZippy 1
</h2>
<p id="content1" class="zippy-content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas commodo
      convallis nisi. Cras rhoncus elit non dolor. Vivamus gravida ultricies arcu.
      Praesent ipsum erat, vehicula et, ultrices at, dignissim at, ipsum. Aenean
      venenatis. Fusce blandit laoreet urna. Aliquam et pede condimentum lorem
      posuere molestie. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Fusce euismod, justo in feugiat feugiat,
      urna metus sagittis felis, in varius neque mauris vitae dui. Nunc vel sapien
      in diam laoreet euismod. Mauris quis felis ut ipsum auctor feugiat. Nulla
      facilisi. Proin vitae urna. Quisque dignissim commodo nisl. Curabitur
      bibendum.
</p>
<h2 id="header2" class="zippy-header">
　　<img src="http://closure-library.googlecode.com/svn/trunk/closure/goog/images/blank.gif" />
　　AnimatedZippy 2
</h2>
<div id="content2" class="zippy-content">
  <div><input type="text" placeholder="テキストインプット" /></div>
  <div><button>ボタン1</button><button>ボタン2</button><button>ボタン3</button><button>ボタン4</button></div>
</div>

54～57行目: 「AnimatedZippy 1」のヘッダ部です。
58～69行目: 「AnimatedZippy 1」のコンテンツ部です。
70～73行目: 「AnimatedZippy 2」のヘッダ部です。
74～77行目: 「AnimatedZippy 2」のコンテンツ部です。

AnimatedZippyオブジェクトの生成と利用

var az1 = new goog.ui.AnimatedZippy('header1', 'content1', true);
var az2 = new goog.ui.AnimatedZippy('header2', 'content2', false);
goog.events.listen(az1, goog.ui.Zippy.Events.TOGGLE, function(event) {
  az2.setExpanded(!event.expanded);
});

79, 80行目: AnimatedZippyオブジェクトを生成します。コンストラクタの引数「header」と「content」は必須パラメータです。ID文字列または直接エレメントオブジェクトを渡します。オプション引数の「opt_expanded」には初期化時の表示／非表示を真偽値で指定します。AnimatedZippy 1は開いた状態、AnimatedZippy 2は閉じた状態が初期状態となります。
81～83行目: AnimatedZippy 1のイベントリスナ（TOGGLEイベント）にハンドラを追加しています。ハンドラのに渡されるイベントオブジェクトは「goog.ui.ZippyEvent」オブジェクトです。このオブジェクトの「expanded」プロパティにはAnimatedZippy 1が開かれたかどうかを表す真偽値が格納されています。ここではAnimatedZippy 1の開閉状態の逆をAnimated Zippy 2へ設定するという処理になっています。

まとめ

AnimatedZippyオブジェクトを、ヘッダとコンテンツを指定して生成するだけなのでとても簡単に利用できます。ZippyEventをハンドリングし、他のコンポーネントと連係することでさらに利用範囲を拡げることができると思います。(^^)

お手軽高機能！Closure UI【goog.ui.AnimatedZippy】

デモ

デモコード

index.html

使い方

Closure Libraryのロード

HTML要素

AnimatedZippyオブジェクトの生成と利用

まとめ

参考

イベント

EVENT【5/29（水）大阪】Alteryxの使い方から導入メリットまですべてがわかるセミナー＆ワークショップ

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

お手軽高機能！Closure UI【goog.ui.AnimatedZippy】

デモ

デモコード

index.html

使い方

Closure Libraryのロード

HTML要素

AnimatedZippyオブジェクトの生成と利用

まとめ

参考

イベント

EVENT【5/29（水）大阪】Alteryxの使い方から導入メリットまですべてがわかるセミナー＆ワークショップ

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜フィンテック / リテール 業界案件特集〜 を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

関連記事

JSDoc @depreacted 태그로 점진적 개선해보기

話題の日本酒「ソースコード」を読んで（飲んで）みた

ECMAScript의 해시뱅

ESLintでconsoleの使用をエラーにする

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！