tabswitch
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<!-- add styles -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- add javascripts -->
<!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 -->
<script src="js/angular.min.js"></script>
<!-- <script src="js/angular-animate.min.js"></script> 不需要 -->
<script src="js/angular-touch.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="myController">
<div class="type-tabs">
<div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div>
</div>
<div class="guid-bar">
<div class="guid-bar-content" style="left:{{25*activeIndex}}%"></div>
</div>
<div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">
<div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">
<div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >
<h1 ng-bind="'Tab' + item"></h1>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- http://codepen.io/dayu/pen/dPggXZ/ -->
*{margin:; padding:; border: none; font-family:'Arial';}
.type-tabs{width: 100%; height: 40px;}
.type-tabs div{float: left; width: 25%; line-height: 40px; text-align: center; cursor:pointer; user-select:none; -webkit-user-select:none;}
.guid-bar{position: relative; margin-top: -3px;}
.guid-bar-content{width: 25%; height: 3px; background-color: #345; position: absolute; left: 50%; transition:all 400ms ease;}
.tab-content{width: 100%; height: 500px; background-color: #ccc; overflow: hidden;}
.tab-content-inner{width: 400%; position: relative; transition: all 400ms;}
.tab-content-item{width: 25%; float: left; text-align:center;}
var myApp = angular.module('myApp', ['ngTouch']); //'ngAnimate', myApp.controller('myController', function ($scope) {
$scope.activeIndex=0;
$scope.changeIndex=function(index){
$scope.activeIndex=index;
};
$scope.swipeLeft=function(){
$scope.activeIndex=++$scope.activeIndex;
$scope.check();
};
$scope.swipeRight=function(){
$scope.activeIndex=--$scope.activeIndex;
$scope.check();
};
$scope.check=function(){
if($scope.activeIndex>3){
$scope.activeIndex=0;
}
if($scope.activeIndex<0){
$scope.activeIndex=3;
}
}
});
tabswitch的更多相关文章
- tab-switch 样式的添加 与 tab元素样式的切换
要点: 1.多个div类名相同情况下添加class样式 2.siblings() 方法返回被选元素的所有同级元素.DOM 树:该方法沿着 DOM 元素的同级元素向前和向后遍历. 3.利用索引,只添加当 ...
- 【IDEA】intellij idea 插件推荐
CSDN 2016博客之星评选结果公布 [系列直播]零基础学习微信小程序! "我的2016"主题征文活动 博客的神秘功能 [IDEA]intellij idea ...
- IDEA插件
Key Promoter 快捷键提示插件,帮助你快速记住快捷键.当你用鼠标完成某功能时,它会指示有相应的快捷键来完成刚才的功能,同时指导你为经常重复的操作建立快捷键. SerialVersionUID ...
- 面向对象和面向过程的js版选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- this指向
以前不太理解面向对象的this指向问题,今天自己看着视频教程,加自己学了2个例子,终于明白点了. 我们在写对象程序的时候,我们希望保持this始终是指向对象的,但事实确常常事与愿违. 正常情况this ...
- JavaScript特效(调试笔记)
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- js面向对象选项卡
window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...
- 【读书笔记】读《JavaScript设计模式》之观察者模式
一.定义 在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式(又名发布者-订阅者(publisher-subscripber)模式)是一种管理人与其任务之间的关系(确切地讲,是对象 ...
随机推荐
- 【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)
2.3 自动适配与布局(Adaptivity and Layout) 2.3.1 开发成自动适配(Build In Adaptivity) 用户通常希望在自己的所有设备,各种场景中使用他们喜欢的a ...
- PHP中的MVC
在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...
- Ruby on Rails创始人DHH谈如何进行混合移动APP开发
混合型APP兼具原生型APP软件良好用户交互体验的优势和网页型APP软件跨平台开发的优势,并且其开发成本和网页型APP软件接近,其开发效率也远高于原生型APP软件.混合型APP已经被众多企业所认可.最 ...
- 把消息送到默认窗口函数里,并非一点用都没有,可能会产生新的消息(以WM_WINDOWPOSCHANGED为例)
我在追踪执行: procedure TForm1.Button1Click(Sender: TObject); begin panel1.Left:=panel1.Left-; end; 并且屏蔽TW ...
- BZOJ1044: [HAOI2008]木棍分割
1044: [HAOI2008]木棍分割 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1580 Solved: 567[Submit][Statu ...
- -_-#【Mac】MacVim
MacVim安装与配置 Mac开发利器之程序员编辑器MacVim学习总结 Git时代的VIM不完全使用教程 zencoding-vim This repository has moved to htt ...
- JavaBean的boolean isXXX反序列化问题
JavaBean规范中规定boolean的getter/setter 为isXXX/setXXX,包装类Boolean的getter/setter 为getXXX/setXXX,其中XXX为变量名(I ...
- 关于DPM(Deformable Part Model)算法中模型结构的解释
关于可变部件模型的描写叙述在作者[2010 PAMI]Object Detection with Discriminatively Trained Part Based Models的论文中已经有说明 ...
- [转] Linux中gcc,g++常用编译选项
http://blog.sina.com.cn/s/blog_5ff2a8a201011ro8.html gcc/g++ 在执行编译时,需要4步 1.预处理,生成.i的文件[使用-E参数] 2.将预处 ...
- Mysql update error: Error Code: 1175. You are using safe update mode and you tried to update a table
Mysql update error: Error Code: 1175. You are using safe update mode and you tried to update a table ...