草庐IT

ionic 上拉菜单(ActionSheet)

runoob 2023-04-07 原文

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);

    };  
}])

运行效果如下图：

ActionSheetionicfunctionionicActionSheetgt

有关ionic 上拉菜单(ActionSheet)的更多相关文章

  1. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  2. ruby - 下拉菜单在应该被选中的时候没有被选中……为什么？ - 2

    我正在尝试解决我们测试中的一个错误，我认为它应该有效。我很确定这是selectize或capybara中的错误，但我不明白为什么。我已经进入了capybara的源代码，一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误，我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu

  3. ruby-on-rails - 在 Rails 中，如何使用字符串数组实现 HTML 选择菜单？ - 2

    我有一个FinancialDocument#document_type模型属性。我想让用户从由字符串数组填充的HTML选择菜单中选择文档类型...doctypes=['Invoice','Packingslip','Other']对于每个选项，显示的标签和返回的值都是相同的。我查看了select和collection_select助手，但它们似乎适合选择子模型，而不仅仅是一个String值。我找不到如何让它们达到我的目的。这是我正在尝试的方法(我使用的是Haml，而不是Erb)...form_for(@financial_document)do|f|-doctypes=['Invoic

  4. ruby - OS X 中作为守护进程运行的脚本的菜单栏图标？ - 2

    我有一个ruby​​脚本(https://github.com/daemonza/MacBak)作为守护进程在我的macbook上运行并监视一堆目录的文件更改和rsync发生的任何更改。我想知道我能否让它在顶部的菜单栏中创建一个图标？只是为了让我知道它确实在运行，而不必使用ps检查它。也许以后如果需要的话，我可能希望能够从那里控制脚本，简单的带有停止和状态条目的下拉菜单等。从ObjectC看来我可以调用NSStatusItem来获取图标，但我真的只是想通过我的Ruby脚本轻松地完成它。也许我可以做一些applescript调用？ 最佳答案

  5. ruby-on-rails - Ruby on Rails : allow the user to enter a new information, 或单击下拉菜单选择现有信息 - 2

    这里是新的ROR程序员。我正在尝试构建一个Web应用程序，该应用程序允许用户填写表单，他们在其中输入公司信息，然后通过单击提交，将输入添加到数据库中。目前，如果用户要创建一个新条目，他们会看到几个字段，例如“公司名称”。有一个空白框供他们输入新公司，旁边有一个下拉菜单，用户可以使用该菜单查看数据库中的现有公司。"SelectaCompany")%>我正在寻找一种允许用户输入新公司的方法，或者单击下拉菜单并选择现有公司。目前:如果未在文本框中输入任何内容且未从下拉列表中选择任何选项，则将其保存为空白。如果输入了一些内容，但没有选择任何选项，它将被保存为空白。但是，如果输入内容并从下拉列表

  6. ruby-on-rails - 如何在 ActiveAdmin 中设置父菜单优先级？ - 2

    我的RubyonRails应用程序中有几个模型，如“Plan”、“Tester”、“Module”等。使用activeadmingem，我想为每个实体创建一个页面，并将每个实体放在下面几个不同的菜单。所以我的代码如下所示:ActiveAdmin.registerPlandomenuparent:'Planning',priority:1ActiveAdmin.registerTesterdomenuparent:'Planning',priority:2ActiveAdmin.registerModuledomenuparent:'Bundle',priority:1ActiveAdm

  7. ruby - 如何使用 Capybara 在下拉菜单中选择选项 - 2

    我正在尝试使用Capybara(2.1.0)从下拉菜单中选择一个项目。我想按数字选择(意思是选择第二个、第三个等选项)。我疯狂地用谷歌搜索了各种各样的东西，但没有运气。我能够通过使用以下值来选择它:find("option[value='4c430d62-f1ba-474f-8e8a-4452c55ea0a8']").click但我不想使用该方法b/c值会发生变化，这会使我的测试变得脆弱。下拉菜单的HTML是:Choose... Institution1 Institution/test我也试过这个:option=find(:xpath,"//*[@id='orga

  8. javascript - 带有 "More"选项的 Bootstrap 菜单响应问题 - 2

    我在工作中使用了bootstrap。我在页面顶部有一堆菜单项，大约15个元素。因此，我的顶部菜单不适应屏幕宽度。它被打断到溢出菜单引入的下一行。我想通过“更多”菜单阻止菜单溢出到下一行。想法是溢出的菜单项移动到“更多”菜单下拉列表。但我不知道如何检测菜单溢出。如何将额外的菜单项移动到“更多”下拉菜单中？我确实有一个基本的结构和标记。fiddle:http://jsfiddle.net/xFW8t/347/标记:DashboardDocsDocs2Docs3Docs4DataiWebProgramConfigSmartInsideSettingsAccountTypesNotificat

  9. javascript - 带有 ionic 搜索栏焦点的 ionic 触发模式打开功能 - 单击不起作用 - 2

    我有一个ion-searchbar，单击它会打开一个模式。然而，目前click过程实际上需要两次点击，一次聚焦，一次打开模式。我试图将点击添加到它包含的ion-toolbar中，并尝试使用[disabled]="true"禁用ion-searchbar"，但禁用的功能对ion-searchbar不可用。如何在无需双击的情况下触发新模式打开，并且焦点不会出现在原始搜索栏上？HTMLJSopenSearchModal(){letmyModal=this.modalCtrl.create(SearchmodalPage);myModal.present();} 最

  10. javascript - 使用 Cypress 处理悬停在菜单上 - 2

    我最近偶然发现了e2e工具-Cypress.io.我目前正在为与我合作的公司做POC，以对React应用程序进行端到端测试。它有一个悬停在菜单上的菜单，就像现在大多数网络应用程序一样。一个例子:网址:Fmovies我试图通过悬停单击菜单项，但测试失败，显示display设置为none。在Selenium中，我们使用moveElement方法转到该元素，然后执行我们需要执行的任何操作。但是，我没有使用Cypress这样做。考虑到现在的菜单，我这样写it('goestospecificelementinGenre',()=>{cy.get('#menu').within(()=>{cy.g

随机推荐