AngularJS 实现弹性盒子布局的方法


Posted in Javascript onAugust 30, 2016

最近在写一个简单的布局框架,其实功能大同小异。但目标要求是用尽量简单的代码,实现一些必用的功能。应用在一些要求加载速度快的场合。

CSS部分

.flex-row,.flex{
display: -webkit-flex;display: flex;
flex-direction: row;
}
.flex-col{
display: -webkit-flex;
display: flex;
flex-direction: column;
}

Javascript部分

.directive('flex',[function(){
return {
restrict:'A',
scope:{'flex':'='},
link:function(s,e,a){e.css('flexGrow',s.flex);}
};
}]);

用法:

<div class="flex-row">
<div flex="1"> one </div>
<div flex="6"> two </div>
</div>

以上所述是小编给大家介绍的AngularJS 实现弹性盒子布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
微信小程序实现简单表格
Feb 14 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 #Javascript
Laravel中常见的错误与解决方法小结
Aug 30 #Javascript
js中常用的Tab切换效果(推荐)
Aug 30 #Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 #Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 #Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 #Javascript
You might like
用PHP调用数据库的存贮过程!
2006/10/09 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
大学新闻系自荐书
2014/05/31 职场文书
追悼会答谢词
2015/01/05 职场文书
清洁工岗位职责
2015/02/13 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS