如何将管理指针的顶部与目标元素对齐?

时间:2021-04-23 作者:alexg

我正在尝试为插件创建管理指针。

首先,我在排队购买合适的资产:

        wp_enqueue_script( \'jquery\' );
        wp_enqueue_style( \'wp-pointer\' );
        wp_enqueue_script( \'wp-pointer\' );
然后,我打开一个管理页面,并将以下代码粘贴到JavaScript控制台中。

jQuery(\'#menu-settings\').first().pointer( 
    {
        "content":
            "<h3>Pointer header<\\/h3>" +
            "<h4>Pointer subheader<\\/h4>" +
            "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Rationis enim perfectio est virtus; Sed ego in hoc resisto; Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Bestiarum vero nullum iudicium puto. Si enim ad populum me vocas, eum. Mihi, inquam, qui te id ipsum rogavi? Falli igitur possumus. Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare.<\\/p>",
            
        "position":
            {"edge":"left","align":"bottom"},

        "pointerClass":
            "wp-pointer arrow-bottom",

        "pointerWidth": 420
    }
).pointer(\'open\');
上面的代码正确地创建了一个管理指针,并将箭头与框的底部对齐,以便它指向目标元素,在本例中为;“设置”;菜单项。

Admin pointer pointing to the "Settings" menu item with bottom alignment

我的问题是,我如何才能做到同样的,但与顶部对齐?

我想指向通常位于屏幕顶部附近的菜单项,我想让箭头指向该项,但管理指针的其余部分向下挂起,以便文本在屏幕中并保持可读性。

到目前为止,我一直试图改变这两种情况;“底部”;带“的关键字”;顶部“;,但箭头位于框的中间,并且没有指向正确的目标元素。

Admin pointer with top alignment. Arrow does not point to the target element

我检查了资产中的代码wp-includes/js/wp-admin-pointer.jswp-includes/css/wp-pointer.css 但我不知道我做错了什么。

非常感谢您的帮助。

1 个回复
SO网友:alexg

这是个很好的问题,亚历克斯!

这并不完全是对这个问题的回答,但以下几点会起作用:

jQuery(\'#menu-settings\').first().pointer( 
    {
        "content":
            "<h3>Pointer header<\\/h3>" +
            "<h4>Pointer subheader<\\/h4>" +
            "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Rationis enim perfectio est virtus; Sed ego in hoc resisto; Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Bestiarum vero nullum iudicium puto. Si enim ad populum me vocas, eum. Mihi, inquam, qui te id ipsum rogavi? Falli igitur possumus. Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare.<\\/p>",
            
        "position":
            {"edge":"top","align":"left"},

        "pointerClass":
            "wp-pointer arrow-top",

        "pointerWidth":420
    }
).pointer(\'open\');
这将创建一个指针,其箭头位于框的上边缘,而不是左边缘。该框悬挂在目标元素下方。

相关推荐