Analyse détaillée de l'icône personnalisée ContextMenu du plug-in jQuery

Cet article présente principalement en détail le code pertinent de l'icône personnalisée ContextMenu du plug-in jQuery. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra vous aider.

Le plug-in ContextMenu de jQuery est très simple à utiliser (le principe actuel est de lire mon dernier message sur Weibo, haha), mais si vous souhaitez changer l'icône du menu, beaucoup de gens sont à nouveau confus. Parce que le plug-in ContextMenu ne fournit qu'un nombre limité d'icônes, telles que couper, copier, supprimer, etc.

Modifier le code pertinent de l'icône :

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

Effet d'icône :

Maintenant, nous voulons ajouter une option "Aide", l'icône est un graphique de point d'interrogation, que devons-nous faire ?

Tout d'abord, vous devez préparer une image png 16*16. Recherchez des images appropriées en ligne, puis recadrez-les à l'aide de Photoshop ou de Meituxiu Xiu. Nommez l’image help.png et copiez l’image dans le dossier d’images spécifié.

Ajoutez ensuite le code suivant au code ci-dessus :

"help": {nom: "Aide", icône : "help"}

Modifiez ensuite le fichier jquery.contextMenu.css, recherchez l'emplacement où l'image de l'icône est définie et ajoutez le code correspondant pour l'icône d'aide.

.context-menu-item.icon-help { background-image: url(images/help.png); }

D'accord, vous' Une fois terminé, l'effet est le suivant :

Recommandations associées :

jQuery menu contextuel contextuelUtilisation du menu example_jquery

Développer le menu contextuel d'Internet Explorer (ContextMenu)_javascript skills

html5 spécifie l'attribut de menu contextuel contextmenu de l'élément

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!