小强的HTML5移动开发之路（38）——jqMobi插件ActionSheet

百变鹏仔 2个月前 (10-19) #H5教程

文章标签之路

现在在手机客户端上action sheet非常常见，比如微信中的分享按钮菜单，下面我们使用jqmobi实现一个action sheet，如下：

首先右击上面的按钮选择审查元素（我用的是Chrome浏览器，先按F12）

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

然后Ctrl + F查找 showCustomHtmlSheet()方法

立即学习“前端免费学习笔记（深入）”；

代码贴出如下：

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

好吧我们下面开始在我们的工程中实现如上效果：

首先引入af.actionsheet.css文件

将上面的代码放入content中

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

运行结果：

文章推荐

小强的HTML5移动开发之路（38）——jqMobi插件ActionSheet

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集