<!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 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>