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('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>'); }
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>
function showCustomJsonSheet() { $("#afui").actionsheet( [{ text: 'back', cssClasses: 'red', handler: function () { $.ui.goBack(); } }, { text: 'show alert 5', cssClasses: 'blue', handler: function () { alert("hi"); } }, { text: 'show alert 6', cssClasses: '', handler: function () { alert("goodbye"); } }]); }
Running effect:
jqMobi
<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
<script> function showCustomJsonSheet() { $("#afui").actionsheet( [{ text: 'back', cssClasses: 'red', handler: function () { $.ui.goBack(); } }, { text: 'show alert 5', cssClasses: 'blue', handler: function () { alert("hi"); } }, { text: 'show alert 6', cssClasses: '', handler: function () { alert("goodbye"); } },{ text: '大碗干拌', cssClasses: 'red', handler: function () { alert("哈哈"); } }]); } </script> 首页
# #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>
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; }
<style> #afui #af_actionsheet a{ color:blue; } </style>
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)!