Xiaoqiang’s HTML5 mobile development road (38) - jqMobi plug-in ActionSheet

Action Sheets are very common on mobile clients now, such as the share button menu in WeChat. Below we use jqMobi to implement an Action Sheet, as follows:

First right-click the button above and select Inspect Element (I am using the Chrome browser, press F12 first)

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

Then Ctrl + F to find the showCustomHtmlSheet() method

The code is posted as follows:

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

We can see that there are three button links in the above function. The last Cancel in the above picture is the system default cancel button.

Ctrl + F to find a plugin, you can see the following line

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

Okay, let’s start to achieve the above effect in our project:

First introduce the af.actionsheet.css file

will Put the above code into content

 






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

The running result is:

The above is the content of Xiaoqiang's HTML5 mobile development road (38) - jqMobi plug-in ActionSheet. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!