现在在手机客户端上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>');
- }
我们可以看到上面的函数中有三个按钮链接,上图中最后一个Cancel是系统默认的取消按钮。
再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>
运行结果:
相关推荐
jqMobi参考手册
bapp-framework-2.1.0
结合appframework 精简化适合开发和学习的一个框架;
有利于优化移动端代码,快速简单实现所需功能的框架集
jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架。 2012年3月13日,jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0 jqMobi的特点 速度快 适用于...
JqMobi+PhoneGap项目实战 JqMobi基础知识
这是一整套完整的jqmobi icon图标大全
jqmobi1.02rc1 轻量级跨平台移动开发框架
intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后,一直聚焦于修正系统的bug(比如安卓平台上的 CSS3 变换)、提供一个可靠的 scrolling ...
使用jqmobi,模仿微信做工作管理系统
jqMobi学习笔记,方便查询使用,学习笔记,方便查询使用
jqmobi+phonegap+手机触屏滑动效果js 动态设置手机高宽度
Jqmobi做的百度地图,支持三维地图 源码
利用Jqmobi框架做的百度地图,支持三维地图,附上全部源码,初学者可以看一下
支持大部分时间控件还有下拉选择功能,支持大多移动web框架
Learning Node.js 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
JqMobi快速参考手册
jqmobi的帮助文档,全面的UI,使用浏览器打开F12调试查看源代码即可
appframework3.0 jqmobi3.0.0测试版,好多bug已被修复,赶紧下砸使用吧! ps: 交流企鹅群:333492644
jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极其快速的查询选择库,支持W3C查询。