了解 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，当任何 window 的边缘在工具提示的 10px 距离内时，工具提示将尝试调整（重新定位）自身。您也可以为 window 的不同边指定自定义值。

这个例子会很清楚：

示例 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
          }
      });
  });

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

了解 jBox 配置选项

Understanding jBox configuration options

javascript

jquery

jquery-plugins

jbox