読者です 読者をやめる 読者になる 読者になる

コンテキストメニューのアイコンをカスタマイズ

jQuery context menu  

https://swisnl.github.io/jQuery-contextMenu/

これを使ったコンテキストメニューのアイコンの変更の方法、

items オプションを指定する時に記述する icon キーワードに沿って、以下のクラス名で

CSSを用意しないとならない。

       .context-menu-item.context-menu-icon-キーワード {

         /* アイコンのスタイルを書く。*/

      }

       .context-menu-item.context-menu-icon- {

         /* マウス hover 時のスタイルを書く。*/

      }

例)

items: {  "config": { name: "設定", icon: "config" }, 

という items を書いた場合、

.context-menu-item.context-menu-icon-config{
      background-image: url(images/cogs_b.png);
      background-repeat: no-repeat;
      background-position: 4px 2px;
      min-height: 18px;
}
.context-menu-item.context-menu-icon-config.context-menu-hover{
      background-image: url(images/cogs_w.png);
      background-color: #2980b9;
}