ionic

于 2017-11-15 20:33:36 发布
阅读量252 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gh323093/article/details/78543931 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css">
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
</head>
<body>
<!--&lt;!&ndash;明亮的&ndash;&gt;-->
<!--<div class="bar bar-header bar-light">-->
    <!--<h1 class="title">新闻时间</h1>-->
<!--</div>-->
<!--&lt;!&ndash;蓝色&ndash;&gt;-->
<!--<div class="bar bar-header bar-positive">-->
    <!--<h1 class="title">bar-positive</h1>-->
<!--</div>-->
<!--&lt;!&ndash;天蓝色&ndash;&gt;-->
<!--<div class="bar bar-header bar-calm">-->
    <!--<h1 class="title">bar-calm</h1>-->
<!--</div>-->
<!--&lt;!&ndash;绿色&ndash;&gt;-->
<!--<div class="bar bar-header bar-balanced">-->
    <!--<h1 class="title">bar-balanced</h1>-->
<!--</div>-->
<!--&lt;!&ndash;橙黄色&ndash;&gt;-->
<!--<div class="bar bar-header bar-energized">-->
    <!--<h1 class="title">bar-energized</h1>-->
<!--</div>-->
<!--&lt;!&ndash;红色&ndash;&gt;-->
<!--<div class="bar bar-header bar-assertive">-->
    <!--<h1 class="title">bar-assertive</h1>-->
<!--</div>-->
<!--&lt;!&ndash;紫色&ndash;&gt;-->
<!--<div class="bar bar-header bar-royal">-->
    <!--<h1 class="title">bar-royal</h1>-->
<!--</div>-->
<!--&lt;!&ndash;黑色&ndash;&gt;-->
<!--<div class="bar bar-header bar-dark">-->
    <!--<h1 class="title">bar-dark</h1>-->
<!--</div>-->
<!--副标题-->
<div class="bar bar-header bar-positive">
    <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader bar-assertive">
    <h2 class="title">Sub Header</h2>
</div>

<!--浅亮色-->
<div class="bar bar-footer bar-stable">
    <h1 class="title">Blig</h1>
</div>
</body>
</html>

第二个按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
</head>
<body>
<div class="bar bar-header">
    <div class="h1 title">Button按钮</div>
</div>

<div class="content padding has-header">
    <p>
        <button class="button button-small button-light">button-light(浅色的)</button>
    </p>
    <p>
        <button class="button button-small button-stable">button-stable(浅亮色)</button>
    </p>
    <p>
        <button class="button button-small button-positive">button-positive(蓝色)</button>
    </p>
    <p>
        <button class="button button-small button-calm">button-calm(天蓝色)</button>
    </p>
    <p>
        <button class="button button-small button-balanced">button-balanced(绿色)</button>
    </p>
    <p>
        <button class="button button-small button-energized">button-balanced(橙黄色)</button>
    </p>
    <p>
        <button class="button button-small button-assertive">button-balanced(红色)</button>
    </p>
    <p>
        <button class="button button-small button-royal">button-balanced(紫色)</button>
    </p>
    <p>
        <button class="button button-small button-dark">button-dark(黑色)</button>
    </p>
    <p>
        <button></button>
    </p>
</div>

</body>
</html>


第三个无背景按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
</head>
<body>
<div class="bar bar-header">
    <div class="h1 title">Button按钮</div>
</div>

<div class="content padding has-header">
    <p>
        <button class="button button-outline button-light">button-light</button>
    </p>
    <p>
        <button class="button button-outline button-stable">button-stable</button>
    </p>
    <p>
        <button class="button button-outline button-positive">button-positive</button>
    </p>
    <p>
        <button class="button button-outline button-calm">button-calm</button>
    </p>
    <p>
        <button class="button button-outline button-balanced">button-balanced</button>
    </p>
    <p>
        <button class="button button-outline button-energized">button-energized</button>
    </p>
    <p>
        <button class="button button-outline button-assertive">button-assertive</button>
    </p>
    <p>
        <button class="button button-outline button-royal">button-royal</button>
    </p>
    <p>
        <button class="button button-outline button-dark">button-dark</button>
    </p>
    <p>
        <button></button>
    </p>
</div>

</body>
</html>


第四个按钮栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
</head>
<body>
<!-- 头部按钮栏 -->
<div class="bar bar-header">
    <div class="bar bar-header">
        <div class="button-bar">
            <a class="button activated">First</a>
            <a class="button">Second</a>
            <a class="button">Third</a>
        </div>
    </div>
</div>

