内联函数内联函数_如何编写内联共享菜单

最新推荐文章于 2025-04-27 10:44:03 发布

翻译最新推荐文章于 2025-04-27 10:44:03 发布 · 284 阅读

文章标签：

#js #css #javascript #html #java #ViewUI

内联函数内联函数

在本教程中，我们将学习如何构建所谓的“内联共享菜单”。该界面通过弹出菜单来工作，该菜单允许读者共享页面，并引用突出显示的文本。您会在Medium等一些热门网站上找到类似的界面。

在开始建立共享菜单之前，我们将检查“媒体”中此相似界面如何更紧密地工作，例如何时显示它以及如何将其相对于突出显示的区域定位。这是一个有用的步骤，它将为我们提供适当的技术见解，最终还决定我们如何编写自己的代码。

我们走吧！

检查中型界面

在下图中，无论长度如何，Medium中的共享菜单都会显示在突出显示的文本的中心。我们只选择一个单词，一个句子还是整个段落。

如果我们通过Chrome DevTools进行深入研究，我们可以发现共享菜单的位置是通过内联样式的top和left属性指定的。我们可以看到共享按钮还带有一个附加的修饰符类highlightMenu--active ，它使它可见。

注意：如果您还不熟悉诸如Modifier ， Block和Element之类的术语，则应该看一下之前的教程： BEM方法论简介。

在“ 样式”选项卡中，我们可以看到其初始位置是通过CSS设置的，具有absolute位置， z-index属性位于页面上其他元素的top ， top位于top ， visibility属性用于将共享按钮移出视线。

总而言之，我们将需要：

检索选定区域的长度，以便我们可以确定选定区域的中心点。
创建一个修饰符以显示元素。
设置共享菜单位置，并通过内联样式添加top和left属性。

建立共享菜单

在此示例中，我们将在共享菜单中包括Facebook和Twitter按钮。我们提供带有SVG的Facebook和Twitter图标，并包装在一个button和几个div元素中。此外，从下面的代码片段中可以看到，我们还在菜单底部添加了一个span元素以形成三角形。

<div class="sharing">
    <div class="sharing__buttons">
        <button id="share" title="Share">
            <svg class="icon icon--facebook" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; width: 24px; height: 24px" xml:space="preserve"><g></g><g><g><path d="M426.8,64H85.2C73.5,64,64,73.5,64,85.2l0,341.6c0,11.7,9.5,21.2,21.2,21.2H256V296h-45.9v-56H256v-41.4 c0-49.6,34.4-76.6,78.7-76.6c21.2,0,44,1.6,49.3,2.3v51.8l-35.3,0c-24.1,0-28.7,11.4-28.7,28.2V240h57.4l-7.5,56H320v152h106.8 c11.7,0,21.2-9.5,21.2-21.2V85.2C448,73.5,438.5,64,426.8,64z"/></g></g></svg>
        </button>
        <button id="tweet" title="Tweet">
            <svg class='icon icon--twitter' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512; width: 24px; height: 24px' xml:space='preserve'><path d='M492,109.5c-17.4,7.7-36,12.9-55.6,15.3c20-12,35.4-31,42.6-53.6c-18.7,11.1-39.4,19.2-61.5,23.5
                C399.8,75.8,374.6,64,346.8,64c-53.5,0-96.8,43.4-96.8,96.9c0,7.6,0.8,15,2.5,22.1c-80.5-4-151.9-42.6-199.6-101.3
                c-8.3,14.3-13.1,31-13.1,48.7c0,33.6,17.2,63.3,43.2,80.7C67,210.7,52,206.3,39,199c0,0.4,0,0.8,0,1.2c0,47,33.4,86.1,77.7,95c-8.1,2.2-16.7,3.4-25.5,3.4c-6.2,0-12.3-0.6-18.2-1.8c12.3,38.5,48.1,66.5,90.5,67.3c-33.1,26-74.9,41.5-120.3,41.5
                c-7.8,0-15.5-0.5-23.1-1.4C62.8,432,113.7,448,168.3,448C346.6,448,444,300.3,444,172.2c0-4.2-0.1-8.4-0.3-12.5
                C462.6,146,479,129,492,109.5z'/>
            </svg>
        </button>
    </div>
    <span class="sharing__triangle"></span>
</div>

菜单的颜色和形状没有明确的规定。您可以根据自己的网站设计随意设置菜单样式。值得关注的是按钮尺寸；高度和宽度。如下图所示，我们的共享菜单为84px宽和40px高。稍后，我们将使用这两个值将共享菜单放置在突出显示区域的中心。

多数民众赞成在样式设置初始位置和可见性。

.sharing {
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 500;
}

最后，我们将添加以使共享按钮可见的类。

.sharing--shown {
	visibility: visible;
}

使共享菜单正常运行

此时，页面上不应显示我们的内联共享菜单。同样，当我们单击Facebook和Twitter按钮时，共享窗口也无处可见。因此，在本节中，我们将编写JavaScript以使按钮起作用。我们从下面的getHighlight()函数开始。

