Ionic默认的Tabs模板使用实例
Ionic 默认的Tabs 模板 ,Android的在上方,IOS的在下方。在www/js/app.js修改配置,添加一个变量,再修改相应属性:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $ionicConfigProvider.platform.android.tabs.style('standard'); $ionicConfigProvider.platform.android.tabs.position('bottom'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); $ionicConfigProvider.platform.android.navBar.alignTitle('left'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left'); $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); $ionicConfigProvider.platform.ios.views.transition('ios'); $ionicConfigProvider.platform.android.views.transition('android');
然后再在Android平台上调试 Tabs就在下面了 并且别的组件工作也正常
特别注意
Cordova的配置一定要正确 尤其是Android ADT
Visual Studio 默认是不配置的
具体参考这篇文章
代码如下:
').addClass('pre-numbering').hide(); \((this).addClass('has-numbering').parent().append(\)numbering); for (i = 1; i <= lines; i++) { \(numbering.append(\)('
').text(i)); }; $numbering.fadeIn(1700); }); });
以上就介绍了Ionic Tabs,包括了ionic,tabs方面的内容,希望对IOS开发有兴趣的朋友有所帮助。
相关推荐
-
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io
-
ionic隐藏tabs的方法
本文为大家分享了ionic隐藏tabs的方法,供大家参考,具体内容如下 1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive: var module = angular.module('app.directives', []); module.directive('showTabs', fu
-
ionic组件ion-tabs选项卡切换效果实例
介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板--> <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="
-
ionic中列表项增加和删除的实现方法
在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m
-
使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f
-
如何解决IONIC页面底部被遮住无法向上滚动问题
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择. ionic 特点 1.ionic 基于Angular语法,简单易学.[3] 2.ionic 是一个轻量级框架. 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代
-
Ionic默认的Tabs模板使用实例
Ionic 默认的Tabs 模板 ,Android的在上方,IOS的在下方.在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.pos
-
Pycharm新建模板默认添加个人信息的实例
在pycharm使用过程中,对于每次新建的python文件的时候,关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings 2.Editor –> File and Code Templates –> Python Script 3.填写个人信息 #!/usr/bin/env python #-*- coding:utf-8 -*- # author:${USER} # datetime:${DATE} ${TIME}
-
SpringMVC中使用Thymeleaf模板引擎实例代码
本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖 <!-- thymeleaf-spring4 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa
-
Django视图层与模板层实例详解
目录 theme: channing-cyan 网页伪静态 视图层 1.视图函数的返回值问题 2.视图函数返回json格式数据 3.form表单携带文件数据 4.FBV与CBV 5.CBV源码分析 模板层 1.模板语法传值 2.模板语法传值的范围 3.模板语法值过滤器 4.模板语法标签(类似于python中的流程控制) 5.自定义标签函数.过滤器.inclusion_tag 6.模板的继承 7.模板的导入 theme: channing-cyan 网页伪静态 将动态网页伪装成静态网页,可以提升网
-
Java默认传入时间段时间的实例
实例如下: SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Date date = new Date(); String nowDate = sdf.format(date); Calendar c = Calendar.getInstance(); c.add(Calendar.MONTH, 0); c.set(Calendar.DAY_OF_MONTH,1);//设置为1号,当前日期既为本月第一天 String
-
jQuery EasyUI Layout实现tabs标签的实例
jQuery EasyUI Layout实现tabs标签的实例 一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!D
-
ionic2 tabs 图标自定义实例
一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下.并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下.下来我们去修改wecare.scss文件. 修改@font-face中的引用地址. $font-pa
-
详解Spring data 定义默认时间与日期的实例
详解Spring data 定义默认时间与日期的实例 前言: 需求是这样的: 1. 创建时间与更新时间只能由数据库产生,不允许在实体类中产生,因为每个节点的时间/时区不一定一直.另外防止人为插入自定义时间时间. 2. 插入记录的时候创建默认时间,创建时间不能为空,时间一旦插入不允许日后在实体类中修改. 3. 记录创建后更新日志字段为默认为 null 表示该记录没有被修改过.一旦数据被修改,修改日期字段将记录下最后的修改时间. 4. 甚至你可以通过触发器实现一个history 表,用来记录数据的历
-
Android开发之Android.mk模板的实例详解
Android开发之Android.mk模板的实例详解 关于Android NDK开发的文章已经比较多了,我的博客中也分享了很多NDK开发相关经验和技巧,今天简单写了一个 Android.mk 的示例模板,供初学者参考. 本模板主要给大家示例 Android NDK 开发中的如下几个问题: 1. 如何自动添加需要编译的源文件列表 2. 如何添加第三方静态库.动态库的依赖 3. 如何构造一个完整的NDK工程框架 假设我们的项目依赖 libmath.a, libjson.a, libffmp
-
使用Maven Archetype插件构建Maven工程原型模板的实例
创建原型模板 1.在空目录运行archetype:generate上面的命令,待下载完必要的jar包后,首先需要输入内置的原型编号: Choose archetype: 1: internal -> org.apache.maven.archetypes:maven-archetype-archetype (An archetype which contains a sample archetype.) 2: internal -> org.apache.maven.archetypes:ma
随机推荐
- 详解Vue.js基于$.ajax获取数据并与组件的data绑定
- vue-router 学习快速入门
- js改变css样式的三种方法推荐
- 华为学习文档资料
- BAT批处理实现Fibonacci函数
- 详解SpringMVC验证框架Validation特殊用法
- Python tkinter模块弹出窗口及传值回到主窗口操作详解
- php操作xml并将其插入数据库的实现方法
- 利用PHP生成CSV文件简单示例
- C++ 成员变量的初始化顺序问题详解
- 两种简单的跨域方法(jsonp、php)
- PHP 中文乱码解决办法总结分析
- Linux下日志按日分割的shell
- jQuery查找节点方法完整实例
- 原JS实现banner图的常用功能
- java 遍历MAP的几种方法示例代码
- Tomcat 7通过设置不同的端口部署两个项目
- Nginx 的多站点配置方案
- Android异步下载图片并且缓存图片到本地DEMO详解
- 使用 C# 动态编译代码和执行的代码