Xiaoqiang's road to HTML5 mobile development (39) - jqMobi plug-in json format ActionSheet-H5 Tutorial-php.cn

Xiaoqiang's road to HTML5 mobile development (39) - jqMobi plug-in json format ActionSheet

黄舟

Release： 2017-02-13 14:18:36

Original

1943 people have browsed it

In the previous article, we learned how to use ActionSheet. Careful friends may find that the format for creating lists is HTML. The code is 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

This In this article, let’s study ActionSheet in json format. It’s actually very simple. Just like the analysis method in the previous article, we first find the source code in the example code as follows:

<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>

Copy after login

                        function showCustomJsonSheet() {
                            $("#afui").actionsheet(
                            [{
                                text: &#39;back&#39;,
                                cssClasses: &#39;red&#39;,
                                handler: function () {
                                    $.ui.goBack();
                                }
                            }, {
                                text: &#39;show alert 5&#39;,
                                cssClasses: &#39;blue&#39;,
                                handler: function () {
                                    alert("hi");
                                }
                            }, {
                                text: &#39;show alert 6&#39;,
                                cssClasses: &#39;&#39;,
                                handler: function () {
                                    alert("goodbye");
                                }
                            }]);
                        }

Copy after login

Running effect:

##Okay, let’s try adding an entry below. Modify the code as follows:

 



jqMobi





 
 
	
    	

        	

           		<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
            
            
                
           	
            
            	首页
            
            
            	首页
                关于我们
            
            
            	Home
                
                	Home
                
            
        
    
    <script>
		function showCustomJsonSheet() {
			$("#afui").actionsheet(
			[{
				text: &#39;back&#39;,
				cssClasses: &#39;red&#39;,
				handler: function () {
					$.ui.goBack();
				}
			}, {
				text: &#39;show alert 5&#39;,
				cssClasses: &#39;blue&#39;,
				handler: function () {
					alert("hi");
				}
			}, {
				text: &#39;show alert 6&#39;,
				cssClasses: &#39;&#39;,
				handler: function () {
					alert("goodbye");
				}
			},{
				text: &#39;大碗干拌&#39;,
				cssClasses: &#39;red&#39;,
				handler: function () {
					alert("哈哈");
				}
			}]);
		}             
	</script>

Copy after login

Run it and see the effect:

# #Suddenly I found that the background we set above did not work. What is the reason? Let's take a look at the source code again and locate the element as follows:

<a href="javascript:;" class="red">大碗干拌</a>

Copy after login

See the background:white; this is the reason. Disabling this item will have an effect, as follows:

Okay, let’s go into the af.ui.css file and modify it as follows:

#afui #af_actionsheet a{
    border-radius:0;
    -webkit-border-radius:0;
    color:black;
    /*background:white;*/
    border:none;
    text-shadow:none;
}

Copy after login

The effect is the same as above, I won’t paste the image, so what if we want the text on the menu above to be blue? In fact, you can do it in af.ui.css as above, but I recommend not to modify it in this configuration file. We can add the following code to our index.html:

<style>
	#afui #af_actionsheet a{
		color:blue;
	}
</style>

Copy after login

The effect is as follows:

The above is Xiaoqiang’s HTML5 mobile development path (39) - the content of the jqMobi plug-in json format ActionSheet. For more related content, please pay attention to PHP Chinese website (m.sbmmt.com)!