Framework7 - Créer et ouvrir une feuille d'action
La description
Étant donné que la feuille d'action est un élément dynamique, elle peut être créée et ouverte à l'aide de JavaScript uniquement. Les méthodes de l'application associée pour créer une feuille d'action sont répertoriées ci-dessous -
myApp.actions(groups)- Il est utilisé pour créer et ouvrir une feuille d'action avec un nombre spécifié de groupes de boutons.
myApp.actions(buttons)- Il est utilisé pour créer et ouvrir une feuille d'action avec un groupe et un nombre défini de boutons.
groups- C'est un tableau de groupes où chaque groupe contient un tableau de boutons .
buttons- C'est un tableau de boutons dans lequel il y aura un groupe .
Cette méthode renverra le HTMLElement créé dynamiquement de la feuille d'action .
Chaque bouton d'un tableau de boutons doit être présenté en tant qu'objet avec les paramètres de bouton répertoriés dans le tableau suivant -
| S. Non | Paramètre et description | Type | Défaut |
|---|---|---|---|
| 1 | text C'est la chaîne avec le texte de Button. |
chaîne | |
| 2 | bold C'est un paramètre facultatif qui rend le texte du bouton plus audacieux lorsqu'il est défini sur true . |
booléen | faux |
| 3 | color C'est un paramètre facultatif et c'est l'une des 10 couleurs de bouton par défaut. |
chaîne | |
| 4 | bg C'est un paramètre facultatif et c'est l'une des 10 couleurs d'arrière-plan des boutons par défaut. |
chaîne | |
| 5 | label C'est un paramètre facultatif et si est défini sur true , ce sera le titre au lieu du bouton. |
booléen | vrai |
| 6 | disabled C'est un paramètre facultatif et si vous souhaitez désactiver un bouton, définissez ce paramètre sur true . |
booléen | faux |
| sept | onClick C'est un paramètre facultatif et c'est la fonction de rappel qui sera exécutée chaque fois que l'utilisateur cliquera sur ce bouton. |
fonction |
Exemple
L'exemple suivant illustre l'utilisation de la feuille d'action dans Framework7, qui affiche un groupe et un nombre spécifié de groupes de boutons lorsque vous cliquez sur les liens -
<!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>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous actionsheet_create_open.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/actionsheet_create_open.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous cliquez sur la première option, la feuille d'action est créée avec trois boutons dans un groupe.
Lorsque vous cliquez sur la deuxième option, la feuille d'action est créée avec trois boutons avec un titre dans un groupe.
Lorsque vous cliquez sur la troisième option, deux groupes sont créés et lorsque vous cliquez sur la quatrième option, trois groupes sont créés.
Dans la dernière option, une fonction de rappel est exécutée en cliquant sur les options.