用angular制作简单的选项卡
现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的。学了一点新知识就想和大家分享,今天就分享一个小小的Demo,希望大家都能喜欢。
先给大家上静态效果图吧:
点击上面的标题可以切换到相应的选项卡,接下来直接上代码吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.1.5.6.js" ></script>//连接angular库
//简单样式部分
<style>
#tab{display: flex;}
#tab div{
flex: 1;
text-align: center;
line-height: 40px;
background: sandybrown;
color: #fff;
font-size: 18px;
font-family: "微软雅黑";
}
.list{
flex: 1;
height: 200px;
border: 1px solid #ccc;
border-top: none;
line-height: 40px;
text-align: center;
padding: 20px;
background: #F1F1F1;
}
.atv{
border-bottom: 3px solid chocolate;
}
</style>
//angular代码部分
<script>
var app = angular.module('tabsApp',[]);//定义模块
app.controller('indexCtrl',function($scope){//定义控制器
$scope.name = 'abc';
$scope.page1 = true;
$scope.page2 = false;
$scope.page3 = false;
$scope.show = function(page){
console.log(page);
if(page==1){
$scope.page1 = true;
$scope.page2 = false;
$scope.page3 = false;
}else if(page==2){
$scope.page1 = false;
$scope.page2 = true;
$scope.page3 = false;
}else if(page==3){
$scope.page1 = false;
$scope.page2 = false;
$scope.page3 = true;
}
}
});
</script>
</head>
<body ng-app="tabsApp">//绑定模块
<div ng-controller="indexCtrl">//绑定控制器
<!--<p>{{name}}</p>-->
<div>
<div id="tab">
<div ng-click="show(1)" class="{{page1?'atv':''}}">什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?</div>
<div ng-click="show(2)" class="{{page2?'atv':''}}">doctype(文档类型)的作用是什么?你知道多少种文档类型?</div>
<div ng-click="show(3)" class="{{page3?'atv':''}}">解释下浮动和它的工作原理。</div>
</div>
<div ng-show="page1" class="list">
FOUC(Flash Of Unstyled Content)–文档样式闪烁
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,
然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间
页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,
只要在之间加入一个或者script元素就可以了。
</div>
<div ng-show="page2" class="list">
此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型,
分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML 4.01规定了三种文档类型:Strict、Transitional以及Frameset。
XHTML 1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
</div>
<div ng-show="page3" class="list">
关于浮动我们需要了解,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
要想使元素浮动,必须为元素设置一个宽度(width)。虽然浮动元素不是文档流之中,
但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中,
所以文档的普通流中的块框表现得就像浮动框不存在一样,下面的元素填补原来的位置。有些元素会在浮动元素的下方,
但是这些元素的内容并不一定会被浮动的元素所遮盖,对内联元素进行定位时,这些元素会考虑浮动元素的边界,
会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素,而内联元素会关注浮动元素的。
</div>
</div>
</div>
</body>
</html>
就是这样一个小的demo,大家可以自己去试一试,有什么不懂的大家可以提出来,让我们一起学习、交流!
用angular制作简单的选项卡的更多相关文章
- Jquery简单的选项卡实现
概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...
- 3.2 配置构建Angular应用——简单的笔记存储应用
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- JS入门学习,写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
- Highcharts使用教程(1):制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- ZAM 3D 制作简单的3D字幕 流程(二)
原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...
- phalcon: eventManager事件管理(结合dispatcher调度控制器)制作简单的acl
制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- JSP制作简单登陆
JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...
- Photoshop 基础三 制作简单按钮
要求知识点:移动工具.选择工具.套索工具.多边行工具.文本工具.路径选择工具.裁剪.填充 一.制作简单按钮 1)新建画布,大小随便 2)画圆角矩形工具(同时定义背景色.边框是否需求.边框颜色) 3)打 ...
随机推荐
- Django return
return HttpResponse("OK") 返回一个字符串 return redirect("/index/") 返回URL return render ...
- scala 读取保存文件 去除字符特殊
/** * 读取文件 * @param filename * @return */ def readFormFile(filename: String) = { var ooop = "&q ...
- Abaqus用Dload子程序实现移动载荷
- jsp页面选择文件上传,获取不到绝对路径问题
选择"D:\\temp\file\test.txt"文件,alert(filename)却是"C:\\fakepath\test.txt" 出现D:\\temp ...
- Excle批量导入到mysql调查
1.使用navicat Premium 导入时候提示打不开.问题的链接如下: https://blog.csdn.net/wsyzxss/article/details/77864313 2.只能使用 ...
- Redis集群以及自动故障转移测试
在Redis中,与Sentinel(哨兵)实现的高可用相比,集群(cluster)更多的是强调数据的分片或者是节点的伸缩性,如果在集群的主节点上加入对应的从节点,集群还可以自动故障转移,因此相比Sen ...
- 函数function
function add(x,y,z){ sum = x + y +z; document.write(x+"+"+y+"+"+z+"="+ ...
- jQuery取得radio的值 取select得值
获取一组单选按钮对象: var obj_payPlatform = $('#wrap input[name="payMethod"]'); 获取被选中按钮的值 : var val_ ...
- Windows Server 2012 R2 双网卡绑定
双网卡绑定主要有以下两点好处: 1.实现网络容错:主主模式和主被模式 2.带宽聚合 首先准备工作需要两台虚拟机,Server01是目标服务器,需要有两块网卡,并且清空两块网卡的现有配置,Server0 ...
- java web项目由http转换成https遇到的各种坑
java web项目由http转换成https遇到的各种坑 这篇文章写给自己在经历项目由http转换成https遇到的各种坑所做的一份笔记,留给以后自己看,或者和开发的朋友也刚好遇到和我一样的问题的朋 ...