2016年9月11日日曜日

[MDL] コンテキスト メニュー

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、コンテキスト メニューのサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

  1. コンテキスト メニューを表示するためのトリガーとなる <div> タグを追加します。

    HTML:

    <div id="context-menu" class="context-menu__show-trigger"></div>
    
    CSS:
    .context-menu__show-trigger {
        position: absolute;
    }
    
  2. 実際に表示されるメニューを追加します。

    <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect"
        for="context-menu">
      <li class="mdl-menu__item">Some Action</li>
      <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
      <li disabled class="mdl-menu__item">Disabled Action</li>
      <li class="mdl-menu__item">Yet Another Action</li>
    </ul>
    
  3. コンテキスト メニューを表示させたい要素に data-context-menu 属性を付加します。値には、1. で追加したトリガーの id を指定します。

    <tr data-context-menu="context-menu">
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    
  4. JavaScript で contextMenu() 関数を呼び出して、3. の要素とコンテキスト メニューの関連付けを行います。

参考

0 件のコメント:

コメントを投稿