现在在手机客户端上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. hello word-python 入门

    今天正式开始学习python,先写一个最今经典的例子 helloword #!/usr/bin/python3.2 print("hello work!") 知识点: #!usr/ ...

  2. java线程——详解Callable、Future和FutureTask

    回顾: 接上篇博客 java线程--三种创建线程的方式,这篇博客主要介绍第三种方式Callable和Future.比较继承Thread类和实现Runnable接口,接口更加灵活,使用更广泛.但这两种方 ...

  3. 洛谷 P1157 组合的输出

    P1157 组合的输出 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r<＝n),我们可以简单地将n个元素理解为自然数1,2,…,n,从中任取r个数. 现 ...

  4. 使用 LaTeX 绘制 PGM（Probabilistic Graphical Models）中的贝叶斯网络（bayesian networks）

    Software for drawing bayesian networks (graphical models) 这里需要调用 latex 中的绘图库:TikZ and PGF. 注意,下述 tex ...

  5. Ext常用控件

    多选下拉框 var workname = new Ext.form.MultiSelect({ store: pointComboBoxStore, fieldLabel: '工作面', labelS ...

  6. 【习题5-4 UVA-10763】Foreign Exchange

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果x>y 则num[(x,y)]--; 否则num[(x,y)]++; 看看每一个二元组的num值是不是都为0就好. [代码 ...

  7. Linux环境编程之共享内存区(一)：共享内存区简单介绍

    共享内存区是可用IPC形式中最快的.一旦内存区映射到共享它的进程的地址空间,进程间数据的传递就不再涉及内核.然而往该共享内存区存放信息或从中取走信息的进程间通常须要某种形式的同步.不再涉及内核是指:进 ...

  8. 【a101】高精度实数加法

    Time Limit: 1 second Memory Limit: 2 MB 问题描述 给出两个高精度正实数(可以含有小数点或没有),最长200位,字符串读入 求它们的和,小数部分末尾的0要舍去. ...

  9. GCD 初步学习

    GCD应该是比較牛逼的东西了吧,一时半会应该是操作不好. 在cocoa-china上面有两篇关于GCD的文章.GCD 深入理解(一) GCD 深入理解(二) CSDN荣芳志博客:点击打开链接 我仅仅是 ...

  10. 美国汪利宏的蒙特卡洛及卷积模拟程序，可以模拟top-hat光束和高斯光束在生物组织中的传输

    链接:https://pan.baidu.com/s/1yaCsQ8TCVPSIZ4TVBZgfnw 密码:otzr