文章标题选项卡操作

最新推荐文章于 2024-06-18 07:15:00 发布

龙图图

最新推荐文章于 2024-06-18 07:15:00 发布

阅读量236

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78302730

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ionic/css/ionic.css">
    <script src="ionic/js/ionic.bundle.min.js"></script>

    <script src="angular.js"></script>
    <script>
        var app=angular.module("myAPP",['ionic']).controller("myCtrl",function ($scope) {
            $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
                console.log('Controller changed', oldController, oldIndex, newController, newIndex);
                console.log(arguments);
            };
        })


            .controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
                $scope.items = [];

                $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
                    $scope.settingsModal = modal;
                });

                var removeItem = function(item, button) {
                    $ionicActionSheet.show({
                        buttons: [],
                        destructiveText: 'Delete Task',
                        cancelText: 'Cancel',
                        cancel: function() {
                            return true;
                        },
                        destructiveButtonClicked: function() {
                            $scope.items.splice($scope.items.indexOf(item), 1);
                            return true;
                        }
                    });
                };

                var completeItem = function(item, button) {
                    item.isCompleted = true;
                };

                $scope.onReorder = function(el, start, end) {
                    ionic.Utils.arrayMove($scope.items, start, end);
                };

                $scope.onRefresh = function() {
                    console.log('ON REFRESH');

                    $timeout(function() {
                        $scope.$broadcast('scroll.refreshComplete');
                    }, 1000);
                }


                $scope.removeItem = function(item) {
                    removeItem(item);
                };

                $scope.newTask = function() {
                    $scope.settingsModal.show();
                };

                $scope.user = [
                    {
                        name:"Ben Sparrow",
                        words:"You on your way?"
                    },
                    {
                        name:"Max Lynx",
                        words:"Hey,it's me."
                    },
                    {
                        name:"Adam Bradleyson",
                        words:"I should buy a boat."
                    },
                    {
                        name:"Perry Governor",
                        words:"Look at my mukluks!"
                    },
                    {
                        name:"Mike Harrinqton",
                        words:"This is wicked good ice cream."
                    },
                ];

            })

            .controller('TaskCtrl', function($scope) {
                $scope.close = function() {
                    $scope.modal.hide();
                }
        });

    </script>


</head>
<body ng-app="myAPP" ng-controller="myCtrl">
<!--主题内容-->
<ion-tabs class="tabs-icon-only tabs-positive" >
    <ion-tab title="Home"
             icon-on="ion-ios-filing"
             icon-off="ion-ios-filing-outline"
             ng-controller="HomeCtrl">
        <ion-header-bar style="background-color: #cccccc">
            <h1 class="title">Chats</h1>

        </ion-header-bar>
        <ion-content has-tabs="true" on-refresh="onRefresh()">

            <ion-refresher></ion-refresher>
            <ion-list scroll="false" on-refresh="onRefresh()"
                      s-editing="isEditingItems"
                      animation="fade-out"
                      delete-icon="icon ion-minus-circled">
                <ion-item ng-repeat="item in user"
                          item="item"
                          buttons="item.buttons"
                          can-delete="true"
                          can-swipe="true"
                          on-delete="deleteItem(item)"
                          ng-class="{completed: item.isCompleted}">
                    <span>
                        <img src="n.jpg" height="56" width="56"/>
                        <p style="margin-left: 66px;margin-top: -50px"><b>{{item.name}}</b></p>
                        <p style="margin-left: 66px;">{{item.words}}</p>
                        <i class="ion-chevron-right" style="float: right;margin-top: -32px"></i>
                    </span>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-tab>

    <ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
        <header class="bar bar-header" style="background-color: #cccccc">
            <h1 class="title">Deadlines</h1>
        </header>
        <ion-content has-header="true">
            <h1>Deadlines</h1>
        </ion-content>
    </ion-tab>

    <ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
        <header class="bar bar-header" style="background-color: #cccccc">
            <h1 class="title">Settings</h1>
        </header>
        <ion-content style="text-align: center">

            <img src="a.jpg" height="300" width="300" style="margin-top: 100px"/>

        </ion-content>
    </ion-tab>

</ion-tabs>
</body>
</html>

龙图图

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题选项卡操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="ionic/css/ionic.css"> <script src="ionic/js/ionic.bundle.min.js"></scrip
复制链接

扫一扫