Framework7从属值介绍

Framework7是一款开源的基于HTML、CSS、JavaScript构建的移动端UI框架。从属值是这个框架中一个重要的概念，本文将对Framework7从属值做详细介绍。

什么是从属值？

从属值是Framework7中一个重要的概念，它是指一个元素相对于另一个元素的位置。在Framework7中，从属值常常被用来定位元素的位置，例如，弹出菜单相对于触发菜单的按钮的位置。

从属值的种类

在Framework7中，有以下几种从属值：

• $root：表示相对于整个页面的位置，即页面的左上角。
• $self：表示相对于当前元素的位置。
• $targetEl：表示相对于触发事件的元素的位置。
• $activatorEl：表示相对于触发菜单的元素的位置。
• 自定义元素：开发者可以通过指定CSS选择器来自定义一个元素，然后使用这个元素的选择器代替从属值。

从属值在Framework7中是通过CSS选择器来指定的，以下是从属值的通用语法：

{from} {from-params} {to} {to-params}

其中，{from}表示从属值的来源，可以是上述提到的五种从属值种类之一，{from-params}表示从属值来源的一些参数，{to}表示从属值的目标，通常是一个CSS选择器，{to-params}表示从属值目标的一些参数。

从属值的使用

在Framework7中，可以通过以下几种方式使用从属值：

1. 传递给方法

例如，在使用弹出式菜单时，如果想要让菜单相对于按钮出现，可以使用如下代码：

app.popover.create({
  content: '<div class="popover">...</div>',
  targetEl: '.button',
  opened: function (popover) {
    console.log('Popover opened', popover);
  },
});

targetEl: '.button'中的.button就是一个CSS选择器，用来指定按钮元素，使用$activatorEl也是可以的，如：targetEl: '$activatorEl'。

2. 作为参数传递给组件

例如，在使用按钮组件时，通过传递一个from参数，可以指定按钮的从属值来源，如下所示：

<a href="#" class="button button-fill" popup-open=".my-popup" from="$activatorEl">Popup</a>

from="$activatorEl"指定了按钮的从属值来源为触发事件的元素。

总结

从属值是Framework7中定位元素位置的重要概念，通过选择合适的从属值，可以让页面元素的位置更为灵活，给用户带来更好的体验。 Framework7中提供了五种默认的从属值，同时也支持开发者自定义选择器作为从属值，使用起来非常方便。