jqMobi插件ActionSheet

shuai1234

浏览: 971929 次
性别:
来自: 山西

最近访客更多访客>>

tangang

shnsvyu

zhoukunhy

__点__

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

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

运行结果：

分享到：

jqMobi中Side Menu实现 | jqMobi插件json格式ActionSheet

2014-04-14 10:43
浏览 735
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqMobi插件ActionSheet

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqMobi插件ActionSheet

评论

发表评论

相关推荐

博客园首页新随笔联系管理订阅 随笔- 14 文章- 1 评论- 0 利用jquery mobiscroll插件选择日期、select、treeList的具

Jquery autocomplete插件的使用示例

jQuery Tags Input Plugin（添加/删除标签插件）

轻松搞定JSONP跨域请求

基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理

对象数组排序，利用jquery

HTML 5 学习之应用程序缓存

html5移动web开发小记

phonegap+jqmobi仿照新浪app左右滑动页面切换解决方案

Lazy Load, 延迟加载图片的 jQuery 插件

8款网页瀑布流布局插件（很不错的效果）

国内部分瀑布流网站

jqMobi中Side Menu实现

jqMobi插件json格式ActionSheet

设计漂亮的日历控件含图含源码

js加载倒计时

js中SetInterval与setTimeout用法

jquery ajax 详解

jQuery中setTimeout的几种使用方法

最近访客更多访客>>

博客园首页新随笔联系管理订阅随笔- 14 文章- 1 评论- 0 利用jquery mobiscroll插件选择日期、select、treeList的具