jQuery - 右键菜单插件contextMenu使用详解8（菜单图标、菜单头部标题）

2017-11-07 发布：hangge 阅读：1844

十八、设置菜单项图标

contextMenu 本身自带了几个图标供我们使用，比如：剪切、粘贴、复制、删除、退出....但这些可能还是不能满足我们的需求。其实 contextMenu 还可以直接使用 Font Awesome 字体图标。

1，Font Awesome 介绍

Font Awesome 是一套目前最受欢迎最全面的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标和社交网络图标、Web 应用程序图标和编辑器图标等等。
关于 Font Awesome，我之前也写过相关的文章：CSS3 - 在html页面中使用Font Awesome字体图标

2，使用说明

contextMenu 对 Font Awesome 图标支持十分友好，使用时只需两步：

页面上将 Font Awesome 的 css 文件引入。
菜单项的 icon 属性配置成对应的 Font Awesome 图标名字。

3，使用样例

我们这里将菜单里后面的三个菜单项都配置成 Font Awesome 图标。

<link rel="stylesheet" href="css/font-awesome.min.css">

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',

         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
            "edit": {name: "编辑", icon: "edit"},
            "cut": {name: "啤酒", icon: "fa-beer"},
            "diamond": {name: "钻石", icon: "fa-diamond"},
            "refresh": {name: "刷新", icon: "fa-refresh"}
        }
     });
  });
</script>

十九、菜单头部标题

默认情况下菜单头部是没有标题栏的，但如果想要增加个标题栏（如下图），也是可以实现的。

给菜单添加个头部标题栏可以通过 css 样式设置，不过标题栏上的标题文字，可以有如下两种设置方法。

1，直接在 css 中设置标题文字

（1）实现原理

我们通过 css 定义一个标题栏样式，同时将菜单的 className 设置成这个样式。
同时标题文字也一同写在标题栏样式中。（代码第3行）

（2）样例代码

<style>
  .css-title:before {
      content: "hangge.com菜单";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      background: #DDD;
      padding: 2px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
  }
  .css-title :first-child {
      margin-top: 20px;
  }
</style>

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',
         className: 'css-title',
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
             "cut": {name: "剪切", icon: "cut"},
         }
     });
  });
</script>

2，在页面上通过 js 设置标题文字

（1）有时我们想让多个菜单共用一个标题栏样式，但又想让他们的标题文字不一样。又或者标题文字能够动态修改，那么就不能直接将文字写死在 css 中，而是从外部设置。具体作法如下：

标题栏样式还是和上面一样用 css 定义，同时将菜单的 className 设置成这个样式。
不过标题文字不再是写死在 css 中，而是通过 attr() 方法获取。而页面这边通过 js 设置标题文本信息。

（2）样例代码

<style>
  .data-title:before {
      content: attr(data-menutitle);
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      background: #DDD;
      padding: 2px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
  }
  .data-title :first-child {
      margin-top: 20px;
  }
</style>

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',
         className: 'data-title',
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
             "cut": {name: "剪切", icon: "cut"},
         }
     });

     //设置标题文字
     $('.data-title').attr('data-menutitle', "hangge.com");
  });
</script>