現在在手機用戶端上Action Sheet非常常見,例如微信中的分享按鈕選單,下面我們使用jqMobi實現一個Action Sheet,如下:
首先右鍵點擊上面的按鈕選擇審查元素(我用的按鈕是Chrome瀏覽器,先按F12)
<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
然後Ctrl + FshowCustomHtmlSheet()方法
function showCustomHtmlSheet() { $("#afui").actionsheet('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>'); }我們可以看到上面的函數中有三個按鈕鏈接,上圖中最後一個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('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>'); } </script>
(3753L1%) ActionSheet的內容,更多相關內容請關注PHP中文網(www.php.cn)!