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

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

お手軽高機能！Closure UI

お手軽高機能！Closure UI

#JavaScript
#HTML5
#Closure
#RIA
稲毛 透

稲毛 透

facebook logohatena logotwitter logo
Clock Icon2012.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をハンドリングし、他のコンポーネントと連係することでさらに利用範囲を拡げることができると思います。(^^)

参考

Share this article

facebook logohatena logotwitter logo

関連記事

ใช้ HTML＋JavaScript เรียก API Gateway กับ Lambda ที่สร้างด้วย REST API: Serverless Web App บน AWS : Part 6

ใช้ HTML＋JavaScript เรียก API Gateway กับ Lambda ที่สร้างด้วย REST API: Serverless Web App บน AWS : Part 6

User avatar
Supanut Akaram
2024.11.11
【React 19】サクッと理解するuseActionState

【React 19】サクッと理解するuseActionState

User avatar
戸田駿太
2024.10.11
[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする

[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする

User avatar
中村 修太
2024.10.10
[Bun] JavaScriptでC言語のファイルを簡単に実行する

[Bun] JavaScriptでC言語のファイルを簡単に実行する

User avatar
中村 修太
2024.09.26
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.