时间戳

首页 > 解决方案 > 在用户选择旁边显示一个菜单

javascript - 在用户选择旁边显示一个菜单

问题描述

我有一个场景：

  1. 突出显示文本时应显示菜单/弹出窗口
  2. 菜单 应该从用户光标向右显示 5 个像素，向下显示 5 个像素

虽然我能够实现第一个，但定位菜单让我很难。我尝试使用它来解决它event.pageX，event.pageY但它只适用于某些情况

这是我的代码

      $(frameBody).on('mouseup', function (event) {
            var frame = $("#" + activeId).find('.vIframe')[0];
            var selection = $(frame)[0].contentWindow.getSelection();
            var exportMenu = $("#exportMenu") ;
            range = selection.getRangeAt(0);
            var boundary = event.target.getBoundingClientRect();
            var offset = $(frame).offset();
            if (selection.toString().trim().length > 0) {
                $(exportMenu).css('display', 'inline-block');
                $(exportMenu).menu('open');
                $(exportMenu).css({
                    'left': event.pageX + offset.left + $(exportMenu).width()/2 + 5,
                    'top': boundary.top + $(exportMenu).height() + 5
                });
                if ($($(frame)[0].contentWindow).height() < parseInt($(exportMenu).css('top'))) {
                    $(exportMenu).css({
                        'left': event.pageX,
                        'top': event.pageY - 5
                    });
                }
            } else {
                $(exportMenu).css('display', 'none');
            }
            event.stopPropagation();
        });

任何帮助，将不胜感激。

谢谢。

标签： javascriptselection

解决方案

这就是我最终解决这个问题的方式。

  $(frameBody).on('mouseup', function (event) {
        var activeId = TabManager.getActiveId();
        var frame = $("#" + activeId).find('.viewerIframe')[0];
        var selection = $(frame)[0].contentWindow.getSelection();
        var exportMenu = $("#" + TabManager.getActiveId()).find("#exportMenu")[0];
        range = selection.getRangeAt(0);
        var zoomfactor = $(frame).attr("zoom");
        selectionNode = $(frame)[0].contentDocument.createElement("highlights-start")
        if (selection.toString().trim().length > 0) {
            var range = selection.getRangeAt(0);
            newRange = document.createRange();
            newRange.setStart(selection.focusNode, range.endOffset);
            newRange.insertNode(selectionNode );
            $(exportMenu).css('display', 'inline-block');
            $(exportMenu).menu('open');
            $(exportMenu).css({
                'top': $(selectionNode).offset().top + $(exportMenu).height() / 2 - 20 + 'px',
                'left': $(selectionNode).offset().left+ 'px'
            });
           else {
            $(exportMenu).css('display', 'none');
        }
        event.stopPropagation();

    });

推荐阅读