Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release: 2017-02-13 14:18:36
Original
1925 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>

首页

<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 (www.php.cn)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template