Framework7自定义控件

简介

Framework7 是一个开源的 HTML 框架，用于构建混合移动应用、Web 应用以及桌面端应用。

开发者可以使用 Framework7 中提供的默认控件，例如按钮、表单、卡片、弹出框等。此外，Framework7 还提供了一些自定义组件，以满足部分定制化需求，例如：Accordion（手风琴）、Actionsheet、Login Screen、Popup、Picker、Preloader 等。

此外，开发者还可以根据自己的需求，使用 Framework7 提供的 API 自行创建和定制控件。下文将重点介绍如何使用 Framework7 自定义控件。

创建自定义控件

模板

使用 Framework7 创建一个自定义控件需要准备一个模板。模板必须按照 Framework7 规定的格式，例如：

<div class="custom-control">
  <div class="custom-control-header">
    <div class="custom-control-title">自定义控件</div>
    <div class="custom-control-close"></div>
  </div>
  <div class="custom-control-content"></div>
</div>

上面的代码是一个最简单的模板。模板包含了一个标题和一个内容区域。标题和关闭按钮可以在控件的 JS 代码中绑定事件。

控制器

在 Framework7 中，控制器通常是在 HTML 中实现的，用于响应用户操作。例如，当用户点击一个按钮时，按钮相关的控制器就会被触发，并执行相应的操作。

自定义控件的控制器也要在 HTML 中实现，例如：

<!-- app-1 -->
<div class="page" data-name="home">
  <div class="navbar">
    ...
  </div>
  <div class="toolbar tabbar">
    ...
  </div>
  <div class="page-content">
    ...
    <div class="custom-control" id="custom-control-1"></div>
    ...
  </div>
</div>
<!-- app-2 -->
<div class="page" data-name="about">
  <div class="navbar">
    ...
  </div>
  <div class="toolbar tabbar">
    ...
  </div>
  <div class="page-content">
    ...
    <div class="custom-control" id="custom-control-2"></div>
    ...
  </div>
</div>

上述代码中定义了两个页面：'home' 页和 'about' 页。每页中都包含一个自定义控件，控件分别被分配了不同的 ID：custom-control-1 和 custom-control-2。

JavaScript

实现一个自定义控件需要编写 JavaScript 代码，并在控制器中调用。例如：

/* app.js */
var app = new Framework7({
  root: '#app', // App root element
  ...
});

/* home page */
var homeView = app.views.create('.view-main', {
  url: '/',
  routes: [...],
  on: {
    pageInit: function(e, page) {
      
      /* 控制器1 */
      var customControl1 = app.customControl.create({
        el: '#custom-control-1',
        title: '自定义控件1',
        content: '这是一个自定义控件1的内容区域。',
        on: {
          close: function() {
            app.customControl.hide('#custom-control-1');
          }
        }
      });
      customControl1.open();
      
      ...
    }
  }
});

/* about page */
var aboutView = app.views.create('.view-main', {
  url: '/about/',
  routes: [...],
  on: {
    pageInit: function(e, page) {
      
      /* 控制器2 */
      var customControl2 = app.customControl.create({
        el: '#custom-control-2',
        title: '自定义控件2',
        content: '这是一个自定义控件2的内容区域。',
        on: {
          close: function() {
            app.customControl.hide('#custom-control-2');
          }
        }
      });
      customControl2.open();
      
      ...
    }
  }
});

在上述代码中，我们创建了两个控件控制器，分别绑定在 'home' 页和 'about' 页中。

每个控制器都使用 app.customControl.create() 方法创建自定义控件，并指定控件的标题、内容和事件。

控件有多个可用事件，例如：open、opened、close、closed、beforeopen、beforeclose 等。开发者可以根据自己的需求绑定控件事件。

CSS

自定义控件的 CSS 样式可以通过在 HTML 中添加样式或在控制器 JS 中添加样式实现。例如：

.custom-control {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1;
  display: none;
}

.custom-control-header {
  height: 40px;
  padding: 0 10px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-control-title {
  font-size: 14px;
  font-weight: bold;
}

.custom-control-close {
  width: 20px;
  height: 20px;
  background-image: url("../img/close.png");
  background-size: 100% 100%;
}

.custom-control-content {
  padding: 10px;
  font-size: 14px;
  color: #333;
}

上述代码中定义了 custom-control 和相关样式。

总结

Framework7 可以方便我们创建自定义控件。开发者只需编写 HTML 模板、JavaScript 控制器和 CSS 样式即可。通过 app.customControl.create() 和控件可用事件可以自由控制和定制自定义控件的行为。

参考

• Framework7 Docs