本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（38）——jqMobi插件ActionSheet
现在在手机客户端上Action Sheet非常常见，比如微信中的分享按钮菜单，下面我们使用jqMobi实现一个Action Sheet，如下：
首先右击上面的按钮选择审查元素（我用的是Chrome浏览器，先按F12）
-
<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheeta>
然后Ctrl + F查找 showCustomHtmlSheet()方法
代码贴出如下：
-
function showCustomHtmlSheet() {
-
$("#afui").actionsheet('BackShow Alert 3Show Alert 4');
-
}
我们可以看到上面的函数中有三个按钮链接，上图中最后一个Cancel是系统默认的取消按钮。
再Ctrl + F查找一个 plugins,可以看到如下一行
-
<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">
好吧我们下面开始在我们的工程中实现如上效果：
首先引入af.actionsheet.css文件
将上面的代码放入content中
-
>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>jqMobititle>
-
<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">
-
-
<a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menua>
-
div>
-
<div id="content">
-
-
<div id="main" title="Welcome" class="panel" selected="true">
-
<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheeta>
-
div>
-
<div id="about" title="About" class="panel" data-nav="second_nav">
-
-
div>
-
div>
-
//底部
-
<div id="navbar">
-
<a target="#welcome" class="icon home">Homea>
-
div>
-
div>
-
<script>
-
-
function showCustomHtmlSheet() {
-
$("#afui").actionsheet('<a >Backa><a onclick="alert(\'hi\');" >Show Alert 3a><a onclick="alert(\'goodbye\');">Show Alert 4a>');
-
}
-
-
-
script>
-
body>
-
html>
运行结果：
阅读(445) | 评论(0) | 转发(0) |
