Angularjs实现mvvm式的选项卡示例代码


Posted in Javascript onSeptember 08, 2016

在实现Angularjs实现mvvm式的选项卡之前,先搬出我们常用的jquery实现。

1、jquery实现简单粗暴的选项卡效果

var nav = $(".tabs");//tab切换
var box = $(".box");//容器
nav.on("click", function(){ //点击事件
 var this_index=$(this).index();
 $(this).addClass("active").siblings().removeClass("active");
 box.eq(this_index).show().siblings().hide();
});

在这里只给出js核心部分,html和css不做赘述。

以上代码,简单粗暴的实现了选项卡效果,用点击事件获得elem.index() , 把索引和容器串起来控制显示隐藏。

2、angularjs实现一个简单选项卡效果

Html部分

<section ng-app="myApp">
  <div class="tabs tabs-style" ng-controller="TabController as tab">
   <nav>
   <ul>
    <li ng-class="{'current':tab.isSet(1)}">
    <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
    <li ng-class="{'current':tab.isSet(2)}">
    <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
    <li ng-class="{'current':tab.isSet(3)}">
    <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
    <li ng-class="{'current':tab.isSet(4)}">
    <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
    <li ng-class="{'current':tab.isSet(5)}">
    <a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li>
   </ul>
   </nav>
   <div class="content">
   <section id="section-1" ng-show="tab.isSet(1)">
    <p>1</p>
   </section>
   <section id="section-2" ng-show="tab.isSet(2)">
    <p>2</p>
   </section>
   <section id="section-3" ng-show="tab.isSet(3)">
    <p>3</p>
   </section>
   <section id="section-4" ng-show="tab.isSet(4)">
    <p>4</p>
   </section>
   <section id="section-5" ng-show="tab.isSet(5)">
    <p>5</p>
   </section>
   </div>
  </div>
 </section>

css 部分(这里为了方便我们使用Less语法,童鞋们可以自定义css实现个性效果)

* {
 margin: 0;
 padding: 0;
}

body {
 background: #e7ecea;
 font-weight: 600;
 font-family: 'Raleway', Arial, sans-serif;
 text-align: center;
}

a {
 color: #2CC185;
 text-decoration: none;
 outline: none;

 &:hover {
 color: #74777b;
 }
}

.tabs {
 position: relative;
 width: 100%;
 margin: 30px auto 0 auto;

 nav {
 ul {
  position: relative;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  list-style: none;
  flex-flow: row wrap;
  justify-content: center;

  li {
   flex: 1;

   &.current a {
   color: #74777b;
   }
  }
  }
 } 
 a {
  display: block;
  position: relative;
  overflow : hidden;
  line-height: 2.5;

  span {
  vertical-align: middle;
  font-size: 1.5em;
  }
 }
}

.content {
 position: relative; 

 section {
 /* display: none; */
 margin: 0 auto;
 max-width: 1200px;

 &.content-current {
  /* display: block; */
 }

 p {
  color: rgba(40,44,42, 0.4);
  margin: 0;
  padding: 1.75em 0;
  font-weight: 900;
  font-size: 5em;
  line-height: 1;
 }
 }
}

.tabs-style {
 nav {
 /* background: rgba(255,255,255,0.4); */

 ul li {
  a {
  overflow: visible; 
  border-bottom: 1px solid rgba(0,0,0,0.2);
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  }
 }

 ul li.current a{
  &:after, &:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: solid transparent;
  }
  &:after {
  margin-left: -10px;
  border-width: 10px;
  border-top-color: #e7ecea;
  }
  &:before {
  margin-left: -11px;
  border-width: 11px;
  border-top-color: rgba(0,0,0,0.2);
  }
 }
 }
}

js部分

angular.module('myApp', [])
 .controller('TabController', function() {
 this.current = 1;

 this.setCurrent = function (tab) {
 this.current = tab;
 };

 this.isSet = function(tab) {
 return this.current == tab;
 };
});

最后效果如下图所示:

Angularjs实现mvvm式的选项卡示例代码

通过以上代码,我们可以发现实现的核心是angularjs内置的ng-classng-clickng-show指令。

通俗来讲:controller里定义了current 这条数据默认值为1,ng-click给点击事件自定义函数,改变current数据,ng-class通过获得current的值绑定条件,给当前选中的索引添加current样式,容器同样获得controller里的current数据通过ng-show控制显示隐藏。

3、angularjs实现一个稍微复杂的移动端选项卡效果

html部分

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js"></script>
//angularjs的一个移动端touch事件库

<div ng-app='myApp' 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]" >
   <br /><br /><br /><br />
   <h1>Tab{{item}}
   </h1></div>
  </div>
 </div>
</div>

css部分

*{
 padding:0;
 margin:0;
 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;
}

js部分

var myApp=angular.module('myApp',['ngTouch']);
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;
 }
})

效果如下:

Angularjs实现mvvm式的选项卡示例代码

好了,今天我们就给出这两个例子,对angularjs了解过的童鞋,直接看代码应该可以很快看懂。没了解过的童鞋,也能通过这两个例子,了解到mvvm的黑魔法,以及它的代码组织结构。

4、angularjs的mvvm模式比jquery的dom操作好在哪里?

1、从宏观上来说,一种是操作数据处理数据,一种是操作dom和ui交互。

一般网页项目的流程可以总结为三个流程:1) 你要获取界面上的数据 2)后台交换数据3)获取数据后,对界面重新进行渲染。这个过程中,你和后台数据交换怎么实现?jquery的ajax吧,如果数据交换的API假设20多个,那么$.get或者$.ajax你要写多少个才能全部包含进去?而且所有API链接都不在一个地方,管理起来相当麻烦。而angularjs只要配置一下route就行了。
获取了数据后,你又如何管理这些数据,如何把数据渲染到界面上去?

如何管理各种事件?jquery本身特性,也就是事件触发,很多时候,就是你在编写 触发事件->处理数据 的流程。很显然,功能一多,代码就会和面条一样,交织在一起了。身边不乏两三年的传统jquery前端,事件委托、dom操作、浏览器渲染过程、插件组件封装等等都没有去深入研究,可想而知代码质量有多烂。事实上jquery是一个类库,并不是一个开发框架,jq是对js原生api的进一步封装,让你更加愉快的进行dom操作、动画操作以及ajax,正是因为他太过灵活,所以更容易写出难以维护的代码。

2、性能方面:DOM操作慢,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。

总结

随着web产品越来越复杂,分层架构是必不可少的,因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器。博主坚信,mvvm会是前端的终极解决方案。由DOM操作到数据操作需要一个过程去适应,但只要结果是好的,这些付出就都值得。在这个过程中,也是对你专业能力的一种提升。加油小伙伴们!!!

Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript基于用户照片姓名生成海报
May 29 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 #Javascript
jQuery事件绑定用法详解
Sep 08 #Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 #Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 #Javascript
JS输出空格的简单实现方法
Sep 08 #Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 #Javascript
You might like
php获取汉字首字母的函数
2013/11/07 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP自定义错误用法示例
2016/09/28 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript如何写热点图
2015/12/08 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
高级工程师岗位职责
2013/12/15 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
文秘应届生求职信
2014/07/05 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
新年寄语2016
2015/08/17 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS