jQuery

jQuery UIでメニュー（Menu）を作る方法

2021年10月26日 by single コメントはまだありません

jQuery UIでメニュー（Menu）を作る方法

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Menu </title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <script>
        $( function() {
            $( "#menu" ).menu();
        } );
    </script>
    <style>
        .ui-menu { width: 150px; }
    </style>
</head>
<body>
    <ul id="menu">
        <li>
            <div><span class="ui-icon ui-icon-disk"></span>保存</div>
        </li>
        <li>
            <div><span class="ui-icon ui-icon-zoomin"></span>ズームイン</div>
        </li>
        <li>
            <div><span class="ui-icon ui-icon-zoomout"></span>ズームアウト</div>
        </li>
        <li class="ui-state-disabled">
            <div><span class="ui-icon ui-icon-print"></span>印刷...</div>
        </li>
        <li>
            <div>動画再生</div>
            <ul>
                <li>
                    <div><span class="ui-icon ui-icon-seek-start"></span>早送り</div>
                </li>
                <li>
                    <div><span class="ui-icon ui-icon-stop"></span>停止</div>
                </li>
                <li>
                    <div><span class="ui-icon ui-icon-play"></span>再生</div>
                </li>
                <li>
                    <div><span class="ui-icon ui-icon-seek-end"></span>巻戻し</div>
                </li>
            </ul>
            </li>
        <li>
            <div>さらに詳しく</div>
        </li>
    </ul>
<body>
</html>

デモ

Menu Widget

オプション

簡単ではありますが、オプションを紹介していきいます。

classes

メニューに適用できるスタイルのクラスを指定できるオプションです。

デフォルトは「{}」で未指定です。

メニュー全体のクラス「ui-menu」を変更する場合には、以下のようになります。

$( ".selector" ).menu({
  classes: {
    "ui-menu": "highlight"
  }
});

メニューの各項目のクラス「ui-menu-item」を変更する場合には、以下のようになります。

$( ".selector" ).menu({
  classes: {
    "ui-menu-item": "highlight"
  }
});

disabled

「true」にすれば、無効となるオプションです。デフォルトは「false」です。

icons

サブメニューに適用されるアイコンを指定できるオプションです。

デフォルトは、

{
  submenu: "ui-icon-carat-1-e"
}

で、以下のような右向きのアイコンになります。

items

メニュー各項目のセレクタになります。デフォルトは「> *」でメニュー対象エレメントの配下のエレメントすべてとなります。

menus

メニュー対象のエレメント定義になります。デフォルトは「ul」で、ulタグのオブジェクトが対象となります。

position

サブメニューの位置を定義するオプションです。詳細は「jQuery UI Position」をご参照ください。

これ、変更することはあまりない気がしますがね。

role

メニューやメニュー項目に適用できるロールをカスタマイズできるオプションです。

デフォルトは「menu」です。