Framework7 - Crear y abrir hoja de acción
Descripción
Dado que la hoja de acción es un elemento dinámico, se puede crear y abrir solo con JavaScript. Los métodos de la aplicación relacionada para crear la hoja de acción se enumeran a continuación:
myApp.actions(groups)- Se utiliza para crear y abrir una hoja de acción con un número específico de grupos de botones.
myApp.actions(buttons)- Se utiliza para crear y abrir Action Sheet con un grupo y número definido de botones.
groups- Es una matriz de grupos donde cada grupo contiene una matriz de botones .
buttons- Es una matriz de botones en la que habrá un grupo .
Este método devolverá el elemento HTMLE creado dinámicamente de la hoja de acción .
Cada botón en una matriz de botones debe presentarse como Objeto con los parámetros del botón que se enumeran en la siguiente tabla:
| S. No | Descripción de parámetros | Tipo | Defecto |
|---|---|---|---|
| 1 | text Es la cadena con el texto del botón. |
cuerda | |
| 2 | bold Es un parámetro opcional, que hace que el texto del botón sea más en negrita cuando se establece en verdadero . |
booleano | falso |
| 3 | color Es un parámetro opcional y es uno de los 10 colores de botón predeterminados. |
cuerda | |
| 4 | bg Es un parámetro opcional y es uno de los 10 colores de fondo de los botones predeterminados. |
cuerda | |
| 5 | label Es un parámetro opcional y si se establece en verdadero , será el título en lugar del botón. |
booleano | cierto |
| 6 | disabled Es un parámetro opcional y si desea deshabilitar un botón, establezca este parámetro en verdadero . |
booleano | falso |
| 7 | onClick Es un parámetro opcional y es la función de devolución de llamada que se ejecutará cada vez que el usuario haga clic en este botón. |
función |
Ejemplo
El siguiente ejemplo demuestra el uso de Action Sheet en Framework7, que muestra un grupo y una cantidad específica de grupos de botones cuando hace clic en los enlaces:
<!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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como actionsheet_create_open.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/actionsheet_create_open.html y el resultado se muestra como se muestra a continuación.
Cuando hace clic en la primera opción, se crea una hoja de acción con tres botones en un grupo.
Cuando hace clic en la segunda opción, se crea una hoja de acción con tres botones junto con un título en un grupo.
Cuando hace clic en la tercera opción, se crean dos grupos y cuando hace clic en la cuarta opción, se crean tres grupos.
En la última opción, se ejecuta una función de devolución de llamada al hacer clic en las opciones.