2016年06月_aochou19810706

转载 ionic路由(页面切换)

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。 • 在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置 • 通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为 • 通过嵌套的方式来解决页面中的一些重复出现的部位最简单的形式模板可以通过下面这...

2016-06-25 21:00:00 165

转载 ionic启动App时不使用淡入淡出效果

找到我们项目下面 res下面的config.xml,然后加入下面两句就可以解决。<preference name="FadeSplashScreen" value="false"/> <preference name="ShowSplashScreenSpinner" value="false"/>转载于:https://www.cnbl...

2016-06-24 17:14:00 72

转载 Ionic 自动创建应用的图标与启动画面

你只需要一个目录和两张图片就可以搞定。图片可以是 .png 的，Photoshop的 .psd，或者Illustrator的 .ai，（例如）命名为icon.png和splash.png。把这些图片放到资源目录 ./resources ，ionic resources 命令就会为项目里的每一个平台生成图标和启动页，把他们交给Ionic的缩放剪切服务器，所以你不需要安装扩展依赖。...

2016-06-24 16:16:00 247

转载 Ionic Tabs

Ionic 默认的 Tabs 模板，Android的在上方，IOS的在下方。在www/js/app.js修改配置，添加一个变量，再修改相应属性：.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.sty...

2016-06-22 20:22:00 111

转载 Ionic实战九：ionic视频播放

本模板和以前的方式不同，采用的是 iframe方式引入的视频，如下代码:转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-jiuionic-shi-pin-bo-fang.html...

2016-06-22 18:51:00 158

转载 Ionic实战八：ionic登陆页面源码

onic登陆页面模板源码，可以用于ionic开发中登陆页面制作或者参考下面是此模板的一些页面此模板免费提供给大家登陆用户名和密码都是 phonegap100转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-baionic-deng-lu-ye-mian-yuan-ma.html...

2016-06-22 18:47:00 283

转载 Ionic实战七：Ionic 音乐以及社交页面

Ionic 音乐以及社交页面，可以用于二次开发，也可以用于社交或者音乐app页面模板，但是不足的是图片没法预览。转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-qiIonic-yin-le-yi-ji-she-jiao-ye-mi.html...

2016-06-22 18:46:00 121

转载 Ionic实战六：日期选择控件

onic日期选择控件，用于ionic项目开发中的日期选择以及日期插件转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-liu-ri-qi-xuan-ze-kong-jian.html...

2016-06-22 18:31:00 135

转载 Ionic实战五：ionic图表源码基于highcharts

ionic图表demo基于Highcharts，highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。我们知道Highcharts是基于jquery的，要使用Highcharts的话就必须在ionic中引入jque...

2016-06-22 18:26:00 219

转载 Ionic实战四：ionic 即时通讯_ionic仿雅虎邮箱

此产品是一款Ionic版微博、微信、朋友圈效果（微博、微信、聊天列表、聊天窗口、个人界面、编辑个人信息等）购买后二次开发方便快捷。转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-siionic-ji-shi-tong-xun-mo-banionic.html...

2016-06-22 18:20:00 288

转载 Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

这个demo的主要功能有两个，一个是首页的导航向上拉动会浮动在最上面的效果，另一个就是我们平时非常实用的功能，就是图片预览功能点击可以放大图片，并且可以左右滑动，还可以双击放大缩小图片以及双手指控制图片的大小，有点类似汽车之家的图片预览功能iClub theme主要功能Included ionic pluginsIonic Filter Bar...

2016-06-22 18:12:00 604

转载 Ionic实战二：购物车

用户名密码都为空此app功能主要有如下1.首页轮播和商品列表展示2.左侧侧滑页面分类展示3.商品详情页面展示以及购买4.购物车订单填写支付等页面转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-er-gou-wu-che.html...

2016-06-22 18:08:00 106

转载 Ionic实战一：Ionic仿照微信项目

github下载地址：https://github.com/Frogmarch/ionic-wechat博客学习地址：http://www.cnblogs.com/Frogmarch/Ionic仿照微信项目源码-边开发边学，强烈建议,做ionic之前把angularJS入门过一遍, 还有ui-router, 至少要了解个大概, 不然真做不下去转载于:htt...

2016-06-22 18:04:00 479

转载 Ionic Js二十：选项卡栏操作

ion-tabsion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。用法<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="io...

2016-06-17 17:58:00 105

转载 Ionic Js十九：加载动画

ion-spinnerionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。实例HTML 代码<ion-content scroll="false" class="has-header"> <p> <ion-spinner icon="an...

2016-06-17 17:51:00 94

转载 Ionic Js十八：滑动框

