Top > 開発ガイド > Spinelzリファレンス > Switcher

Switcher

概要

  • コンテンツブロックの開閉を行います。

利用方法

<head>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/prototype.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/effects.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/spinelz_util.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz/switcher.js"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/switcher.css" type="text/css">
</head>
<body>
  <div>
    <div>
      <span id="switch"></span>
      <span>title</span>
    </div>
    <div id="content">
      content
    </div>
  </div>
  
  <script type="text/javascript">
    new Switcher('switch', 'content', {
      open: false,
      boforeOpen: function(content) {
        content.innerHTML = 'before open';
      },
      afterOpen: function(content) {
        content.innerHTML = 'after open';
      },
      beforeClose: function(content) {
        content.innerHTML = 'before close';
      },
      afterClose: function(content) {
        content.innerHTML = 'after close';
      }
    });
  </script>
</body>

API

コンストラクタ(sw, content)

引数説明
swHTML要素のID。この要素がクリックされることによってcontentが開閉します。
contentHTML要素のID。この要素が開閉されます。

オプション 第3引数として以下のオプションを指定することができます。 オプションを指定するかどうかは任意です。

オプション名デフォルト値説明
openfalse初期表示時にcontentを開くかどうか。
duration0.4開閉のスピード。
beforeOpenPrototype.emptyFunctioncontentが開く直前に呼ばれる関数。contentが引数として渡されます。
afterOpenPrototype.emptyFunctioncontentが開いた直後に呼ばれる関数。contentが引数として渡されます。
beforeClosePrototype.emptyFunctioncontentが閉じる直前に呼ばれる関数。contentが引数として渡されます。
afterOpenPrototype.emptyFunctioncontentが閉じた直後に呼ばれる関数。contentが引数として渡されます。
cssPrefix'custom_'カスタムスタイルシートのプレフィックス文字列。