zoukankan      html  css  js  c++  java
  • ionic-Javascript:ionic 上拉菜单(ActionSheet)

    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.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    取最小未用的账号
    Oracle 同义词
    RMAN备份报 RMAN-06059 错误
    Oracle11g memory_target
    基础记录
    uboot启动流程
    android有关生命周期探讨
    can协议
    java虚拟机
    内存管理机制
  • 原文地址:https://www.cnblogs.com/storebook/p/9007474.html
Copyright © 2011-2022 走看看