function getHighlight() {

    var selection = window.getSelection(); // 1.

    var object = {
		parent : null,
		text   : '',
		rect   : null
    };

	// If selection is not empty.
    if ( selection.rangeCount > 0 ) {
        object = {
            text   : selection.toString().trim(), // get the text.
            parent : selection.anchorNode.parentNode, // get the element wrapping the text.
            rect   : selection.getRangeAt(0).getBoundingClientRect() // get the bounding box.
        };
    }

    return object; // 2.
}

该功能将：

使用本地JavaScript函数getSelection()检索突出显示的区域。
返回一个包含所选文本的Object，包裹文本的元素以及所选区域的Rectangle Object，该矩形对象为我们提供大小以及其在页面中的位置- top ， bottom ， left和right 。

我们的下一个函数称为showMenu() 。顾名思义，此功能将显示共享菜单。

var sharing = document.querySelector( '.sharing' );

function showMenu() {

	// 1.
    var highlight = getHighlight();

	// 2.
    if ( highlight.text === '' ) {

        sharing.setAttribute( 'class', 'sharing' );
        sharing.style.left = 0;
        sharing.style.top  = 0;

        return;
    }

	// 3.
	/**
	 * Only show the sharing button if the selected is a paragraph.
	 */
    if ( highlight.parent.nodeName !== 'P' ) {
        return;
    }

	// 4.
    var width = ( highlight.rect.width / 2 ) - 42;
    /**
     * The "42" is acquired from our sharing buttons width devided by 2.
     */

    sharing.setAttribute( 'class', 'sharing sharing--shown' );
	sharing.style.left = ( highlight.rect.left + width ) + 'px';
	sharing.style.top  = ( highlight.rect.top - 40 ) + 'px';
	/**
	 * "40" is the height of our sharing buttons.
	 * Herein, we lift it up above the higlighted area top position.
	 */
}

具体来说，此函数中的代码执行以下操作：

从getHighlighted()函数获取对象。
当突出显示的区域为空时，隐藏共享菜单并将其设置为初始位置；它不包含文本。
如果突出显示的文本未包含在段落中，请阻止按钮出现。
最后，设置top和left位置，并附加显示的sharing--shown类，以使共享按钮可见。我还添加了几行内联注释，描述了一些定义的数字的来源。

我们将假设大多数用户使用鼠标突出显示Web上的内容，因此我们在mouseup事件上绑定了此功能。移动设备通常会在文本选择上拥有自己的上下文菜单，因此本教程重点关注网络。

我们使用setTimeout()函数将执行延迟100ms ，以确保正确选择内容。

document.body.addEventListener( 'mouseup', function() {
     setTimeout( showMenu, 100 );
} );

我们的最后一个函数openShareWindow() ，是在单击菜单中的按钮时启动共享窗口。在本教程中，我们将主要使用它来提供Twitter共享窗口，因为Facebook具有自己的JavaScript SDK 。

function openShareWindow( url, w, h ) {

	var screenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
	var screenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
	var width = window.innerWidth ? window.innerWidth : doc.documentElement.clientWidth ? doc.documentElement.clientWidth : screen.width;
	var height = window.innerHeight ? window.innerHeight : doc.documentElement.clientHeight ? doc.documentElement.clientHeight : screen.height;

	var left = ( ( width / 2 ) - ( w / 2 ) ) + screenLeft;
	var top = ( ( height / 2 ) - ( h / 2 ) ) + screenTop;

	var newWin = window.open( url, "", "scrollbars=no,width=" + w + ",height=" + h + ",top=" + top + ",left=" + left );

	if ( newWin ) {
		newWin.focus();
	}
}

点击...点击...

接下来，我们将共享按钮与click事件绑定在一起，并附加一个将启动共享窗口的功能。

// Facebook.
document.getElementById( 'share' ).addEventListener( 'click', function() {

    var highlight = getHighlight();

    if ( highlight.text !== '' && highlight.parent.nodeName === 'P' ) {
        FB.ui({
            method : 'share',
            mobile_iframe: true,
            href   : 'http://bitly.com/2aiHmCs',
            quote  : highlight.text // pass the text as Quote
        });
    }

    event.preventDefault();
} );

对于Facebook共享按钮，我们使用Facebook JavaScript SDK。 SDK允许我们通过quote参数传递文本以显示在共享窗口中。

Twitter不以这种方式提供JavaScript SDK。因此，这里我们使用函数openShareWindow() ，并传递符合其准则以及窗口大小的格式化URL。

document.getElementById( 'tweet' ).addEventListener( 'click', function() {

    var highlight = getHighlight();

    if ( highlight.text !== '' && highlight.parent.nodeName === 'P' ) {

        var docURL = encodeURIComponent( 'http://bitly.com/2aiHmCs' );
        var tweetText = encodeURIComponent( highlight.text );
        var tweetURL = 'https://twitter.com/intent/tweet?via=wdtuts&url=' + docURL + '&text=' + tweetText;

        openShareWindow( tweetURL, 600, 420 );
    }

    event.preventDefault();
} );

当我们单击Twitter共享按钮时，它将启动一个出现的窗口，如下所示。

结语

我们都已设置好在线共享菜单！前往演示观看实际操作，或查看源代码以全面了解功能。接下来，您可以使用过渡或动画改进内联共享菜单，以提供更吸引人的体验。