angularjs 选项卡tab切换(移动端用户订单状态)
<!--头部导航tabs切换-->
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs buy_nav buy_list_nav">
<ul>
<li class="tab-item buy_color activated" toggle-class="activated" ng-click="changeStatus2(0)"><a href="javascript:void(0)">全部</a></li>
<li class="tab-item buy_color" toggle-class="activated" ng-click="changeStatus2(1)"><a href="javascript:void(0)">待付款</a></li>
<li class="tab-item buy_color" toggle-class="activated" ng-click="changeStatus2(2)"><a href="javascript:void(0)">待发货</a></li>
</ul>
</div>
</div>
</div>
<!--主要内容分三部分选择-->
<div class="list buy_list_con" ng-show="buyall" >
...
</div>
<div class="list buy_list_mine" ng-show="buymine">
...
</div>
<div class="list buy_list_return" ng-show="buyreturn">
...
</div>
<!--以下是该页面控制器-->
.controller('buy_listCtrl',function($scope) {
$scope.buyall = true;
$scope.changeStatus2=function (status) {
// console.log(status);
if(status==0){
$scope.buyall = true;
$scope.buymine = false;
$scope.buyreturn = false;
}else if(status==1){
$scope.buymine = true;
$scope.buyall = false;
$scope.buyreturn = false;
}else if(status==2){
$scope.buyreturn = true;
$scope.buyall = false;
$scope.buymine = false;
}
}
})
<!--在控制器加入指令-->
.directive('toggleClass', function(){
return {
restrict: 'A',
scope: {
toggleClass: '@'
},
link: function(scope, element,attrs){
element.on('click', function(){
element.parent().children().removeClass(scope.toggleClass);
element.addClass(scope.toggleClass);
});
}
};
})
angularjs 选项卡tab切换(移动端用户订单状态)的更多相关文章
- 选项卡 tab切换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容
作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- Angularjs跳转切换至对应选项卡
//跳转前页面 <div class="list user_order" ng-click="userOpen('userOrder',0)"> & ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 小程序之 tab切换(选项卡)
好久没有写东西了 今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...
- vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...
随机推荐
- Ubuntu ADSL拨号上网
一直在家用接ADSL的无线wifi上网,最近用了很久的NetGear无线路由器被我毁了,只好暂时用有线了.在Ubuntu Linux下也可直接使用ADSL拨号上网. 1.连接设备 这没什么可多说的,一 ...
- 解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
- JAVA项目省市县加载兼容浏览器异常
最近同僚遇到个在IE8及IE8以下浏览器上出现地址加载问题,初始加载没问题,问题出在事件上. 先来一段初始加载地址的代码:(也可以修改或者增加第二个事件地址) var select1 = new Li ...
- JSON总结-持续更新补充
基本的json格式 { "name": "jobs", "boolean": true, "age": null, &q ...
- OpenResty知识汇集
OpenResty目录详解: nginx_lua_module执行顺序:
- JAVA程序员成长历程(一)
程序员的20个常见瓶颈 在扩展性的艺术一书中,Russell给出了20个有意思的估计:大约有20个经典瓶颈. Russell说,如果在他年轻时他就知道这些瓶颈该有多好!这些论断包括: * Databa ...
- jenkins构建后操作添加“Publish to Subversion repository”与Eclipse更新提交SVN文件冲突
jenkins配置环境信息: 1.安装“SVN Publisher plugin”插件: 2.在系统管理-系统设置中“Global SVN Publisher Settings” 填写信息:
- 跨域,json与jsonp格式
好久都没有写随笔了,最近大家都忙着考试要放假了,我也要忙一忙喽.....不过再忙我还是来啦 简单的说,json是一种轻量级的数据交换格式.平时我们使用ajax等使用的一种数据形式,那么今天就说说jso ...
- 使用Gulp实现前端构建自动化
使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> ...
- Linux网络配置及相关命令
Linux的网络配置是曾一直是我学习Linux的埋骨之地,投入了大量的精力和心神让自己的虚拟机联网.后来发现,仅仅是一个大意,我在这个坑上一躺就是一年半.现在总结一下这个伤心地.希望对有帮助. VMw ...