angular——分享按钮的上拉菜单

<button  class="btn gray_text_btn list_item" ng-click="action.toShare()"><i class="icon ion-share"></i></button>
<!-------------------- 底部按钮  ----------------------->
    <section class="bar bar-footer lists_in_4_row">
            <button  class="btn gray_text_btn list_item" ng-click="action.toShare()"><i class="icon ion-share"></i></button>
            <button  class="btn gray_text_btn collect_btn animated_btn list_item" ng-click="collected = !collected" ng-class="{‘active‘:collected}">
                <i class=‘icon‘ ng-class=" collected ? ‘ion-ios-star‘ : ‘ion-ios-star-outline‘ "></i>68
            </button>
            <button  class="btn gray_text_btn  comment_btn list_item" ng-click=""  ng-class="{‘active‘:commented}" >
                <i class="icon" ng-class="commented ?  ‘ion-ios-chatboxes‘: ‘ion-ios-chatboxes-outline‘"></i>68
            </button>
            <button  class="btn gray_text_btn list_item" ng-click="action.toMoreOptions()">
                <i class="icon ion-navicon"></i>
            </button>
    </section>
// 「分享」action sheet
            $scope.action.toShare = function() {
                    var hideSheet = $ionicActionSheet.show({
                            buttons: [
                                    { text: ‘<i class="fa fa-wechat social_icon"></i><p>微信</p>‘ },
                                    { text: ‘<i class="ion-load-b social_icon"></i><p>朋友圈</p>‘ },
                                    { text: ‘<i class="fa fa-qq social_icon"></i><p>QQ</p>‘ },
                                    { text: ‘<i class="fa fa-weibo social_icon"></i><p>微博</p>‘ },
                            ],
                            cssClass: ‘share_action_sheet‘,
                            titleText: ‘分享到‘,
                            cancelText: ‘取消‘,
                            buttonClicked: function(index) {
                                    switch (index){
                                            case 0 :
                                                    return true;
                                            case 1 :
                                                    return true;
                                            case 2 :
                                                    return true;
                                            case 3 :
                                                    return true;
                                    }
                            }
                    });
            };
时间: 2024-10-14 00:41:26

angular——分享按钮的上拉菜单的相关文章

angular——更多按钮的上拉菜单(路由跳转)

<button class="btn gray_text_btn list_item" ng-click="action.toMoreOptions()"> <i class="icon ion-navicon"></i> </button> <!-------------------- 底部按钮 -----------------------> <section class=&q

ionic-Javascript:ionic 上拉菜单(ActionSheet)

ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl&quo

UIAlertController类--sheet上拉菜单1(基本的)

一.效果 二.代码实现 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [self sheetTest1]; } /** 注意:不能在上拉菜单中添加文本框 如果强行添加了文本框,会报运行时错误: reason: 'Text fields can only be added to an alert controller of style UIAlertControllerStyleAler

Android 自定义仿IOS上拉菜单实现

最近在做一个歪果仁给我外包的项目,主页需要做一个类似于IOS那种上拉菜单的功能,于是一时间试了各种方法,什么Spinner.Drawlayout,SlidingMenu等等等等,都搞不了,后面实在被逼无奈自己写了一个上拉菜单控件,居然还能凑合着用! 姑且可以叫他MyPullUpMenu! 有时间我会封装一下发到GitHub. 效果图如下: 实现的功能有仨: 1.上拉位置未超过一定距离时,松开自动往下滚动. 2.上拉位置超过一定距离时,松开自动网上滚动直至菜单全展开. 3.菜单滚动到顶部并停止滚动

Bootstrap单按钮的下拉菜单

简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootstrap 版本中. 完整代码: <!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <scr

bootstrap分割的按钮下拉菜单,按钮和下拉菜单不对齐问题

[背景] 最近在研究bootstrap,在实现分割的按钮下拉菜单时,遇到这样一个问题,按钮和下拉菜单不对齐.大小不一样,见下图: [解决方式] 需要加一句<!DOCTYPE html>,html加在<html>标签前面,jsp加在<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

angular 实现自定义样式下拉菜单

自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng-app='App'> <head> <meta charset="UTF-8"> <title>Document</title> <script src='../angular-1.3.9/angular.js'><

Python3 Tkinter基础 Menubutton 设置一个按钮 点击按钮出现下拉菜单

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: from tkinter import * root=Tk() #配置一个按钮并放置 menubutton=Menubutton(root, text='单击出现下拉菜单', relief=RAISED) menubutton.pack() userChoice

JS 按钮下一步 下拉菜单内容转换

下一步按钮 用到的知识点 点击事件  onclick 移除属性  removeAttribute 创建属性  setAttribute 源代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="aaa&qu