Xiaoqiang's HTML5 mobile development road (38) - jqMobi plug-in ActionSheet-H5 Tutorial-php.cn

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

黄舟

Release： 2017-02-13 14:16:59

Original

1544 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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

 



jqMobi


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

Copy after login

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