上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。

HTML 代码

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>

        <ion-content >

            <h2 ng-click="show()">Action Sheet</h2>

        </ion-content>

    </ion-pane>

</body>

JavaScript 代码
在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

    // for form inputs)

    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    }

    if(window.StatusBar) {

      StatusBar.styleDefault();

    }

  });

})

.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){

    $scope.show = function() {

        var hideSheet = $ionicActionSheet.show({

            buttons: [

              { text: '<b>Share</b> This' },

              { text: 'Move' }

            ],

            destructiveText: 'Delete',

            titleText: 'Modify your album',

            cancelText: 'Cancel',

            cancel: function() {

                 // add cancel code..

               },

            buttonClicked: function(index) {

              return true;

            }

        });

        $timeout(function() {

            hideSheet();

        }, 2000);

    };

}])

运行效果如下图：





Ionic Js一：上拉菜单(ActionSheet)的更多相关文章

  1. ionic-Javascript：ionic 上拉菜单(ActionSheet)

    ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...

  2. ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑

    闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...

  3. ionic 上拉菜单(ActionSheet)安装和iOS样式不一样

    ISO中的界面是这样的: 然而,Android中的界面是这样的: 代码如下: HTML部分: <body ng-app="starter" ng-controller=&qu ...

  4. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  8. 原生js实现上拉加载

    原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数 ...

  9. 引用iScroll.js实现上拉和下拖刷新

    使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...

随机推荐

  1. NCPC2016-E- Exponial

    题目描述 Illustration of exponial(3) (not to scale), Picture by C.M. de Talleyrand-Périgord via Wikimedi ...

  2. CF&&CC百套计划2 CodeChef December Challenge 2017 Chef And his Cake

    https://www.codechef.com/DEC17/problems/GIT01 #include<cstdio> #include<algorithm> using ...

  3. ABOUT ME/OI回忆录

    \(ABOUT\ ME/OI回忆录\) 博主是一个退役的老菜鸡啦,学\(OI\)两年没搞过什么很厉害的东西,也没有做过很多题目,但是还是挺喜欢\(OI\)的. 在退役之后可能不会经常上博客园了,估计也 ...

  4. Backbone基础笔记

    之前做一个iPad的金融项目的时候有用到Backbone,不过当时去的时候项目已经进入UAT测试阶段了,就只是改了改Bug,对Backbone框架算不上深入了解,但要说我一点都不熟悉那倒也不是,我不太 ...

  5. [转载]内存的一些magic number和debug crt

    原文:http://www.360doc.com/content/13/0105/17/6295074_258392439.shtml 调试过debug版本的vc程序的人一定对0xCCCCCCCC和0 ...

  6. 【CodeForces】961 F. k-substrings 字符串哈希+二分

    [题目]F. k-substrings [题意]给定长度为n的串S,对于S的每个k-子串$s_ks_{k+1}...s_{n-k+1},k\in[1,\left \lceil \frac{n}{2} ...

  7. 20155303 2016-2017-2 《Java程序设计》第八周学习总结

    20155303 2016-2017-2 <Java程序设计>第八周学习总结 目录 学习内容总结(Linux命令) 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考 ...

  8. 加密文件之Java改进版

    对应Python版:加密文件之Python版Java版比Python版要快得多,两个版本不在一个量级上.在加密解密1G大文件时,Java版花费的时间是秒级,而Python版花费的时间是10分钟级. i ...

  9. Python-Web框架的本质

    Web框架的本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. Python中使用socket和 ...

  10. Android基于XMPP Smack Openfire下学习开发IM(一)实现用户注册、登录、修改密码和注销等

    http://blog.csdn.net/h7870181/article/details/8653865 以前学习过用Scoket 建立聊天,简单的建立聊天是没问题的,但如果要实现多人复杂的聊天,后 ...