//引进包
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/>
<script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
<title>头部和底部</title>
<script type="text/javascript">
var app=angular.module("myApp",["ionic"]);
</script>
</head>
<body ng-app="myApp">
//align-title="center" ios默认居中 安卓居左
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
</body>
</html>
//需要加图片
//相当于安卓中的轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/>
<script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
<title>滑动</title>
<script>
var app=angular.module("myApp",["ionic"]);
</script>
<style type="text/css">
.box img{
width: 100%;
height: 100%;
}
.box button{
position: fixed;
left: 120px;
top: 180px;
}
</style>
</head>
<body ng-app="myApp">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box">
<img src="img/bottom2.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box">
<img src="img/bottom3.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box">
<img src="img/bottom4.png">
<button class="button button-assertive">进入>></button>
</div>
</ion-slide>
</ion-slide-box>
</body>
</html>
//选择 相当于Fragment
//需要建一个文件夹 在里面写favorites.html home.html setting.html
//favorites.html 这里面写
<ion-nav-view>
<ion-content>
首页页面
</ion-content>
</ion-nav-view>
////
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/>
<script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
<title>选择相当于Fragment</title>
<script>
var app=angular.module("myApp",["ionic"]);
//选择项的路由 相当于Fragment $stateProvider状态页面
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("home",{
url:"/home",
templateUrl:"pages/home.html"//建的文件夹里面页面的路径
}).state("sc",{
url:"/sc",
templateUrl:"pages/favorites.html"
}).state("search",{
url:"/search",
templateUrl:"pages/setting.html"
})
//默认指定页面
$urlRouterProvider.otherwise("home");
});
</script>
</head>
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
<div class="tabs tabs-icon-top">
//ui-serf="home" 和 href="#/home" 一样
<a class="tab-item" href="#/home">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item" href="#/sc">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#/search">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
</body>
</html>
//上拉刷新
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/><link>
<script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
<title>简单使用 上拉刷新</title>
<script type="text/javascript">
var app=angular.module("myApp",["ionic"]);
app.controller("myCtrl",function($scope,$http){
$scope.items=[
{
name:"aaaaa"
},
{
name:"sdfs"
},
{
name:"sdfdsf"
},
];
$scope.doRefresh=function(){
$http.get("http://localhost:63342/Htmlproject/ionic/item.json")
.success(function(data,status){
$scope.items=data;
}).error(function(data,status){
}).finally(function(){ //立即停止刷新
$scope.$broadcast('scroll.refreshComplete');
})
}
});
</script>
</head>
<body ng-app="myApp">
<ion-pane ng-controller="myCtrl">
<ion-content >
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
//侧滑
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/>
<script src="ionic-v1.3.3/js/ionic.bundle.js" type="text/javascript"></script>
<title></title>
<script>
var app=angular.module("myApp",["ionic"]);
app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
</head>
<body ng-controller="myCtrl">
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-positive" align-title="center">
<button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
<h1 class="title">中间</h1>
</ion-header-bar>
<ion-content class="has-header">
这是“中间”页面HTML内容
</ion-content>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">左侧</h1>
<button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button>
</ion-header-bar>
<ion-content class="has-header">
这是“侧边栏”页面HTML内容
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
扫一扫
1210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
