简单菜单的客户机端框架

模块详细信息

简单菜单框架中的 4 个模块提供了呈示菜单所需的所有信息。为了提高灵活性，除 JavaScript 模块以外的模块将配置为主题模块。它们分别包含在每个主题中。创建或克隆您自己的主题时，您必须将所有必需资源复制到主题中。

复制缺省主题时，该主题包含所有必需资源。

以下列表描述了主题中各个模块需要的所有资源。

• wp_simple_contextmenu_js（系统模块）
• wp_simple_contextmenu_main（主题模块）
  • 元模块，未引用任何资源
• wp_simple_contextmenu_css（主题模块）
  • static resources/css/wp_simple_contextmenu.css 的主题根目录
  • static resources/css/wp_simple_contextmenu.css.uncompressed.css 的主题根目录
  • static resources/css/wp_simple_contextmenuRTL.css 的主题根目录
  • static resources/css/wp_simple_contextmenuRTL.css.uncompressed.css 的主题根目录
  • static resources/css/default/contextmenu.css 的主题根目录
  • static resources/css/default/contextmenu.css.uncompressed.css 的主题根目录
  • static resources/css/default/contextmenuCommon.css 的主题根目录
  • static resources/css/default/contextmenuCommon.css.uncompressed.css 的主题根目录
  • static resources/css/default/contextmenuRTL.css 的主题根目录
  • static resources/css/default/contextmenuRTL.css.uncompressed.css 的主题根目录
• wp_simple_contextmenu_template（主题模块）
  • static resources/menuDefinitions/templates/simpleMenuTemplate.html 的主题根目录

Templates

菜单提供了嵌入在页面标记中并通过模块 wp_simple_contextmenu_template 提供的缺省模板。如果初始化菜单时未传递内联模板或 templateID，那么框架将还原为缺省模板。

您可以定义含有通过菜单标记嵌入的内联模板的模板。

<span role="button" aria-haspopup="true" class="wpthemeMenuFocus"
          onclick="if (typeof wptheme != 'undefined') wptheme.contextMenu.init({ 'node': this, menuId: 'pageAction', jsonQuery: {'navID':ibmCfg.portalConfig.currentPageOID}, params: {'alignment':'right'}});"
          <span class="wpthemeUnderlineText" id="wpContextMenu">My Menu</span>
          ... <your template markup appears here> ...
      </span>

另外，也可以通过标识使用所引用的模板。调用菜单的 init 方法时，可以传递 templateID 作为其中一个参数。此标识在 DOM 中解析为 HTML 元素标识，并且必须指向有效的模板。

<span id="exampleTemplateId" class="wpthemeMenuLeft">
    <div class="wpthemeMenuBorder">
        <div class="wpthemeMenuNotchBorder"></div>
        <!-- define the menu item template inside the "ul" element.  only "css-class", "description", and "title" are handled by the theme's sample javascript. -->
        <ul class="wpthemeMenuDropDown wpthemeTemplateMenu" role="menu">
            <li class="${css-class}" role="menuitem" tabindex="-1"  ><span class="wpthemeMenuText" >${title}</span></li>
        </ul>
    </div>
    <!-- Template for loading -->
    <div class="wpthemeMenuLoading wpthemeTemplateLoading">${loading}</div>
    <!-- Template for submenu -->
    <div class="wpthemeAnchorSubmenu wpthemeTemplateSubmenu">
        <div class="wpthemeMenuBorder wpthemeMenuSubmenu">
            <ul id="${submenu-id}" class="wpthemeMenuDropDown" role="menu"><li role="menuitem" tabindex="-1"></li></ul>
        </div>
    </div>
</span>

模板包含 3 个通过类标识的子模板。

菜单项模板

通过类 wpthemeTemplateMenu 进行定义。为了生成各个菜单项，此 DOM 节点包含的项将用作模板。

装入模板

通过类 wpthemeTemplateLoading 进行定义。用于在装入菜单内容时显示。

子菜单模板

通过类 wpthemeTemplateSubmenu 进行定义。

模板还可以包含一些替换变量。菜单项模板中有三个变量。

${css-class}

替换为用于此条目的类。

${description}

菜单项的本地化描述。

${title}

菜单项的本地化标题。

装入模板中有一个变量。

${loading}

装入从服务器访存数据时要显示的文本。

子菜单模板中有一个变量。

${submenu-id}

必需项，用于为新生成的子菜单定义唯一标识。

示例

此示例显示关闭处理程序、另一个 templateId 和对齐方式。

addClass(control.parentNode, VALUE_SELECTED);
            args = {
                "node": control.parentNode,
                "menuId": menuID,
                "jsonQuery": menuQuery,
                "params": {
                    "templateId": "exampleTemplate",
                    "alignment": "right"
                },
                "onClose": function() {
                    removeClass(control.parentNode, VALUE_SELECTED);
                }
            };
            wptheme.contextMenu.init(args);

简单菜单扩展

框架支持额外的扩展作为模块 wp_simple_contextmenu_ext 的组成部分。以下是可用的扩展。

actionUrlTarget

您可以在浏览器 DOM 中定义在其中运行菜单操作的目标窗口。例如，可以使用此扩展在页面的另一个 iframe 中运行菜单操作。将在工具栏主题中使用此模块。

badge

此扩展支持显示 contextmenu 的每个 menuitem 的徽章。徽章是在图形框中显示的彩色数字。通过在 menuitem 的元数据上设置元数据 badgeUrl 或 badgeData，可以轻松启用徽章。从 badgeUrl 返回的订阅源必须是 JSON 类型的订阅源，并且必须在根对象上具有两个 JSON 元素。

count

要显示的数字。

级别

字符串，可以是 error、warn 或 info。

作为 badgeURL 的替代项，menuitem 还可以包含 badgeData 元素。badgeData 元素必须是与 badgeURL 中返回的订阅源具有相同元素的 JSON 对象。以下是 badgeURL 示例。

{
  "type": "StaticMenuitem",
  "id": "myEditFct",
  ...
  "metadata": {
    ...
    "badgeUrl": "?uri=theme-validation:count"
  }
}

以下是 badgeData 示例。

{
  "type": "StaticMenuitem",
  "id": "myEditFct",
  ...
  "metadata": {
    ...
    "badgeData": {
      "count": "10",
      "level": "error"
    }
  }
}