tab

<!DOCTYPE html>
<html ng-App="jun">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <link rel="stylesheet" type="text/css" href="lib/css/ionic.css"/>
        <script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/js/angular-ui/angular-ui-router.js"></script>
        <script type="text/javascript">
            angular.module("jun",["ionic","ui.router"])
            .config(["$stateProvider",function($stateProvider){
                $stateProvider.state("aa.mp3",{
                    url:"music.html"
//                    template:"<div>模块内容………………</div>"
                })
            }])
            .controller("RootCtrl",function($scope){})
            .controller("dataCtrl",function($scope){
                $scope
                .newsDatas=[{
                            img: "timg.jpg",
                            "title": "解析网站该如何做好搜索引擎结果缩略图优化",
                            "content": "搜狗PC端缩略图尺寸为:120*80px,比例为:100:67;移动端尺寸为:160*160px PC...在一些小尺寸的笔记本或者移动设备上阅读可能整屏就只看到了这张图片,相信大家"
                        },
                        {
                            img: "timg.jpg",
                            "title": "组图:吴君如率《妖妖铃》主创墨镜凹造型 与陈可辛亲密互动_高清.",
                            "content": "新浪图片-有温度的视觉 娱乐图片 娱乐首页 新浪首页 登录 请稍候,评论加载中"
                }]
                $scope.musicDatas= [{
                        "singer": "张杰",
                        "sing": "伤心太平洋",
                        url: "#/aa.mp3"
                }]
            })
        </script>
    </head>
    <body ng-controller="RootCtrl">
        <ion-tabs class="tabs-icon-only tabs-positive">
            <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <ion-header-bar class="bar-positive">
                    <button class="button button-clear" ng-click="newTask()">
                        切换左右菜单
                    </button>
                    <h1 class="title">
                        新闻列表
                    </h1>
                </ion-header-bar>
                <ion-content has-tabs="true" on-refresh="onRefresh()" style="margin: 10px;">
                    <ion-list ng-controller="dataCtrl">
                        <ion-item class="item-thumbnail-left" ng-repeat="d in newsDatas">
                            <img src="img/timg.jpg" width="160px"/>
                            <h2>{{d.title}}</h2>
                            <p>{{d.content}}</p>
                        </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 badge-positive">
                    <h1 class="title">
                        音乐列表
                    </h1>    
                </header>
                <ion-content has-header="true" has-tabs="true">
                    <br /><br />
                    <ion-list ng-controller="dataCtrl" class="item-thumbnail-left">
                        <ion-item ng-repeat="d in musicDatas">
                            <h2>{{d.sing}}</h2>
                            <p>{{d.singer}}</p>
                            <a href={{d.url}}>播放</a>
                        </ion-item>                        
                    </ion-list>
                    <div ui-view></div>
                </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 bar-positive">
                    <h1>
                        个人信息
                    </h1>    
                </header>
                <ion-content has-tabs="true">
                    <h1>
                        个人信息
                    </h1>
                </ion-content>
            </ion-tab>    
        </ion-tabs>
    </body>

</html>

------------------------------------------------------------------------------------------------------

music

------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <audio controls="controls" autoplay>
            <source src="music/yinyue.mp3"></source>
            <source src="music/yinyue.ogg"></source>
        </audio>
    </body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值