ionic tabs-top
类似QQ软件中,首页面消息和通话的两个按钮来回切换各自的内容,还是很常见的功能。
(.bar-subheader是为了防止内容部分隐藏在header下)
<ion-view title="消息通知" class="view-tabs-top">
<div class="tabs tabs-top tabs-virtual bar-subheader">
<a href class="tab-item disable-user-behavior"
ng-class="{active: active_content=='orders'}"
ng-click="setActiveContent('orders')"
style="border: 2px solid #2495FB; border-right: 0px;">
设备消息
</a>
<a href class="tab-item disable-user-behavior"
ng-class="{active: active_content=='deliveries'}"
ng-click="setActiveContent('deliveries')"
style="border: 2px solid #2495FB">
系统消息
</a>
</div>
<ion-content class="has-subheader" padding="true" ng-show="active_content=='orders'"> 设备消息</ion-content>
<ion-content class="has-subheader" padding="true" ng-show="active_content=='deliveries'"> 系统消息</ion-content>
</ion-view>
在控制器中使用:
$scope.active_content = 'orders';
$scope.setActiveContent = function (active_content) {
$scope.active_content = active_content;
};
这样这个效果就可以实现啦~
ionic tabs-top的更多相关文章
- Ionic Tabs
Ionic 默认的 Tabs 模板 ,Android的在上方,IOS的在下方.在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($statePro ...
- Ionic Tabs使用
1. 创建Tabs相关页面 ionic g page tabs ionic g page TabOne ionic g page TabTwo ionic g page TabThree 2. 在ta ...
- ionic tabs置顶
找了好久怎么解决这问题,终于找到了一哥们留下来的经验,万分感谢,特此拷贝过来,留着下次以免忘记 我在主页ion-nav-bar元素上添加hide-nav-bar=“true”;然后又在ion-view ...
- [转]Ionic系列——CodePen上的优秀Ionic_Demo
本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides ...
- ionic项目相关的操作命令
更新npmD:\Program Files\npm-3.9.0\npmnode cli.js install npm -gf vs安装 更新node.js windows版直接从官网下载安装包 n ...
- Cordova+angularjs+ionic+vs2015开发(五)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...
- ionic(一) build你的第一个android apk
1.ionic start myApp tabs >>创建一个app 2.cd myApp >>进入myApp文件 3.ionic platform add andro ...
- VS2015 Cordova Ionic移动开发(五)
一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...
- Ionic命令大全
start [options] <PATH> [template] ............. Starts a new Ionic project in the specified P ...
- 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower
更新框架: meteor update meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova ...
随机推荐
- ASP.NET MVC- 解决HTML转码
在MVC里从Controller发送一段带有HTML的文字到View视图时,MVC是会将这段代码进行转码的. 一.使用MvcHtmlString转HTML转码 如果想不让这段文字进行转码,以HTML的 ...
- stl map高效遍历删除的方法 [转]
for(:iter!=mapStudent.end():) { if((iter->second)>=aa) { //满足删除条件,删除当前结点,并指 ...
- new 运算符
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new
- 学习JQuery中文文档之index()函数
最初认识index()是在轮播图中,获取当前点击对象在数组中的位置.那时候,对index()的使用只有eq($(this).index()),看了文档之后,才知道自己有多幼稚! <!DOCTYP ...
- 在ASP.NET MVC中使用MySQL【并使用membership】
大多数情况下我们使用.NET或ASP.NET(包括MVC)程序时,我们会同时选择SQL Server 或者SQL Express (其他微软产品)做数据库.但是今天使用MVC已经完全没 ...
- 【转】Fresco之强大之余的痛楚
http://www.jianshu.com/p/5364957dcf49 开始之前 如果你有使用的心得,技巧,踩坑经历,希望贡献出来,我会在TODO中慢慢添加(^^)/ 关于Fresco Fresc ...
- CORTEX -M3 : Registers in depth
http://www.zembedded.com/cortex-m3-registers-in-depth/ Thanks for the overwhelm response you show in ...
- IOS学习经验总结--来自知乎网友
转自知乎:http://www.zhihu.com/question/20016551 我当时刚学iOS开发的时候一样的感觉 总想知道原理 内部怎么回事 感觉在像在雾里但是iOS开发就是这样 他是封闭 ...
- 已解决】Sublime中运行带input或raw_input的Python代码出错:EOFError: EOF when reading a line(转)
[问题] 在折腾: [已解决]Sublime Text 2中运行Python程序出错:The system cannot find the file specified 的过程中,虽然解决了找不到py ...
- 如何在Fedora或CentOS上使用Samba共享
如今,无论在家里或者是办公场所,不同的电脑之间共享文件夹已不是什么新鲜事了.在这种趋势下,现代操作系统通过网络文件系统的方式使得电脑间数据的交换变得简单而透明.如果您工作的环境中既有微软的Window ...