知识点
相关文章
更多最近更新
更多小强的HTML5移动开发之路（38）——jqMobi插件ActionSheet
2019-03-02 01:00|来源: 网路
现在在手机客户端上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>
运行结果：
转自：http://www.cnblogs.com/lizhanglong/p/3646468
相关问答
更多-
java开发使用html5作为前端的问题[2022-10-26]
html5主要在移动端开发中使用 html5跟html没有太大的区别，一般标签都能通用的 -
怎样开始 iOS 开发之路？要准备和学习什么[2023-10-18]
推荐两本中文书籍(objective-C程序设计)语法,(iphone开发基础教程)例子,这俩比较适合初学者.iphone开发的中文书籍屈指可数,其他百度一下就知道了. 最好采用MAC电脑,虚拟机有诸多问题.如果手头很紧,可以将ios设备越狱,将xcode破解,即可无证书真机测试.(我就是这么干的= =) -
如何开发html5 webapp[2022-02-08]
前端html + css + js + nodejs, 又包括各种框架jquery,bootstrap, reactjs, requirejs, swigjs, angularjs等等。 后端： 各种语言类型。 数据库：关系型数据库mysql, oracle, db2等， 非关系型数据库:redis, mongdb等， 嵌入式关系型数据库sqlite等。 -
html5用什么开发工具比较好啊？[2022-11-14]
《关联自动切片生成DivCss软件2016全能版》，这是个免费的H5页面快速生成的工具，这个工具不用手写代码就可以生产H5页面，代替了传统的手写代码，大大提升了开发效率，关键是操作简单快捷，推荐使用。 -
html5 canvas 开发游戏 的sprite方法[2022-10-04]
html5 canvas开发游戏，sprite是自定义的类，动画完全是通过js的定时器和内置的接口（不需要插件）实现的，和css3动画不一样，跟css sprite更是两码事，对canvas开发感兴趣，可以关注我的【深入浅出HTML5游戏开发视频教程】。 -
初入移动开发 jQueryMobule,jQMobi,Zepto 应该学哪个[2022-05-23]
恰好这三者都接触过,说下个人感受. jquerymobile是第一个接触并使用的,相对后两者他提供了更完整的APP开发体验,包括页面跳转视图管理等,功能强大,且使用了大量HTML5标签风格.做webapp开发的话可以采用这里面的设计思想.整体而言他功能强大,封装完善.缺点是:庞大导致性能(尤其是phonegap封装后的性能)不让人满意,速度响应和动画效果均卡顿(测试机型为2012年主力机型,2013以后的主流机型无压力) jQMobi,或者说AppFramework,是后来使用的封装,相对前者要小巧很多,性 ... -
哪些属于HTML5开发框架？[2022-05-20]
首先需要了解什么是HTML5，然后介绍HTML5相关的工具（包括IDE，框架，组件等），最后用这些工具开发一个应用，基本上论文就可以交差了。 至于开发框架，理解是各种不同功能的组件，一个web应用需要各种第三方组件，比如基础功能用到jQuery，界面样式用到Bootstrap，通用组件可以用到easyUI或者KendoUI，各种图表用到highcharts，拓扑图可以用mxGraph或者Qunee，通讯可以用Websocket，写CSS用less，模块化用requireJS或者SeaJS，移动平台组件可以用 ... -
我想了解html5游戏开发？求大神急[2022-07-21]
楼主想问的是html5游戏开发是什么吧？H5游戏开发，是在网页上运行的游戏，相比传统的Flash开发，H5有很大的优势，其中最明显的就是运行效率高，而且能在ios上运行。也就是说你用H5开发的游戏可以在微信朋友圈分享和运行~说道H5游戏开发，就不得不提一下Cocos游戏引擎了。作为最热门的游戏引擎之一，Cocos对H5有这极其好的支持。同时还可以跨平台的开发桌面端和移动端，楼主如果对H5开发感兴趣，我推荐从Cocos入手。 -
amcharts的JavaScript/HTML5 Charts作移动图片开发怎么样[2022-11-21]
这个本来就是用于移动开发的，而且是轻量级的控件，交互性能非常好 可以用~ -
我没有找到任何插件，但我修补了jCap以提供回调并添加了一个示例： http ：//github.com/irae/jCaps/blob/master/addsexample.html $("#myVid").jCaps({ language: 'en', languageChooser: false, toggleButton: false, onButton: false, offButton: false, interfaceImg: false, ...