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中关于new Object时传参的一些细节分析
Mar 13 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python flask实现分页的示例代码
2018/08/02 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Python descriptor(描述符)的实现
2020/11/15 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
党支部对照检查材料
2014/08/25 职场文书
向女朋友道歉的话
2015/01/20 职场文书
工程部岗位职责
2015/02/10 职场文书
工会积极分子个人总结
2015/03/03 职场文书
闪闪红星观后感
2015/06/08 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL