前端框架 Ember.js 具备强大的模板与组件化开发能力，同时还内嵌了许多功能强大的插件和扩展。其中，ember-tether 就是一款优秀的插件，可以让开发者在应用中方便地实现基于 Tether.js 的 tooltips 与 popover 等交互效果。本文将详细介绍如何使用 ember-tether 套件，以及解析其中的技术原理。
简介与安装
ember-tether 套件的原理是基于 Tether.js 实现的。Tether.js 是一个简单的定位引擎，可用于创建出具有吸附性质的 DOM 元素。如其名称之意，它的定位逻辑是通过“连接线（tether）”的方式，通过两个点的定位来决定内容元素的位置。ember-tether 套件通过对 Tether.js 进行封装，为 Ember.js 应用开发者提供了一组现成的组件，以实现 tooltip 与 popover 的效果。
要在你的项目中使用 ember-tether 套件，首先需要在命令行中执行以下 npm 安装命令：
--- ------- ------------
组件使用
在安装完成后，即可在 Ember.js 应用的组件中调用 ember-tether 的各项函数。下面将分别介绍 tooltip 和 popover 的使用方法。
Tooltip
在模板文件中，需要使用 {{ember-tether-popover}} 标签来包裹内容元素，在其中通过 text="" 这个属性来定义 tooltip 的文本内容。
-----------------------
-----------------------
-------------
--
------- ----------------
----
---------
-------------------------在 JS 文件中，需要定义组件函数，调用 tetherOptions 函数定义定位参数。这里可以通过 attachment 以及targetAttachment 属性来设置定位方式（相对于目标元素的对齐方式）。完整的 JS 代码如下所示：
------ --------- ---- -------------------
------ - ------ - ---- ----------------
------ - ------------------- - ---- ---------------
------ ------- ----- ------- ------------------------------------- -
-------
------------ -
--- ------------- - -
------- --------------------------
----------- ---- --------
----------------- ------- -------
--
--------------------------------
-
-------
-------------- -
---------------------
-
-Popover
Popover 组件与 Javascript 的事件绑定有着密不可分的关系。在模板中，需要使用 {{action}} 标签定义事件触发的函数名，并使用 {{ember-tether-popover}} 标签包裹元素，在其中通过 class="hide" 将内容元素隐藏（这里假设我们的 popover 元素具有 .box 类名）。
------- --------------- -------- --------------
------ -------
---------
-----------------------
-----------------
-----------------------
---------------
--
---- ---------- ------
--------
------
-------------------------在定义事件触发函数时，需要使用 toggleBox 这个函数名，并在函数中调用 hidePopover 以及 showPopover 函数，控制 Popover 是否显示。
------ --------- ---- -------------------
------ - ------ - ---- ----------------
------ - ---- - ---- -----------------
------ - ------------------- - ---- ---------------
------ ------- ----- ------- ------------------------------------- -
-------
------------ -
--- ------------- - -
------- --------------------------
----------- ---- --------
----------------- ------- -------
--
--------------------------------
-
-------
-------------- -
---------------------
-
-------
----------- -
--- --- - -----------------------------------
-- -------------------------------- -
-------------------
-----------------------------
- ---- -
-------------------
--------------------------
-
---------- ----------------------
-
-总结
本文中，我们详细介绍了如何使用 ember-tether 套件实现 tooltip 与 popover 的效果，以及相应的技术原理。在使用 ember-tether 套件时，需要将组件函数与模板文件中的调用方法结合使用。除了 tooltip 与 popover 外，ember-tether 套件还可用于定义其他效果，如 pop-up 连接框等。通过本文的学习，相信大家已经对 ember-tether 的使用方法有了更加深入的了解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60087