Route de développement mobile HTML5 de Xiaoqiang (38) - ActionSheet du plug-in jqMobi-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

Route de développement mobile HTML5 de Xiaoqiang (38) - ActionSheet du plug-in jqMobi

Feb 13, 2017 pm 02:16 PM

Les 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 :

. Cliquez d'abord avec le bouton droit sur le bouton ci-dessus et sélectionnez Inspecter l'élément (j'utilise le navigateur Chrome, appuyez d'abord sur F12)

&lt;a class=&quot;button&quot; onclick=&quot;showCustomHtmlSheet()&quot;&gt;Show Custom Html Sheet&lt;/a&gt;

Copier après la connexion

Puis Ctrl F pour trouver la méthode showCustomHtmlSheet()

Le code est affiché comme suit :

   function showCustomHtmlSheet() {
           $(&quot;#afui&quot;).actionsheet(&#39;&lt;a  &gt;Back&lt;/a&gt;&lt;a  onclick=&quot;alert(\&#39;hi\&#39;);&quot; &gt;Show Alert 3&lt;/a&gt;&lt;a  onclick=&quot;alert(\&#39;goodbye\&#39;);&quot;&gt;Show Alert 4&lt;/a&gt;&#39;);
   }

Copier après la connexion

Nous pouvons voir qu'il y a trois liens de boutons dans la fonction ci-dessus. Le dernier Annuler dans l'image ci-dessus est le bouton d'annulation par défaut du système.

Ctrl F pour rechercher un plugin, vous pouvez voir la ligne suivante

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/css/af.actionsheet.css&quot;&gt;

Copier après la connexion

D'accord, commençons à obtenir l'effet ci-dessus dans notre projet :

Introduisez d'abord le fichier af.actionsheet.css

Mettez le code ci-dessus dans le contenu

<!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"/>
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;plugins/css/af.actionsheet.css&quot;&gt;
<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">
               &lt;a class=&quot;button&quot; onclick=&quot;showCustomHtmlSheet()&quot;&gt;Show Custom Html Sheet&lt;/a&gt;
            </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

Résultat d'exécution :

Ce qui précède est le contenu du chemin de développement mobile HTML5 de Xiaoqiang (38) - ActionSheet du plug-in jqMobi Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

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