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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
vue中destroyed方法的使用说明
Jul 21 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修正代码
2011/05/09 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python如何根据时间序列数据作图
2020/05/12 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python实现二分查找算法
2020/09/18 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
为什么要用EJB
2014/04/17 面试题
高中化学教学反思
2014/01/13 职场文书
红色影片观后感
2015/06/18 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
Python+DeOldify实现老照片上色功能
2022/06/21 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android