Maison
interface Web
Tutoriel H5
Route de développement mobile HTML5 de Xiaoqiang (38) - ActionSheet du plug-in jqMobi



Route de développement mobile HTML5 de Xiaoqiang (38) - ActionSheet du plug-in jqMobi
Feb 13, 2017 pm 02:16 PMLes feuilles d'action sont désormais très courantes sur les clients mobiles, comme le menu du bouton de partage dans WeChat. Ci-dessous, nous utilisons jqMobi pour implémenter une feuille d'action, comme suit :
<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
Copier après la connexion
function showCustomHtmlSheet() { $("#afui").actionsheet('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>'); }
Copier après la connexion
<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">
Copier après la connexion
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqMobi</title> <link href="css/af.ui.css" rel="stylesheet" type="text/css"/> <link href="css/icons.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css"> <script src="appframework.js" type="text/javascript"></script> <script src="ui/appframework.ui.js" type="text/javascript"></script> </head> <body> <p id="afui"> <p id="header"> <!-- any additional HTML you want can go here --> <a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a> </p> <p id="content"> <!-- this is where your panels will go --> <p id="main" title="Welcome" class="panel" selected="true"> <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a> </p> <p id="about" title="About" class="panel" data-nav="second_nav"> <!-- by setting data-nav the "second_nav" will be shown on this panel --> </p> </p> //底部 <p id="navbar"> <a target="#welcome" class="icon home">Home</a> </p> </p> <script> function showCustomHtmlSheet() { $("#afui").actionsheet('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>'); } </script> </body> </html>
Copier après la connexion
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
3 Il y a quelques semaines
By 王林
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds Tags

Article chaud
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
3 Il y a quelques semaines
By 王林
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
