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

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)

<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>

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

Le code est affiché comme suit :

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

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

<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">

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

 






<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">


 
 
	

        

            
            Toggle Side Menu
        
        

            
            

               <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
            
            

            
            
        

        //底部
        

        Home
        
    

    <script>
		
		function showCustomHtmlSheet() {
			$("#afui").actionsheet(&#39;<a  >Back</a><a  onclick="alert(\&#39;hi\&#39;);" >Show Alert 3</a><a  onclick="alert(\&#39;goodbye\&#39;);">Show Alert 4</a>&#39;);
		}

                    
	</script>

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) !