创建并打开操作表（Create and open Action Sheet）
描述 (Description)
由于Action Sheet是一个动态元素，因此只能使用JavaScript创建和打开它。 下面列出了相关应用程序创建Action Sheet的方法 -
myApp.actions(groups) - 用于创建和打开具有指定数量的按钮组的Action Sheet 。
myApp.actions(buttons) - 用于创建和打开带有组和定义数量的按钮的Action Sheet 。
groups - 这是一个array of groups其中每个组包含array of buttons 。
buttons - 这是一个array of buttons其中将有one group 。
此方法将返回动态创建的Action Sheet HTMLElement。
按钮数组中的每个按钮都必须显示为Object ，按钮参数如下表所示 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | text 它是带有Button文本的String。 | string | |
| 2 | bold 它是可选参数，当设置为true时，使按钮的文本bolder 。 | boolean | false |
| 3 | color 它是一个可选参数，它是10个默认按钮颜色之一。 | string | |
| 4 | bg 它是一个可选参数，它是10个默认按钮背景颜色之一。 | string | |
| 5 | label 它是一个可选参数，如果设置为true ，那么它将是标题而不是按钮。 | boolean | true |
| 6 | disabled 它是一个可选参数，如果要禁用按钮，请将此参数设置为true 。 | boolean | false |
| 7 | onClick 它是一个可选参数，是用户单击此按钮时将执行的回调函数。 | function |
例子 (Example)
以下示例演示了Framework7中Action Sheet的使用，它在您单击链接时显示一组和指定数量的按钮组 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Create and open Action Sheet</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Action Sheet</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<p><a href = "#" class = "ac-1"><b>One group</b> with <b>three buttons</b></a></p>
<p><a href = "#" class = "ac-2"><b>One group</b> with <b>title</b> and <b>three buttons</b></a></p>
<p><a href = "#" class = "ac-3"><b>Two groups</b></a></p>
<p><a href = "#" class = "ac-4"><b>Three groups</b></a></p>
<p><a href = "#" class = "ac-5">With <b>callbacks</b> on click</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
$$('.ac-1').on('click', function () {
var buttons = [
{
text: 'Button1',
color: 'green'
},
{
text: 'Button2',
color: 'green'
},
{
text: 'Cancel',
color: 'red'
},
];
myApp.actions(buttons);
});
$$('.ac-2').on('click', function () {
var buttons = [
{
text: 'Some Text',
label: true
},
{
text: 'Button1',
color: 'pink'
},
{
text: 'Button2',
color: 'pink'
},
{
text: 'Cancel',
color: 'green'
},
];
myApp.actions(buttons);
});
$$('.ac-3').on('click', function () {
var buttons1 = [
{
text: 'Some Text',
label: true
},
{
text: 'Button1',
bold: true
},
{
text: 'Button2',
bold: true
},
{
text: 'Button3',
bold: true
},
{
text: 'Button4',
}
];
var buttons2 = [
{
text: 'Cancel',
color: 'red'
}
];
var groups = [buttons1, buttons2];
myApp.actions(groups);
});
$$('.ac-4').on('click', function () {
var buttons1 = [
{
text: 'Share',
label: true
},
{
text: 'Email',
},
{
text: 'Message',
}
];
var buttons2 = [
{
text: 'Social Networks',
label: true
},
{
text: 'Facebook',
},
{
text: 'YouTube',
}
];
var buttons3 = [
{
text: 'Cancel',
color: 'red'
}
];
var groups = [buttons1, buttons2, buttons3];
myApp.actions(groups);
});
$$('.ac-5').on('click', function () {
var buttons = [
{
text: 'Callback Button1',
onClick: function () {
myApp.alert('Callback Button1 clicked');
}
},
{
text: 'Callback Button2',
onClick: function () {
myApp.alert('Callback Button2 clicked');
}
},
{
text: 'Cancel',
color: 'red',
onClick: function () {
myApp.alert('Cancel clicked');
}
},
];
myApp.actions(buttons);
});
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的actionsheet_create_open.html文件。
以http://localhost/actionsheet_create_open.html打开此HTML文件，输出显示如下。
单击第一个选项时，将在一个组中使用三个按钮创建操作表。
单击第二个选项时，将创建操作表，其中包含三个按钮以及一个组中的标题。
单击第三个选项时，将创建两个组，单击第四个选项时，将创建三个组。
在最后一个选项中，单击选项时将执行回调函数。