小強的HTML5行動開發之路（38）－jqMobi外掛ActionSheet

現在在手機用戶端上Action Sheet非常常見，例如微信中的分享按鈕選單，下面我們使用jqMobi實現一個Action Sheet，如下：

首先右鍵點擊上面的按鈕選擇審查元素（我用的按鈕是Chrome瀏覽器，先按F12）

<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>

然後Ctrl + FshowCustomHtmlSheet()方法

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

我們可以看到上面的函數中有三個按鈕鏈接，上圖中最後一個Cancel是系統預設的取消按鈕。

再Ctrl + F查找一個plugins,可以看到如下一行

<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">

檔案

將上面的程式碼放入content中

 






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

運作結果：

（3753L1%） ActionSheet的內容，更多相關內容請關注PHP中文網（www.php.cn）！