插件 jQuery.PositionCalculator 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.PositionCalculator 中文API文档 https://github.com/tlindig/position-calculator

PositionCalculator

Calculate the position of an element relative to another element or event. Tries to find a collision free position within the viewport of a given container.

Getting Started

Download the production version or the development version or install it via Bower.

or for quick tests, add this tag to load it direct from github:

<script src="http://tlindig.github.io/position-calculator/dist/position-calculator.min.js"></script>

I will deploy it on CDN “cdnJS.com” if this requirement is met:

Libraries must have notable popularity: 100 stars or watchers on GitHub is a good example, but as long as reasonable popularity can be demonstrated the library will be added."

Documentation and Demo

Visit demonstration and documentation page: Position Calculator

Ready to use version of this lib can be found in folder: “dist”

Usage example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="http://rawgit.com/tlindig/position-calculator/master/dist/position-calculator.min.js"></script>
  <meta charset="utf-8">
  <script>
    jQuery(function($) {

      var $tooltip = $('<div style="display:none;position:absolute;padding:10px;background:rgba(0,0,0,0.5);"></div>').appendTo(document.body);

      function showTooltip(event) {
        $tooltip.text($(this).data('tooltip'));
        $tooltip.show().css({top:0, left:0});

        var calculator = new $.PositionCalculator({
          item: $tooltip,
          itemAt: "bottom left",
          target: this,
          targetAt: "top right",
          flip: "both"
        });
        var posResult = calculator.calculate();

        $tooltip.css({
          top: posResult.moveBy.y + "px",
          left: posResult.moveBy.x + "px"
        })
      }

      $('.has_tooltip').on('mouseenter', showTooltip);
      $('.has_tooltip').on('mouseout', function(){$tooltip.hide()});
    });
  </script>
</head>
<body>
  <input type="text" class="has_tooltip" data-tooltip="this is a tooltip" value="hover me"/>
</body>
</html>

Try this example at jsBin

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Build

To build run Grunt.

Versioning

PositionCalculator use Semantic Versioning.

Releases will be numbered with the following format:

<major>.<minor>.<patch>

Author

Tobias Lindig http://tlindig.de

Code and documentation copyright 2014 Tobias Lindig Code released under the MIT license.

Changelog

1.1.2 (July 1, 2014)

  • set minimum required version of jQuery to >1.8. jQuery 1.7 has a bug together with css property “box-sizing: border-box” that is fixed with 1.8. ( #10413, #11004 )

1.1.1 (April 17, 2014)

  • add support for source map file
  • add support for Bower

1.1.0 (March 28, 2014)

  • add support for calculation without parameter “target” to calculate only overflow of item and boundary

1.0.1 (March 28, 2014)

  • update jQuery manifest, add link to demo page

1.0.0 (March 28, 2014)

  • first public release

0.0.0 (February 21, 2014)

Initial commit

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了