上拉菜单(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. codevs 1070 普通递归关系

    1070 普通递归关系  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 考虑以下定义在非负整数n上的递归关系 f( ...

  2. codevs 1080 线段树练习 CDQ分治

    codevs 1080 线段树练习 http://codevs.cn/problem/1080/  时间限制: 1 s  空间限制: 128000 KB   题目描述 Description 一行N个 ...

  3. 针对TCP连接异常断开的分析

    我们知道,一个基于TCP/IP的客户端-服务器的程序中,正常情况下,我会是启动服务器使其在一个端口上监听请求,等待客户端的连接:通过TCP的三次握手,客户端能够通过socket建立一个到服务器的连接: ...

  4. CentOS Linux 7 安装教程

    建立新的虚拟机 将CentOS 7 ISO文件插入到CD-Rom 启动虚拟机,F12选择启动方式为CD/DVD 选择Install CentOS Linux 7 加载安装必要文件 选择安装过程所显示的 ...

  5. Ubuntu 14.04 Nvidia显卡驱动安装及设置

    更换主板修复grub 引导后,无法从Nvidia进入系统(光标闪烁), 可能是显卡驱动出了问题. 1. 进入BIOS设置, 从集成显卡进入系统 将显示器连接到集显的VGI口, 并在BIOS中设置用集显 ...

  6. 升级lamp中php5.6到php7.0过程

    升级过程我就直接摘录博友,http://www.tangshuang.net/1765.html,几乎问题和解决办法都是参照他的,所以我也就不另外写了.谢谢!! 周末看了一下php7的一些情况,被其强 ...

  7. [转]Linux 线程分离状态

    线程的分离与结合 在任何一个时间点上,线程是可结合的(joinable),或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源和杀死:在被其他线程回收之前,它的存储器资源(如栈) ...

  8. 【FCS NOI2018】福建省冬摸鱼笔记 day1

    省冬的第一天. 带了本子,笔,一本<算法导论>就去了.惊讶于为什么同学不带本子记笔记. 他们说:“都学过了.”,果然这才是巨神吧. 第一天:数论,讲师:zzx 前几页的课件挺水,瞎记了点笔 ...

  9. Linux内核跟踪之ring buffer的实现【转】

      转自:http://blog.chinaunix.net/uid-20543183-id-1930845.html ---------------------------------------- ...

  10. hibernate学习之一 框架配置

    hibernate 框架 1.hibernate框架应用在javaee三层结构中的dao层框架 2.好处就是不需要写复杂jdbc代码,不需要sql语句实现 3.是开源的轻量级框架 hibernate使 ...