ionic入门贴：ionic的引入以及创建一个典型的mobile页面

最新推荐文章于 2024-09-16 07:20:48 发布

原创最新推荐文章于 2024-09-16 07:20:48 发布 · 5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic入门贴 #ion-header-bar #ion-footer-bar #ion-content

ionic 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用ionicframework构建一个典型的mobile页面，包括引入ionic库，创建包含header、content和footer的布局。通过创建自定义angular模块并继承ionic，结合<ion-content class='has-header'>、<ion-header-bar>和<ion-footer-bar>，实现页面结构。参考ionic官方文档和资源，解决库的引入问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的hybrid app使用了ionicframework作为UI框架，基于ionic开发我们自己业务相关的控件。

ionic下载地址：http://code.ionicframework.com/

ionic图标库：http://ionicons.com/

ionic文档：http://ionicframework.com/docs/

在页面引入ionic库的js和css文件就可以使用了，如果引入遇到问题，可以看下这篇文章，也许会帮上你。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
		<script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<head>
</html>

下面我们来创建一个典型的页面：包含header、content和footer的页面。

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="jquery-1.11.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
    <script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<script>
	$(function(){
		// 创建angular模块,必需要继承ionic模块,才能使用ionic的特性
		var ourModule = angular.module('testApp', ['ionic']);
		ourModule.controller('MyController', function($scope, $ionicPopover) {
		
		});
		
		// 启动angularjs模块
		angular.bootstrap($("#body"), ["testApp"]);
	});
	</script>
  </head>
  <body id="body" ng-controller="MyController">
  
	<!--页面header-->
	<div class="bar bar-header bar-positive">
		<a class="button button-icon icon ion-android-more-vertical"></a>
		<h1 class="title">bar-positive</h1>
		<a class="button button-icon icon ion-more"></a>
	</div>
	
	<!--页面content,注意:一定要设置has-header,否则content会被header遮挡-->
	<ion-content class="has-header" style="background-color: #ebebeb;">
			<button>left Popover1</button>
			<button>left Popover2</button>
			<button>right Popover1</button>
			<button>right Popover2</button>	
	</ion-content>

	
	<!--footer-->
	<div class="bar bar-footer bar-balanced">
		<div class="title">Footer</div>
	</div>
  </body>
</html>

有2点需要说明下：

1.创建我们自己的angular模块，必须要继承ionic，否则无法使用<ion-content>等。

2.<ion-content>元素的class属性一定要加上has-header，否则content会被header遮挡。

我们也可以使用<ion-header-bar>和<ion-footer-bar>创建header和footer。

<ion-header-bar class="bar-positive">
	<a class="button button-icon icon ion-more" id="left"></a>
	<h1 class="title">bar-positive</h1>
	<a class="button button-icon icon ion-more" id="right"></a>
</ion-header-bar>

<ion-content class="has-header" style="background-color: #ebebeb;">
	<button ng-click="openPopoverUseEvent($event)">left Popover1</button>
	<button ng-click="openPopoverUseElement('left')">left Popover2</button>
	<button ng-click="openPopoverUseEvent($event)">right Popover1</button>
	<button ng-click="openPopoverUseElement('right')">right Popover2</button>
</ion-content>

<ion-footer-bar class="bar-balanced">
	<div class="title">Footer</div>
</ion-footer-bar>