小强的HTML5移动开发之路（38）—

现在在手机客户端上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的更多相关文章

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

Xamarin开发手机聊天程序
使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载) 如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是 ...
String.Empty,NULL和""的区别
String.Empty,NULL和""的区别 string.Empty就相当于"" 一般用于字符串的初始化比如: string a; Console.Wri ...
[转]Linq使用心得——SelectMany替代二重foreach循环
本篇记录了Linq学习的心得,较为浅显,各位大牛请轻拍. 学习Linq其实已经很久了,但是一直没有使用的习惯,故水平也始终没有提高.近来刻意强迫自己用Linq来替代C# 2.0的一些写法.这里有一些心 ...
Mine Vison base on VC++ and procilica Gige Vison SDK
This is my first vision base on VC++6.0. I am so happy to record this time i succesfully create it b ...
Codeforces 232A - Cycles (构造 + 思维)
题目链接: 232A - Cycles(点击打开) 题意: 要构成一个存在 \(k\) 个三元环的图,需要多少个点,输出顶点数 \(n\),并输出图. 题解: 题目中的任何图都可以用 \(90\)~ ...
学习Java必看书籍和步骤
Java语言基础谈到Java语言基础学习的书籍,大家肯定会推荐Bruce Eckel的<ThinkinginJava>.它是一本写的相当深刻的技术书籍,Java语言基础部分基本没有其它 ...
GO语言学习（四）GO语言语言结构
Go Hello World 实例 Go 语言的基础组成有以下几个部分: 包声明引入包函数变量语句 & 表达式注释接下来让我们来看下简单的代码,该代码输出了"Hello ...
Scala基础知识（二）
1.条件表达式 object ConditionDemo { def main(args: Array[String]) { val x = //判断x的值,将结果赋给y val y = ) //打印 ...
OpenExeConfiguration的使用
//应用程序的路径 string appPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "App.exe"); ...
oracle 让人抓狂的错误之 null值与无值(无结果)-开发系列（一）
近期.在做开发.写存过的时候碰到一些问题,找了好长时间才发现原因.并且是曾经不知道的. 所以在这给记下来给自己备忘和大家參考. 一 .null值以下举个最简单的样例.寻常工作其中肯定比这个sql复 ...

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

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

随机推荐

热门专题