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

Menu Bar

概要

  • メニューバーを表示します。
  • div要素が一つのメニューとして構築されます。
  • div要素をネストすることによって、階層化されたメニューを構築することができます。

利用方法

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>menubar sample</title>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/prototype.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/scriptaculous.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/spinelz_util.js"></script>

  <script type="text/javascript" src="../src/javascripts/spinelz/menubar.js"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/menubar.css" type="text/css">
  </style>
</head>
<body>  

<div id="menucontents">
  <div>File
    <div>New
      <div>Folder</div>
      <div id="file"><span onclick="foo()" style="display: block;">File</span></div>
    </div>
    <div>Save
      <div>Save As</div>
      <div>Overwrite</div>
    </div>
    <div>Open File ...</div>
    <div>Exit</div>
  </div>
  <div>Edit
  </div>
  <div>Help
    <div>Search</div>
    <div>About</div>
  </div>
</div>

<script type="text/javascript">
  var menubar = new MenuBar('menucontents');
  var foo = function() {
    alert('foo function was called.');
  }
</script>

API

コンストラクタ(element)

引数説明
elementHTML要素のID。この要素を解析してメニューバーを構築します。

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

オプション名デフォルト値説明
hideOnClickSubmenutrueサブメニューをクリックされたときにメニューを閉じるかどうか。
cssPrefix'custom_'カスタムスタイルシートのプレフィックス文字列。