上拉菜单(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. CF&&CC百套计划3 Codeforces Round #204 (Div. 1) E. Jeff and Permutation

    http://codeforces.com/contest/351/problem/E 题意: 给出一些数,可以改变任意数的正负,使序列的逆序对数量最少 因为可以任意加负号,所以可以先把所有数看作正数 ...

  2. Java并发编程原理与实战二十四：简易数据库连接池

    public class MyDataSource { private static LinkedList<Connection> pool = new LinkedList<> ...

  3. C# 中printDocument打印、预览、打印机设置和打印属性的方法

    private void Form1_Load(object sender, System.EventArgs e) { //获取或设置一个值,该值指示是否发送到文件或端口 printDocument ...

  4. Css之备忘录~

    1.background-size:contain/cover 两者的作用都是一样,一般用于设置小图标作为背景图,两者的区别是: Contain:不会失真     cover:会失真 2.a标签里面如 ...

  5. nginx安装Lets Encrypt SSL免费HTTPS加密证书

    Linux Nginx网站:Certbot安装配置Lets Encrypt SSL免费HTTPS加密证书 原文地址:https://renwole.com/archives/157 实验环境:Cent ...

  6. WeX5入门之HelloWorld

    学习目标:数据双向绑定 在ui2上右键 新建一个应用 然后会出现一个目录 右键hello 在创建页面 选择标准的空白模板 并起一个名 自动生成这两个文件 建立一个input组件 再建一个output组 ...

  7. gnuplot生成MySQL QPS图形

    1.建立MySQL QPS执行脚本 #!/bin/bash mysqladmin -uroot -p' extended-status -i1|awk \ 'BEGIN{flag=0; print & ...

  8. centos7 yum搭建lamp环境

    =============================================== 2018/1/14_第1次修改                       ccb_warlock == ...

  9. poj1095

    题意:给出n,要求输出第n个二叉树,二叉树编号规则如下图所示: 分析:g[i]表示有i个节点的二叉树,有多少种.f[i][j]表示有i个节点,且左子树有j个节点的树有多少种. sumg[i]表示g数组 ...

  10. 分布式git

    分布式 Git 你现在拥有了一个远程 Git 版本库,能为所有开发者共享代码提供服务,在一个本地工作流程下,你也已经熟悉 了基本 Git 命令.你现在可以学习如何利用 Git 提供的一些分布式工作流程 ...