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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（38）——jqMobi插件ActionSheet

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

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

[html] view plain copy

print?

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

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

代码贴出如下：

[javascript] view plain copy

print?

  1. function showCustomHtmlSheet() {
  2. $("#afui").actionsheet(‘<a  >Back</a><a  onclick="alert(\‘hi\‘);" >Show Alert 3</a><a  onclick="alert(\‘goodbye\‘);">Show Alert 4</a>‘);
  3. }

我们可以看到上面的函数中有三个按钮链接，上图中最后一个Cancel是系统默认的取消按钮。

再Ctrl + F查找一个 plugins,可以看到如下一行

[html] view plain copy

print?

  1. <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">

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

首先引入af.actionsheet.css文件

将上面的代码放入content中

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jqMobi</title>
  6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
  7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>
  8. <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">
  9. <script src="appframework.js" type="text/javascript"></script>
  10. <script src="ui/appframework.ui.js" type="text/javascript"></script>
  11. </head>
  12. <body>
  13. <div id="afui">
  14. <div id="header">
  15. <!-- any additional HTML you want can go here -->
  16. <a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
  17. </div>
  18. <div id="content">
  19. <!-- this is where your panels will go -->
  20. <div id="main" title="Welcome" class="panel" selected="true">
  21. <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
  22. </div>
  23. <div id="about" title="About" class="panel" data-nav="second_nav">
  24. <!-- by setting data-nav the "second_nav" will be shown on this panel -->
  25. </div>
  26. </div>
  27. //底部
  28. <div id="navbar">
  29. <a target="#welcome" class="icon home">Home</a>
  30. </div>
  31. </div>
  32. <script>
  33. function showCustomHtmlSheet() {
  34. $("#afui").actionsheet(‘<a  >Back</a><a  onclick="alert(\‘hi\‘);" >Show Alert 3</a><a  onclick="alert(\‘goodbye\‘);">Show Alert 4</a>‘);
  35. }
  36. </script>
  37. </body>
  38. </html>

运行结果：

时间： 2024-12-07 09:38:05

HTML5移动开发之路（38）——jqMobi插件ActionSheet的相关文章

HTML5移动开发之路（33）—— jqMobi基础

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(33)-- jqMobi基础 一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的JavaScript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架. 2012年3月13日,jqMobi 1.0版本正式发布.现在最新的版本是jqMobi

HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(41)--jqMobi中Side Menu实现(类似人人网) 记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: [html] view plain copy print? <!DOCTYPE html> &l

HTML5移动开发之路（37）——jqMobi快速入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(37)--jqMobi快速入门 在<HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugins目录./ui目录./appframework.js文件,如下图所示. 如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02.html 接

HTML5移动开发之路（1）——jqMobi中Side Menu实现（类似人人网）

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: 接下来再添加一个panel如下 接下来我们来添加一个<nav>在panel同级标签下 接下来我们再来添加一个panel,并添加header和footer 郑州男科医院 我们会发现此时两个panel对应的side menu是同一个,下面我们为各个pa

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(42)--HTML4与HTML5文档结构比较 一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head> </head> <body> <h1>第一章 小强的HTML5移动开发之路</h1> <h2>1.1 HTM

HTML5移动开发之路（15）——HTML5中的音频

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(15)--HTML5中的音频 浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准.现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的.然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦.在HTML5的新标准中规定了一种通过

HTML5移动开发之路（21）—— PhoneGap

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(21)-- PhoneGap 一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada 和 Blackberry 智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外 PhoneGap 拥有丰富的插件,可以

HTML5移动开发之路（12）——从一个多媒体标签说起 一、视频播放

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(12)--从一个多媒体标签说起 一.视频播放 [html] view plain copy print? <html> <head> <title>多媒体播放</title> </head> <body> <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4&qu