ionic-CSS：ionic 卡片

Ionic Css样式详解

Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离. 如: 1 <ion-view> <ion-content class="no-header"> <div class="bar bar-header bar-royal"> <a href=&quo…

ionic：ionic 教程

ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CSS 和 Javascript 构建接近原生体验的移动应用程序. ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发. ionic是一个轻量的手机UI库,…

Ionic -- css

Header 固定在头部,可以包含标题标签,可以有左右按钮样式:bar bar-header bar-light 第一个小节第二个表示的是头部第三个表示颜色子头部,需要在ion-content加入bar-subheader 在头部加上has-subheader不然顶部会被遮挡. <div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1> &…

[Ionic] Align and Size Text with Ionic CSS Utilities

The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when styling your application. Instead of writing your own CSS for each component's text alignment we can use the prebuilt ones. Docs Example: <ion-conten…

ionic之$ionicGesture手势（大坑）

鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称网站i)边学ionic边做项目. ionic刚踩过的坑--$ionicGesture!现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助! 网站i对$ionicGesture的介绍如下: 在一个元素上添加一个事件监听器. $ionicGesture.on(eventType, cal…

基于ionic+angulajs的混合开发实现地铁APP

基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于ionic+angularjs开发的一款软件,其中使用了高德地图的开放接口(地铁JS API)网址为:http://lbs.amap.com/api/subway-api/subway-summary/.在该app中主要实现了,地铁线路图的整体展示,起点终点设置…

Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

Angular Chart 简介在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表展示一周搜索引擎抓取变化的需求,因为之前使用过 Chart.js, 所以去查了些资料果然是有既有的模块的. Angular Chart 就是基于 Chart.js 以及 Angular 构件的图标展示组件. Angular Chart 的使用分别下载 Chart.js 和 Angular Chart,下载…

[转]Cordova + Ionic in Visual Studio - 101 Tutorial [Part I]

本文转自:http://binarylies.ghost.io/cordova-ionic-in-visual-studio/ Hi everyone, I thought about lending a hand to all the people that are, as I have been recently, exploring Cordova and all its features for the first time. For the ones still trying to f…

Mobile first! Wijmo 5 + Ionic Framework之：Hello World！

本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World. Ionic是什么? Ionic是一个HTML5框架.免费.开源,用于帮助生成hybird mobile Apps (混合移动应用). Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面更接近原生移动应用 (Native App). AngularJS:Ionic使用AngularJs的扩展指令作为核心框架库,同时AngularJs也加快了开发过程. Apache…

ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多主意事项

首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>菜鸟教程(runoob.com)</t…

简单的apk Ionic

index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>菜鸟教程(runoob.com)</title> <l…

ionic ngcordova camera

拍照是經常用到的,所以記錄一下拍照的代碼... 1. ionic start camera blankcd camera ionic platform add ios 2. 添加插件,這裏很熟悉.... cordova plugin add org.apache.cordova.camera 3. 可以從這裏下載 ngcordova.min.js 或者ngcordova.js 然後添加到www/lib/ionic/js 文件夾下 (不強求....) 4.在index.html 引用ngcord…

Cordova+angularjs+ionic+vs2015开发（四）

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方式来说,自定义标签的可读性更强.Ionic的界面呈现既可以使用静态页面方式呈现,也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定. 使用VS创建一个空白的Ionic项目.项…

VS2015 Cordova Ionic移动开发（四）

一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方式来说,自定义标签的可读性更强.Ionic的界面呈现既可以使用静态页面方式呈现,也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定. 使用VS创建一个空白的Ionic项目.项目中包含一个index.html页面和app.js的脚本.依照惯例修改项目的基本属性后,打开inde…

ionic框架前端生产环境的简单部署

1. 效果对比 1.1 开发环境 css+js+lib文件大小为好多M :) 1.2 部署环境(生产环境) css+js+lib文件大小约为800K 文件大小:好多M–>800K(多少自己试下),文件数目:N多–>4个 2. gulp实现打开项目下的gulpfile.js文件 var gulp = require('gulp'); // 引入gulp组件(插件) var uglify = require('gulp-uglify'); var rename = require('gulp-r…

Wijmo 5 + Ionic Framework之：Hello World！

Wijmo 5 + Ionic Framework之:Hello World! 本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World. Ionic是什么? Ionic是一个HTML5框架.免费.开源,用于帮助生成hybird mobile Apps (混合移动应用). Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面更接近原生移动应用 (Native App). AngularJS:Ionic使用AngularJs…

Ionic Demo 解析

Ionic Demo 解析 index.html 解析 1.引入所需要的类库 <link rel="manifest" href="manifest.json"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"…

一个先进的App框架:使用Ionic创建一个简单的APP

原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framework.html 主题 Ionic Framework 介绍自Hybrid Mobile技术发展以来,Web开发者转到移动开发的人数大大增加了. Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用.完全不用去学习相应的平台语言和使用已经存在的技术. Hybr…

Ionic Js十一：模态

ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title&l…

Ionic Js十：加载动作

$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = fu…