ion-slide-box滑动框是一个包含多页容器的组件，每页滑动或拖动切换：效果图如下：用法<ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLU...

2016-06-17 17:45:00 94

转载 Ionic Js十七：侧栏菜单

一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。效果图如下所示：用法要使用侧栏菜单，添加一个父元素，一个中间内容，和一个或更多指令。<ion-side-menus>  <ion-side-menu-content ng-co...

2016-06-17 17:37:00 109

转载 Ionic Js十六：滚动条

ion-scrollion-scroll 用于创建一个可滚动的容器。<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollba...

2016-06-17 17:26:00 102

转载 Ionic Js十五：对话框

$ionicPopupionic 对话框服务允许程序创建、显示弹出窗口。$ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。实例HTML 代码<body class="padding" ng-controller="PopupCtrl"> <button class="button b...

2016-06-17 17:00:00 85

转载 Ionic Js十四：浮动框

$ionicPopover$ionicPopover 是一个可以浮在app内容上的一个视图框。实例HTML 代码<p><button ng-click="openPopover($event)">打开浮动框</button></p><script id="my-popover.html" type="t...

2016-06-17 16:54:00 97

转载 Ionic Js十三：平台

$ionicPlatform$ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。转载于:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-san-ping-tai.html...

2016-06-17 16:51:00 68

转载 Ionic Js十二：导航ion-nav-view

ion-nav-view当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套，以及合并视图，允许...

2016-06-17 16:38:00 262

转载 Ionic Js十一：模态

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

2016-06-17 12:12:00 132

转载 Ionic Js十：加载动作

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

2016-06-17 11:53:00 91

转载 Ionic Js九：列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。<ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item&gt...

2016-06-17 11:19:00 190

转载 Ionic Js八：头部和底部

1.ion-header-bar这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。<ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="but...

2016-06-17 10:48:00 105

转载 Ionic Js七：手势事件

1.on-hold长按的时间是500毫秒。HTML 代码<button on-hold="onHold()" class="button">长按我！</button>JavaScript 代码angular.module('starter', ['ionic']) .run(function($ionicPlat...

2016-06-17 10:02:00 115

转载 Ionic Js六：切换开关操作

以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。HTML 代码<ion-header-bar class="bar-positive"> <h1 class="title">开关切换</h1></ion-header-bar> <ion-c...

2016-06-16 17:14:00 123

转载 Ionic Js五：单选框操作

实例中，根据选中的不同选项，显示不同的值。HTML 代码<ion-header-bar class="bar-positive"> <h1 class="title">当选按钮</h1></ion-header-bar> <ion-content> <div cl...

2016-06-16 17:10:00 124

转载 Ionic Js四：复选框

ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false ...

2016-06-16 17:04:00 124

转载 Ionic Js三：下拉刷新

在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：HTML 代码<body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-t...

2016-06-16 16:32:00 75

转载 Ionic Js二：背景层

我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。每次调用retain后，背景会一直显示，直到调用release消除背景层。HTML 代码<body ng-app="starter" ng-c...

2016-06-16 16:16:00 78

转载 Ionic Js一：上拉菜单(ActionSheet)

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。HTML 代码<body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> ...

2016-06-16 16:12:00 108

转载 Ionic入门十：icon(图标)

ionic 也默认提供了许多的图标，大概有500多个。用法也非常的简单：<i class="icon ion-star"></i>图标列表如下：转载于:http...

2016-06-16 15:53:00 259

转载 Ionic入门九：颜色

ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。<ul class="list color-list-demo"> <li class="item dark"> light <span class="color-demo light-bg light-border"></span...

2016-06-16 14:43:00 166

转载 Ionic入门八：头部与底部

1.Header(头部)Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。<div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1></d...

2016-06-16 14:37:00 96

转载 Ionic入门七：ionic tab(选项卡)

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。1.基本用法以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。<div class="tabs"> <a class="tab-item">...

2016-06-16 14:02:00 248

转载 Ionic入门六：按钮

1.基本使用按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。默认情况下，按钮显示样式为：display: inline-block。<button class="button"> Default</button><button class="button button-light"> b...

2016-06-16 13:39:00 119

转载 Ionic入门五：表单

一、输入框list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。1.输入框属性：placeholder以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。<div class="list"> <label class="item ...

2016-06-16 13:35:00 217

转载 Ionic入门四：卡片

近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。针对移动端的应用，卡片会根据屏幕大小自适应大小。我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。卡片一般放在页面顶部，当然也可以实现左右切换的功能。1.基本卡片<div class="card"> <div class="item item-text-wra...

2016-06-16 12:29:00 186

空空如也

空空如也