javascript - 在 jQuery 的 contextMenu 插件中定义图标

coder 2025-02-17 原文

到目前为止，我已经能够通过在 html 文件中包含 javascript 来创建绑定(bind)到鼠标右键 cilck 的上下文菜单:

var Feature = {
    register_contextMenu: function() {
        $.contextMenu({
            selector: '*',
            items: {
                "item_one": { name: "Item_one", icon: "./path1" },
                "item_two": { name: "item_two", icon: "./path2" }
            }
        });
    }
};

$(document).ready(Feature.register_contextMenu);

如何在选项旁边显示图标？

插件的文档(http://medialize.github.io/jQuery-contextMenu/)提到必须使用某些选择器在 CSS 中定义图标。

在这种情况下，如何将 CSS 与 contextMenu 结合使用？

最佳答案

你检查过source code吗？对于 Github 上的演示？

看起来你只是添加了一个 CSS 类:

.context-menu-item.icon-<NAME-OF-ICON> {
    background-image: url(images/<NAME-OF-ICON>.png);
}

文档还指出:

(string) icon
Specifies the icon class to set for the item.

Icons must be defined in CSS with selectors like .context-menu-item.icon-edit, where edit is the icon class.

create() 函数负责将图标类附加到项目。此代码出现在当前 source code 的第 1077 行 .

// add icons
if (item.icon) {
     $t.addClass("icon icon-" + item.icon);
}

来自演示:

/* icons
    #protip:
    In case you want to use sprites for icons (which I would suggest you do) have a look at
    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
    .context-menu-item.icon:before {}
 */
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }

演示

我从 example 中删除了“编辑”、“删除”和“添加”菜单项。并在菜单中添加了“在 Google+ 上分享”、“在 Facebook 上分享”和“保存”选项。

只需按下面的“运行代码片段”即可查看其运行情况。

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "google-plus" },
      "facebook" : { name: "Share on Facebook", icon: "facebook" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "save" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

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

.context-menu-icon {
  min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px;
}

.context-menu-icon-save {
  /* Source: http://www.famfamfam.com/lab/icons/silk/icons/disk.png */
  background-image: url("http://i.imgur.com/4LyeGi1.png");
}

.context-menu-icon-facebook {
  /* Source: http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png */
  background-image: url("http://i.imgur.com/EVcCwyZ.png");
}

.context-menu-icon-google-plus {
  /* Source: https://cdn1.iconfinder.com/data/icons/professional-toolbar-icons-2/16/Google_plus_google.png */
  background-image: url("http://i.imgur.com/Zg0UFmq.png");
}

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

更新

我建议你使用FontAwesome之类的字体图标库。这是最简单的解决方案。

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var msg = "clicked: " + key;
      window.console && console.log(msg) || alert(msg); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "google-plus" },
      "facebook" : { name: "Share on Facebook", icon: "facebook" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "save" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

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

.context-menu-icon.context-menu-icon-save:before,
.context-menu-icon.context-menu-icon-facebook:before,
.context-menu-icon.context-menu-icon-google-plus:before {
  font-family: FontAwesome !important;
}

.context-menu-icon.context-menu-icon-save:before {
  content: "\f0c7"; /* fa-floppy-o */
}

.context-menu-icon.context-menu-icon-facebook:before {
  content: "\f230"; /* fa-facebook-official */
}

.context-menu-icon.context-menu-icon-google-plus:before {
  content: "\f0d4"; /* fa-google-plus-square */
}

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

看起来这个插件支持 FontAwesome，所以你不需要自定义任何 CSS。

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var msg = "clicked: " + key;
      window.console && console.log(msg) || alert(msg); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "fa-google-plus-square" },
      "facebook" : { name: "Share on Facebook", icon: "fa-facebook-official" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "fa-floppy-o" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

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

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

关于javascript - 在 jQuery 的 contextMenu 插件中定义图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26800350/

contextMenu javascript 34 icon context jquery web

有关javascript - 在 jQuery 的 contextMenu 插件中定义图标的更多相关文章

ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。最佳答案这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby-on-rails - form_for 中不在模型中的自定义字段 - 2
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。最佳答案或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
ruby - 定义方法参数的条件 - 2
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
ruby - 如何在 Grape 中定义哈希数组？ - 2
我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>
ruby - 获取模块中定义的所有常量的值 - 2
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？最佳答案为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

javascript - 在 jQuery 的 contextMenu 插件中定义图标

演示

更新

有关javascript - 在 jQuery 的 contextMenu 插件中定义图标的更多相关文章

随机推荐