现在在手机客户端上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>

运行结果：

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

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. solr/lucence和关系数据库的混合使用

    我们知道solr提供了一个DIHandler,提供将关系数据库中的数据导成索引,然后使用solr查询. 对于一个大表中关联数个小表的查询,这非常耗费时间. 我的思路是: 1. 将一个大表做成索引,使用 ...

  2. 一些常用JS函数和技巧总结

    1.JS原生函数parseInt(),返回字符串的第一个数字,默认是十进制. 2.!!data.success  //强制转换成布尔类型

  3. Appium_Java_API

    1. driver.findElement(MobileBy.AndroidUIAutomator("邀请")).click();2. driver.findElementById ...

  4. 边缘独立（marginal independent）的理解及举例

    1. 定义 ∀xi∈dom(X),yj∈dom(Y),yk∈dom(Y),如果满足, P(X=xi|Y=yj)==P(X=xi|Y=yk)P(X=Xi) 则称随机变量 X 边缘独立于随机变量 Y. 理 ...

  5. 1.4 Python基础知识 - 代码书写格式及条件判断"if ... else ..."

    一.代码的书写规则 在所有的开发语言中,代码之间都是有关联的关系,有的是包含关系,有的是上下级关系,有的是代表语句的结束.在python中也是有相应的规则的: 1.在没有上下级关系的代码中,代码要顶行 ...

  6. GCJ 2008 Round 1A Minimum Scalar Product

    https://code.google.com/codejam/contest/32016/dashboard 题目大意: GCJ(google code jam)上的水题.下周二有比赛,来熟悉熟悉. ...

  7. Mac 环境下svn服务器的配置

    Mac 环境下svn服务器的配置 本文目录 • 一.创建代码仓库,用来存储客户端所上传的代码 • 二.配置svn的用户权限 • 三.使用svn客户端功能 在Windows环境中,我们一般使用Torto ...

  8. OC学习篇之---归档和解挡

    今天我们来看一下OC中的一个重要知识点:归档 OC中的归档就是将对象写入到一个文件中,Java中的ObjectInputStream和ObjectOutputStream来进行操作的.当然在操作的这些 ...

  9. 中间件、服务器和Web服务器三者的区别

    相信很多的Web安全初学者和我一样,对中间件和服务器的认识不够深刻,对两者的概念可能会有所混淆. 正好今天在学习的时候突然想到了这个问题,粗略百度了一下,似乎网上对这个问题的解释不多,那么就由我来为大 ...

  10. IDEA 创建Web项目并在Tomcat中部署运行（转）

    原文地址:https://www.cnblogs.com/tufujie/p/5738250.html IDEA 14.0.5 apache-tomcat-8.0.32 步骤:File->New ...