发表于： 2017-05-12 20:02:18
1 825
今天完成的事情：
理解了angular的单页面的意义，所以说就连喝我水站那个页面都可以不用跳转的，我还以为跳转过去之后再写别的页面：整个angular项目只需要一个index。html文件就可以了，其余的页面都可以放到view文件夹中，根据不同的路由选择器来选择加载不同的视图文件。
学习了一下手风琴式折叠菜单
折叠展开的原理还是比较容易理解的，使用原生js就可以实现：
<html lang="en"><head>
<meta charset="UTF-8">
<title>折叠菜单</title>
<style>
.toggle{ overflow: hidden; height: 0; transition: height 1s;
} </style></head><body><div>
<h4 class="unfold">我爱</h4>
<ul class="toggle">
<li>哈士奇</li>
<li>大金毛</li>
<li>萨摩耶</li>
</ul></div></body></html>h4标签就是一级菜单，ul里面的子项就是二级菜单，给子菜单设置高度为0和overflow：hidden，这样设置后子菜单是默认隐藏的，接下来在js中调整ul的高度就可以了：
var btn=document.getElementsByClassName("unfold")[0];var items=document.getElementsByClassName("toggle")[0];
btn.onclick=function () {
items.style.height="70px";
};但是原生毕竟太麻烦，jq已经有封装好了的折叠方法slideToggle（），所以直接使用这个方法就可以了：
var domMenus=$(".menu");
domMenus.on("click",function () {
$(this).next().slideToggle();
})是不是已下载清爽了许多，然后我们来理解一下这个方法：
点击前，将二级菜单设置为display：none，点击后马上将它变为display：block；overflow：hidden；height：0，接着再不停的增加高度，当高度等于二级菜单，也就是ul的实际高度时，停止增加高度，然后移除这些属性，只保留display：block属性
angular的表单验证实现方法，基本上全在html里面写就可以了，控制器里基本不需要写代码，真是轻松加愉悦啊
跟着雪峰学习了一波html5，新特性果然酷炫
因为致力于减少对外部插件的需求，在视频播放方面新增video元素，规定了通过这个元素来包含视频的标准方法，给我个人最大的感觉就是把flash挤垮了233333adobe躺枪，莫名其妙失去这么大片市场
然后就是拖放属性，任何元素都可以拖放，只要把draggable属性设为true就行，上传各种文件时方便了许多
地理定位功能，为移动端各种地图、导航、获取用户所在区域以判定分发服务内容等都提供了强大的臂助
原来webstorage也是h5范畴的，这个用过的都知道多好用
至于canvas和svg，酷炫是酷炫了，倒是没发现大范围内采用的，目前属于中看不中用哪一类，恩，个人分类
明天要做的事情：
获取接口，徐哲渲染数据到页面上
遇到的问题：
暂无
收获：
同上
返回列表
评论