<!-- 内容页上的按钮栏 -->
<div class="content has-header padding">
    <p>
    </p><div class="button-bar bar-light">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-stable">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-positive">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-calm">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-energized">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-balanced">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-assertive">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-royal">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p></p>
    <p>
    </p><div class="button-bar bar-dark">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>
    <p>
        <button></button>
    </p>
</div>

</body>
</html>


第五个头部和底部按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
</head>
<body>
<div class="bar bar-header">
    <button class="button button-icon icon ion-navicon"></button>
    <div class="h1 title">Header Buttons</div>
    <button class="button button-clear button-positive">Edit</button>
</div>



<div class="bar bar-header">
    <button class="button icon ion-navicon"></button>
    <h1 class="title">Header Buttons</h1>
    <button class="button">Edit</button>
</div>
</body></html>

第六个菜单

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link href="../ionic_jiabao/css/ionic.css" rel="stylesheet">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        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) {
                        // org.apache.cordova.statusbar required
                        StatusBar.styleDefault();
                    }
                });
            })
            .config(function($stateProvider, $urlRouterProvider) {
                $stateProvider

                    .state('app', {
                        url: "/app",
                        abstract: true,
                        templateUrl: "menu.html",
                        controller: 'AppCtrl'
                    })
                    .state('app.playlists', {
                        url: "/playlists",
                        views: {
                            'menuContent' :{
                                templateUrl: "playlists.html",
                                controller: 'PlaylistsCtrl'
                            }
                        }
                    })
                // if none of the above states are matched, use this as the fallback
                $urlRouterProvider.otherwise('/app/playlists');
            })
            .controller('AppCtrl', function($scope) {
            })
            .controller('PlaylistsCtrl', function($scope) {
                console.log("PlaylistsCtrl");
                $scope.playlists = [
                    { title: 'Reggae', id: 1 },
                    { title: 'Chill', id: 2 },
                    { title: 'Dubstep', id: 3 },
                    { title: 'Indie', id: 4 },
                    { title: 'Rap', id: 5 },
                    { title: 'Cowbell', id: 6 }
                ];
            })
            .controller('PlaylistCtrl', function($scope, $stateParams) {
            })
    </script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>

<script id="menu.html" type="text/ng-template">
    <ion-side-menus>
        <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
        </ion-pane>

        <ion-side-menu side="left">
            <header class="bar bar-header bar-stable">
                <h1 class="title">Left</h1>
            </header>
            <ion-content class="has-header">
                <ion-list>
                    <ion-item nav-clear menu-close href="#/app/search">
                        Search
                    </ion-item>
                    <ion-item nav-clear menu-close href="#/app/browse">
                        Browse
                    </ion-item>
                    <ion-item nav-clear menu-close href="#/app/playlists">
                        Playlists
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</script>

<script id="playlists.html" type="text/ng-template">
    <ion-view title="Playlists">
        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>

        <ion-tabs class="tabs-positive tabs-icon-only">
            <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
                <!-- Tab 1 content -->
                <ion-content>
                    <ion-list>
                        <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
                            {{playlist.title}}
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-tab>
            <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
                <!-- Tab 2 content -->
                <ion-content>
                    <h1>About</h1>

                </ion-content>
            </ion-tab>
            <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
                <!-- Tab 3 content -->
                <ion-content>
                    <h1>Settings</h1>
                </ion-content>
            </ion-tab>
        </ion-tabs>
    </ion-view>
</script>
</body>
</html>


第七个滑动页面
<!DOCTYPE html>
<html ng-app="ionic">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css">
</head>
<body>
<ion-tabs class="tabs-positive tabs-icon-top">

    <ion-tab title="新闻" icon-on="ion-xbox" >
        <ion-view>
            <ion-header-bar class="bar-positive">
                <h1 class="title">新闻首页</h1>
            </ion-header-bar>
            <ion-content>
                <a class="item item-thumbnail-left" href="#">
                    <img src="img/07.jpeg" width="100px">
                    <h2 style="color: #0c63ee">朝鲜警告美军三航母在半岛附近军演 或引发核战争</h2>
                    <p style="color: #b2b2b2">新浪</p>
                </a>
            </ion-content>
        </ion-view>
    </ion-tab>

    <ion-tab title="歌曲" icon-off="ion-music-note">
        <ion-view>
            <ion-header-bar  class="bar-positive">
                <h1 class="title">歌曲</h1>
            </ion-header-bar>
            <ion-content>
                <p>about content</p>
            </ion-content>
        </ion-view>
    </ion-tab>

    <ion-tab title="个人信息" icon-off="ion-home">
        <ion-view>
            <ion-header-bar  class="bar-positive">
                <h1 class="title">个人信息</h1>
            </ion-header-bar>
            <ion-content>
                <p>settings content</p>
            </ion-content>
        </ion-view>
    </ion-tab>

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


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值