Framework7 - Criar e abrir folha de ação
Descrição
Como a Folha de ação é um elemento dinâmico, ela pode ser criada e aberta usando apenas JavaScript. Os métodos do aplicativo relacionado para criar Folha de Ação estão listados abaixo -
myApp.actions(groups)- É usado para criar e abrir a Folha de Ação com um número especificado de grupos de botões.
myApp.actions(buttons)- É usado para criar e abrir a Folha de Ações com um grupo e um número definido de botões.
groups- É um array de grupos onde cada grupo contém um array de botões .
buttons- É uma série de botões em que haverá um grupo .
Este método retornará HTMLElement criado dinamicamente da Folha de Ação .
Cada botão em uma matriz de botões deve ser apresentado como Objeto com os parâmetros do botão listados na tabela a seguir -
| S.Não | Parâmetro e Descrição | Tipo | Padrão |
|---|---|---|---|
| 1 | text É a String com o texto do botão. |
corda | |
| 2 | bold É um parâmetro opcional, o que torna o texto do botão mais negrito quando definido como verdadeiro . |
boleano | falso |
| 3 | color É um parâmetro opcional e é uma das 10 cores de botão padrão. |
corda | |
| 4 | bg É um parâmetro opcional e é uma das 10 cores de fundo padrão do botão. |
corda | |
| 5 | label É um parâmetro opcional e se for definido como verdadeiro , será o título em vez do botão. |
boleano | verdadeiro |
| 6 | disabled É um parâmetro opcional e se você quiser desativar um botão, defina este parâmetro como verdadeiro . |
boleano | falso |
| 7 | onClick É um parâmetro opcional e é a função de callback que será executada sempre que o usuário clicar neste botão. |
função |
Exemplo
O exemplo a seguir demonstra o uso da Folha de Ação no Framework7, que exibe um grupo e uma quantidade especificada de grupos de botões quando você clica nos links -
<!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>Resultado
Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -
Salve o código HTML fornecido acima como actionsheet_create_open.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/actionsheet_create_open.html e a saída é exibida conforme mostrado abaixo.
Quando você clica na primeira opção, a folha de ação é criada com três botões em um grupo.
Quando você clica na segunda opção, a folha de ação é criada com três botões junto com um título em um grupo.
Quando você clica na terceira opção, dois grupos são criados e quando você clica na quarta opção, três grupos são criados.
Na última opção, uma função de callback é executada ao clicar nas opções.