jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録
に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録
を書いたことを利用して、コンテキストメニューにアイコンを設定します。
今回も、Fontello - icon fonts generator を使います。
表示するアイコンのCSS、
全てのアイコンの外観は、contextmenu-icon クラスとして定義します。
@font-face{ font-family: 'fontello'; src: url('font/fontello.eot'); src: url('font/fontello.eot#iefix') format('embedded-opentype'), url('font/fontello.woff') format('woff'), url('font/fontello.ttf') format('truetype'), url('font/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal; } .contextmenu-icon{ font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 16px; display: inline-block; text-decoration: inherit; cursor: pointer; color: #0085c9; margin: 1px 1px; } /** * folder-plus  */ .contextmenu-icon.folder-plus::before{ content : "\00ecf2"; } /** * file-plus  */ .contextmenu-icon.file-plus::before{ content : "\00ed2a"; } /** * rename  */ .contextmenu-icon.rename-icon::before{ content : "\00e801"; } /** * delete  */ .contextmenu-icon.delete-icon::before{ content : "\00ec43"; } /** * Cut  */ .contextmenu-icon.cut-icon::before{ content : "\00e88a"; } /** * Copy  */ .contextmenu-icon.copy-icon::before{ content : "\00f24d"; } /** * Paste  */ .contextmenu-icon.paste-icon::before{ content : "\00f0ea"; }
jsTree コンテキストメニュー定義するJSの一部分です。(action など長い部分は省略)
各メニューの "icon" 属性に、contextmenu-icon と 各々アイコンの2つのクラス名を書きます。
"contextmenu":{ "items":function($node){ return { "createFolder":{ "separator_before": false, "separator_after": false, "icon": "contextmenu-icon folder-plus", "label": "新規フォルダ作成", "_disabled": function(data){===(省略)=== }, "action": function(data){ ===(省略)=== } }, "createFile":{ "separator_before": false, "separator_after": false, "icon": "contextmenu-icon file-plus", "label": "新規ファイル作成", "_disabled": function(data){===(省略)=== }, "action": function(data){ ===(省略)=== } }, "rename":{ "separator_before": true, "separator_after": false, "icon": "contextmenu-icon rename-icon", "label": "名称の変更", "_disabled": false, "action": function(data){ ===(省略)=== } }, "remove":{ "separator_before": false, "separator_after": false, "icon": "contextmenu-icon delete-icon", "label": "削除", "_disabled": function(data){===(省略)=== }, "action": function(data){ ===(省略)=== } }, "cut":{ "separator_before": true, "separator_after": false, "icon": "contextmenu-icon cut-icon", "label": "切り取り", "_disabled": function(data){===(省略)=== }, "action": function(data){ ===(省略)=== } }, "copy":{ "separator_before": false, "separator_after": false, "icon": "contextmenu-icon copy-icon", "label": "コピー", "_disabled": function(data){===(省略)=== }, "action": function(data){ ===(省略)=== } }, "paste":{ "separator_before": false, "separator_after": false, "icon": "contextmenu-icon paste-icon", "label": "貼り付け", "_disabled": function(data){===(省略)=== } "action": function(data){ ===(省略)=== } } }; } }
このようになります。