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

ionic 上拉菜单(ActionSheet)

上拉菜单(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);

    };

}])

尝试一下 »

运行效果如下图：

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

ionic-Javascript：ionic 上拉菜单(ActionSheet)的更多相关文章

  1. Ionic Js一：上拉菜单(ActionSheet)

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

  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. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  5. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  6. javascript 横向下拉菜单演示

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...

  7. Android 上滑上拉菜单SlidingDrawer 不全屏显示的方法

    这里来说一个已经被废弃的SlidingDrawer.. 他可以实现上拉,下拉的菜单. 但是有个问题就是上拉以后,是全屏显示的. 首先 写一个布局: <RelativeLayout xmlns:a ...

  8. javascript实现下拉菜单的显示与隐藏

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. jq实现鼠标经过出现上拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Vue学习笔记【24】——Vue组件（组件切换）

    使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个)  <div id="app">    <input ...

  2. 【LeetCode 15】三数之和

    题目链接 [题解] 先把n个数字升序排个序. 然后枚举三元组最左边的那个数字是第i个数字. 之后用两个指针l,r移动来获取三元组的第2个和第3个数字. (初始值,l=i+1,r = n-1); 如果a ...

  3. 关于linux redhat及免费的问题

    我想下载一个redhat的免费版,这个免费版是不是就不叫redhat了? 是Fedora吗? 不要推荐 红旗 以及其它的版本了,谢谢!!! 007struggle | 浏览 12141 次 发布于20 ...

  4. XSS漏洞的渗透利用另类玩法

    XSS漏洞的渗透利用另类玩法 2017-08-08 18:20程序设计/微软/手机 作者:色豹 i春秋社区 今天就来讲一下大家都熟悉的 xss漏洞的渗透利用.相信大家对xss已经很熟悉了,但是很多安全 ...

  5. nteract 使用教程

    安装 直接去官网下载 一路回车 官网 建立python虚拟环境 和我们平时一样 不同的是在建立完之后 要安装一个kernel Using Python3 with pip and a virtual ...

  6. AI应用在金融领域，如何能够在商业上有所突破

    AI应用在金融领域,如何能够在商业上有所突破 如今,随着社会不断发展,技术不断进步,国内外各大金融机构已经在大数据.人工智能.区块链等新技术上有很多尝试,智能客服.智能投顾等新金融形式也早已不新鲜.那 ...

  7. Retrofit全攻略——进阶篇

    最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略——基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需 ...

  8. ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  9. POJ 1673 EXOCENTER OF A TRIANGLE(解三角形重心)

    题目链接:http://poj.org/problem?id=1673 AC代码: #include<cstdio> #include<cmath> #include<a ...

  10. Neo4j Cypher查询语言详解

    Cypher介绍 "Cypher"是一个描述性的图形查询语言,允许不必编写图形结构的遍历代码对图形存储有表现力和效率的查询.Cypher还在继续发展和成熟,这也就意味着有可能会出现 ...