首頁 >web前端 >H5教程 >小強的HTML5行動開發之路(38)-jqMobi外掛ActionSheet

小強的HTML5行動開發之路(38)-jqMobi外掛ActionSheet

黄舟
黄舟原創
2017-02-13 14:16:591542瀏覽

現在在手機用戶端上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中

 



jqMobi


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


 
 
	

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

//底部

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


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn