首页 » Framework7 » Framework7 弹层
网站地图

操作表

操作表是一个上滑面板，用来向用户展示进行一个任务所需的选项。

你也可以使用它来提示用户，确认潜在的危险操作。

操作表包含一个可选的标题和至少一个按钮，每个按钮都对应一个操作。

注意，不建议在大屏幕（iPad）上使用操作表。在大屏幕上，你应该使用弹出框。

创建并弹出操作表

操作表是动态元素，只能使用Javascript来创建并弹出它。让我们看一下创建操作表相关的App方法：

myApp.actions(groups) - 创建并弹出操作表，其包含指定数量群组的按钮
或者
myApp.actions(buttons) - 创建并弹出操作表，其包含一个群组，群组包含指定数量的按钮

  • groups - array. 一组群组，每个群组包含若干按钮
  • buttons - array. 一组按钮，这种情况下，只有一个群组
  • 这个方法返回动态创建的操作表HTML元素

每个在buttons中的按钮应该作为一个对象，其包含如下参数：

参数类型默认值描述
text字符串
按钮上的文本（可以是HTML字符串）
bold布尔值false可选，若为真，则按钮上文本加粗
color字符串
可选，按钮颜色，待选颜色有10种
bgstring
Optional. Button background color, one of 10 default colors
label布尔值true可选，若为真，它会成为标题，而不是按钮
disabledbooleanfalseOptional. Set to "true" if you want to make button disabled
onClick函数
可选，当用户点击该按钮时，会调用这个函数

让我们来看一下例子

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="ac-1">One group, three buttons</a></p>
      <p><a href="#" class="ac-2">One group, title, three buttons</a></p>
      <p><a href="#" class="ac-3">Two groups</a></p>
      <p><a href="#" class="ac-4">Three groups</a></p>
      <p><a href="#" class="ac-5">With callbacks on click</a></p>
    </div>
  </div>
  ...
</body>
var myApp = new Framework7();
 
var $$ = Dom7;
 
//- One group, three buttons
$$('.ac-1').on('click', function () {
    var buttons = [
        {
            text: 'Button1',
            bold: true
        },
        {
            text: 'Button2'
        },
        {
            text: 'Cancel',
            color: 'red'
        },
    ];
    myApp.actions(buttons);
});
 
//- One group, title, three buttons
$$('.ac-2').on('click', function () {
    var buttons = [
        {
            text: 'Do something',
            label: true
        },
        {
            text: 'Button1',
            bold: true
        },
        {
            text: 'Button2',
        },
        {
            text: 'Cancel',
            color: 'red'
        },
    ];
    myApp.actions(buttons);
});
 
//- Two groups
$$('.ac-3').on('click', function () {
    var buttons1 = [
        {
            text: 'Do something',
            label: true
        },
        {
            text: 'Button1',
            bold: true
        },
        {
            text: 'Button2',
        }
    ];
    var buttons2 = [
        {
            text: 'Cancel',
            color: 'red'
        }
    ];
    var groups = [buttons1, buttons2];
    myApp.actions(groups);
});
 
//- Three groups
$$('.ac-4').on('click', function () {
    var buttons1 = [
        {
            text: 'Share',
            label: true
        },
        {
            text: 'Mail',
        },
        {
            text: 'Messages',
        }
    ];
    var buttons2 = [
        {
            text: 'Social share',
            label: true
        },
        {
            text: 'Facebook',
        },
        {
            text: 'Twitter',
        }
    ];
    var buttons3 = [
        {
            text: 'Cancel',
            color: 'red'
        }
    ];
    var groups = [buttons1, buttons2, buttons3];
    myApp.actions(groups);
});
 
//- With callbacks on click
$$('.ac-5').on('click', function () {
    var buttons = [
        {
            text: 'Button1',
            onClick: function () {
                myApp.alert('Button1 clicked');
            }
        },
        {
            text: 'Button2',
            onClick: function () {
                myApp.alert('Button2 clicked');
            }
        },
        {
            text: 'Cancel',
            color: 'red',
            onClick: function () {
                myApp.alert('Cancel clicked');
            }
        },
    ];
    myApp.actions(buttons);
});

实例预览

把操作表转换成 Popover

因为不建议在手机上使用Popover，不建议在平板上使用操作表，所以我们提供了方法你可以用操作表的拓展语法在平板上自动把操作表转换成Popover：

myApp.actions(target, groups) -  创建并打开一个包含指定多组按钮的操作表（在平板电脑上是Popover）
or
myApp.actions(target, buttons) - 创建并打开一个包含指定一组按钮的操作表（在平板电脑上是Popover）

  • target - HTMLElement or string (CSS选择器)触发元素，用来对Popover进行定位. 必须
  • groups - array. 多组按钮组，每个按钮组里面包含多个按钮。
  • buttons - array. 一组按钮。
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.something').on('click', function (e) {
    var target = this;
    var buttons = [
        {
            text: 'Button 1'
        },
        {
            text: 'Button 2'
        }
    ];
    myApp.actions(target, buttons);
});

关闭操作表

默认情况下，操作表会在以下情况下自动关闭：

  • 点击任意一个按钮
  • 点击窗口之外的遮罩（可以通过modalActionsCloseByOutside这个应用初始化参数配置）

也可以使用适当的App方法来手动关闭操作表：

myApp.closeModal(actionSheet) - 关闭弹出窗口

  • actionSheet - 表示要关闭的操作表的HTML元素或者（包含CSS选择器的）字符串。可选，如果没有指定，任何打开的操作表都会被关闭

操作表事件

操作表和任意模态框拥有相同的事件

事件目标描述
open操作表元素<div class="actions-modal">当操作表开始弹出动画的时候，事件触发
opened操作表元素<div class="actions-modal">当操作表完成弹出动画的时候，事件触发
close操作表元素<div class="actions-modal">当操作表开始结束动画的时候，事件触发
closed操作表元素<div class="actions-modal">当操作表完成结束动画的时候，事件触发

操作表模板

如果你希望能自定义操作表的模板，你可以在初始化App的时候传入一个 modalActionsTemplate 参数。这个参数值是一个 Template7 模板字符串，这个模板会被 Template7 编译，编译的时候会传入一个 groups 参数。

比如模板可能会是这样的：

<!-- This template equalt to default layout -->
<div class="actions-modal">
  <!-- this is a single group -->
  {{#each this}}
    <div class="actions-modal-group">
      <!-- now this represents a single button -->
      {{#each this}}
          {{#if label}}
            <span class="actions-modal-label">{{text}}</span>
          {{else}}
            <div class="actions-modal-button {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-modal-button-bold{{/if}}">{{text}}</div>
          {{/if}}
      {{/each}}
    </div>
  {{/each}}
</div>

Action Sheet To Popover Template

If you use convertation of Action Sheet to Popover, then you may customize Popover template by passing modalActionsToPopoverTemplate parameter on App initialization. This parameter accepts Template7 formatted HTML string that will be compiled by Template7 with passed groups context.

Here is the default template:

<div class="popover actions-popover">
  <div class="popover-inner">
    {{#each this}}
    <div class="list-block">
      <ul>
        {{#each this}}
        {{#if label}}
        <li class="actions-popover-label {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-popover-bold{{/if}}">{{text}}</li>
        {{else}}
        <li><a href="#" class="item-link list-button {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} {{#if bold}}actions-popover-bold{{/if}} {{#if disabled}}disabled{{/if}}">{{text}}</a></li>
        {{/if}}
        {{/each}}
      </ul>
    </div>
    {{/each}}
  </div>
</div>