<!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>
<!--<!–明亮的–>-->
<!--<div class="bar bar-header bar-light">-->
<!--<h1 class="title">新闻时间</h1>-->
<!--</div>-->
<!--<!–蓝色–>-->
<!--<div class="bar bar-header bar-positive">-->
<!--<h1 class="title">bar-positive</h1>-->
<!--</div>-->
<!--<!–天蓝色–>-->
<!--<div class="bar bar-header bar-calm">-->
<!--<h1 class="title">bar-calm</h1>-->
<!--</div>-->
<!--<!–绿色–>-->
<!--<div class="bar bar-header bar-balanced">-->
<!--<h1 class="title">bar-balanced</h1>-->
<!--</div>-->
<!--<!–橙黄色–>-->
<!--<div class="bar bar-header bar-energized">-->
<!--<h1 class="title">bar-energized</h1>-->
<!--</div>-->
<!--<!–红色–>-->
<!--<div class="bar bar-header bar-assertive">-->
<!--<h1 class="title">bar-assertive</h1>-->
<!--</div>-->
<!--<!–紫色–>-->
<!--<div class="bar bar-header bar-royal">-->
<!--<h1 class="title">bar-royal</h1>-->
<!--</div>-->
<!--<!–黑色–>-->
<!--<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>
