阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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

      目录
      目录