Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (38) – jqMobi-Plug-in ActionSheet

Action Sheets sind mittlerweile auf mobilen Clients sehr verbreitet, wie zum Beispiel das Share-Button-Menü in WeChat. Nachfolgend verwenden wir jqMobi, um ein Action Sheet wie folgt zu implementieren:

Klicken Sie zunächst mit der rechten Maustaste auf die Schaltfläche oben und wählen Sie „Element prüfen“ (ich verwende den Chrome-Browser, drücken Sie zuerst F12)

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

Dann Strg + F, um die Methode showCustomHtmlSheet() zu finden

Der Code wird wie folgt gepostet:

   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;);
   }

Wir können sehen, dass es in der Funktion oben drei Schaltflächenlinks gibt. Der letzte Abbrechen im Bild oben ist die Standard-Abbrechen-Schaltfläche des Systems.

Strg + F, um ein Plugin zu finden, Sie können die folgende Zeile sehen

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

Okay, fangen wir an, den oben genannten Effekt in unserem Projekt zu erzielen:

Führen Sie zuerst die Datei af.actionsheet.css ein

Fügen Sie den obigen Code in den Inhalt ein

 






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

Laufendes Ergebnis:

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungspfad für Mobilgeräte (38) – jqMobi-Plug-in ActionSheet. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).