jqMobi插件(1)--HTML格式的ActionSheet
来源:互联网 发布:o2o源码 编辑:程序博客网 时间:2024/05/22 03:11
现在在手机客户端上Action Sheet非常常见,比如微信中的分享按钮菜单,下面我们使用jqMobi实现一个Action Sheet,如下:
首先右击上面的按钮选择审查元素(我用的是Chrome浏览器,先按F12)
- <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
然后Ctrl + F查找 showCustomHtmlSheet()方法
代码贴出如下:
- function showCustomHtmlSheet() {
- $("#afui").actionsheet('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>');
- }
再Ctrl + F查找一个 plugins,可以看到如下一行
- <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">
好吧我们下面开始在我们的工程中实现如上效果:
首先引入af.actionsheet.css文件
将上面的代码放入content中
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jqMobi</title>
- <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
- <link href="css/icons.css" rel="stylesheet" type="text/css"/>
- <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">
- <script src="appframework.js" type="text/javascript"></script>
- <script src="ui/appframework.ui.js" type="text/javascript"></script>
- </head>
- <body>
- <div id="afui">
- <div id="header">
- <!-- any additional HTML you want can go here -->
- <a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
- </div>
- <div id="content">
- <!-- this is where your panels will go -->
- <div id="main" title="Welcome" class="panel" selected="true">
- <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
- </div>
- <div id="about" title="About" class="panel" data-nav="second_nav">
- <!-- by setting data-nav the "second_nav" will be shown on this panel -->
- </div>
- </div>
- //底部
- <div id="navbar">
- <a target="#welcome" class="icon home">Home</a>
- </div>
- </div>
- <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>
- </body>
- </html>
0 0
- jqMobi插件(1)--HTML格式的ActionSheet
- jqMobi插件(2)--JSON格式的ActionSheet
- 小强的HTML5移动开发之路(39)——jqMobi插件json格式ActionSheet
- 小强的HTML5移动开发之路(38)——jqMobi插件ActionSheet
- jqMobi基础(1)
- jqmobi
- [ios]自定义的ActionSheet
- actionSheet imageView的边界
- ActionSheet
- ActionSheet
- IOS_禁用UIWebView的ActionSheet
- Actionsheet和AlertView的使用
- UIAlertController之ActionSheet的使用
- ActionSheet和AlertView的封装
- html的基本格式
- Html的基础格式
- html元素的格式
- jQMobi 1.0 发布,jQuery 的手机版本
- Android拍照并保存(对图片进行压缩,分解)
- AlertDialog自定义标题大小、颜色、位置
- ios高效开发二--ARC跟block那点事
- GDB调试手册
- c文件的输入输出,基础
- jqMobi插件(1)--HTML格式的ActionSheet
- 感叹!国产操作系统2年内真的能取代Windows操作系统
- 根据Uri获取sd卡图片
- 黑苹果安装遇到[IOBluetoothhcicontroller][start] -- completed不动的解决方法
- 关于项目文件导入打开报:无法识别元素 <Target> 中的属性“Returns”错误解决方法
- Objective-C相关Category的收集
- android 视图(View)是否可见状态
- C语言获取系统时间的几种方式
- 第11周项目1(3)-输出字母