现在在手机客户端上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. AVCaptureSession音频视频采集

    // // AudioVideoCaptureViewController.m // live // // Created by lujunjie on 2016/10/31. // Copyrigh ...

  2. Nginx配置GZIP

    记录一次解决网站加载慢的问题 一. nginx配置 gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;g ...

  3. Django环境搭建（一）

    搭建Django环境之前先搭建python运行环境 需要了解: 解释器(编译器): 计算机不能直接理解任何除机器语言外的其他语言,所以程序员必须要把自己写的语言翻译成机器语言,而将其他语言翻译成机器语 ...

  4. 怎么做好看的html5游戏界面

    怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...

  5. iOS 中使用 XIB 自定义cell的两种方法以及编译出现常见 的错误 (xcode6.0之后)

    一. 注册cell 1.创建自定义cell并勾选 xib :(勾选xib就会自动生成与cell文件关联的xib) 2.在 tableViewController里注册自定义Cell (或者遵守tabl ...

  6. UVA 10635 - Prince and Princess LCS转化为LIS

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  7. ZOJ 2421 Recaman's Sequence

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1421 题目大意: 定义a^m为 a^m = a^(m-1) - m  如果a^ ...

  8. 8.2 Android灯光系统_led_class驱动

    android-5.0.2\hardware\libhardware\include\hardware\lights.h  //系统一些宏定义 android源码只带的灯光驱动在linux内核的dri ...

  9. 算法 Tricks（四）—— 判断序列中的字符/数值是否交替出现

    比如:353, 54545,数字都是交替出现的: bool alternate = true; for (int i = 0; i < M.size(); ++i){ if (M[i] != M ...

  10. ZOJ 3336 Friend Number II

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3780 题目大意: 给你一个正整数x,要求每个数字上的总和和x相同且比x大的最小 ...