上拉菜单(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. study later

    二分图匹配.左偏树.替罪羊树 四边形不等式优化 http://txhwind.blog.163.com/blog/static/203524179201242021458422/ http://www ...

  2. IEnumerable 与 IQueryable

    无论是在ado.net EF或者是在其他的Linq使用中,我们经常会碰到两个重要的静态类Enumerable.Queryable,他们在System.Linq命名空间下.那么这两个类是如何定义的,又是 ...

  3. 一个highcharts混合图Demo

    公司要我做一个highcharts的mockup,其实半个小时就能做完了,我做了将近两个小时,唉!不过还好,总算把东西学会了.勤能补拙! 把代码贴上来 布局很简单,一个div里套两个div,给好id, ...

  4. WCF: Retry when service is in fault state.

    Service Host: using System; using System.Configuration; using System.ServiceModel; using System.Serv ...

  5. thinkphp 原数据更新

    调用TP的save方法更新数据时,如果新数据与数据库中得数据一致, 那么执行M('table')->save(data)方法时,该方法会返回false.现在的需求是,哪怕用户要更新的数据与原数据 ...

  6. 【leetcode 简单】 第九十八题 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...

  7. pandas空值处理与插值

    # coding:utf-8 import pandas as pd import numpy as np import matplotlib.pyplot as plt from scipy.int ...

  8. SQL SERVER 视图优化经历

    系统中要求对HIS数据进行效益统计,因为HIS数据是需要第三方提供接口导入的,不清楚数据量大小,所以视图以业务为主未对其做性能优化(当时编写试图时就是几条简单的测试数据) 如今在项目接口实施完成后查看 ...

  9. JavaScript的基本概念

    主要内容: 语法 数据类型 流控制语句 理解函数 ECMA-262描述了JavaScript语法等基本概念.目前,ECMA-262第3版中定义的ECMAScript是各个浏览器实现最多的版本.所以主要 ...

  10. G - Pandaland HDU - 6005 (找最小环)

    题目链接:https://cn.vjudge.net/contest/275153#problem/G 具体思路: 我们可以按照暴力的方法进行做 , 我们可以枚举每一条边,将这条边的权值设置为inf, ...