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

 

posted @ 2016-04-19 23:16  四叶草Clover  阅读(488)  评论(0编辑  收藏  举报