小強的HTML5行動開發之路（39）－jqMobi外掛json格式ActionSheet-H5教程-PHP中文網

小強的HTML5行動開發之路（39）－jqMobi外掛json格式ActionSheet

黄舟

發布： 2017-02-13 14:18:36

原創

1944 人瀏覽過

在上一篇中我們學會了ActionSheet的使用，細心的朋友可能會發現其中創建列表的格式是HTML的，代碼如下：

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

登入後複製

這一篇我們來研究一下json格式的ActionSheet,其實很簡單，和上一篇的分析方法一樣，我們先找到實例程式碼中的原始碼如下：

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

登入後複製

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

登入後複製

運作效果：

一個條目試試。修改程式碼如下：

 



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>

登入後複製

運行一下，看看效果：

突然發現我們上面設定的背景沒作用，這是什麼原因呢？我們再來看看原始碼，定位到元素如下：

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

登入後複製

看到上面的background:white;這就是原因，將這一禁掉會發現有效果了，如下：

好吧，我們進到af.ui.css檔案中修改如下：

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

登入後複製

和上面的效果相同，我就不想貼圖了，那麼如果我們想讓上面選單上面的文字是藍色的怎麼辦？其實可以像上面一樣在af.ui.css中該，但是我建議最好不要在這個配置文件中修改，我們可以在我們的index.html中添加如下代碼：

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

登入後複製

效果如下：

以上就是小強的HTML5行動開發之路（39）－jqMobi插件json格式ActionSheet的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！

🎜