javascript - 了解 jBox 配置选项

Question

我刚刚试用了这个名为 jBox.js 的插件，发现了一些新选项。这是一个非常可定制的插件。我说的选项是 adjustDistance .

documentation说，你可以传入一个整数或对象，像这样:

$(function(){
          $('.tooltip').jBox('Tooltip', {
              trigger: 'click',
              adjustDistance : {
                top : 15,
                bottom : 15,
                left : 15,
                right : 50
              }
          });
      });

我这样做了，但我没有看到我的工具提示的呈现方式有什么不同，制作了一个 FIDDLE HERE 。

文档对这个选项的描述如下:

Distance to the window edge when adjusting should start. Use an object to set different values, e.g. {top: 50, right: 20, bottom: 5, left: 20}

但是我不太明白它的用法。有人可以解释吗？

Answer 1

如果我们将 adjustDistance 设置为 10，则当任何窗口的边缘在工具提示的 10px 距离内时，工具提示将尝试自行调整(重新定位)。您也可以为窗口的不同边缘提供自定义值。

这个例子会很清楚:

示例 1:

$(function(){
      $('.tooltip').jBox('Tooltip', {
          trigger: 'click',
          adjustDistance : {
            top : 15,
            bottom : 15,
            left : 15,
            right : 50
          }
      });
  });

示例 2(更改 adjustDistance 底部的值):

$(function(){
      $('.tooltip').jBox('Tooltip', {
          trigger: 'click',
          adjustDistance : {
            top : 15,
            bottom : 150,
            left : 15,
            right : 50
          }
      });
  });

对于他们两个，尝试单击按钮打开工具提示，然后调整从底部缩小的窗口的大小，以便工具提示需要重新调整。