AngularJS 实现弹性盒子布局的方法
最近在写一个简单的布局框架,其实功能大同小异。但目标要求是用尽量简单的代码,实现一些必用的功能。应用在一些要求加载速度快的场合。
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 实现弹性盒子布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
AngularJs bootstrap搭载前台框架——基础页面
1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下: <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></scrip
-
AngularJs bootstrap搭载前台框架——js控制部分
这个简单的框架最后只剩下了js的控制部分了,angular框架有自己的逻辑部分,有自己的controller和service层,由于我们可能要用到angular的一些内置的resource和cookie,所以我们需要再加入angular的一些lib: --------------index.html------------------ <script src="lib/angular/angular-strap.js"></script> <script
-
AngularJs 指令详解及示例代码
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func
-
AngularJS轻松实现双击排序的功能
话不多说,直接看示例代码 HTML代码 <th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">单价</a></th> <th class="col-md-3"><a href="" ng-click="desc('3',la=!la)">销售金额<
-
AngularJs html compiler详解及示例代码
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl="cf"></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静
-
AngularJs bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包,可以迅速搭建web前台,可以去官网看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/). 2.github上有一个比较好的纯净AngularJs app的种子,可以去github下载,地
-
AngularJs concepts详解及示例代码
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明他们如何工作.列表如下: statup - 依旧是hello world...改为Hello Kitty! runtime - 介绍angular的runtime scope - view与contorller的纽带(神马glue...胶) controller - app的行为(applicati
-
利用Angularjs和原生JS分别实现动态效果的输入框
在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la
-
Ubuntu系统下Angularjs开发环境安装
一.win7环境下安装ubuntu系统 http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 注意:在安装的第四步选择"安装ubuntu系统,与win7系统共存"这一项,这样可以免去后面的分区,安装更方便 二.安装jdk8 http://hi.baidu.com/270460591/item/5a6a9bcf8f352e4dbdef69cd 注意:配置文件改为在~/.bashrc里面加入 export JAVA_H
-
AngularJs bootstrap详解及示例代码
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu
随机推荐
- 解决Ajax加载JSon数据中文乱码问题
- javascript XMLHttpRequest对象全面剖析
- Vue结合原生js实现自定义组件自动生成示例
- IOS实现圆形图片效果的两种方法
- asp.net mvc signalr简单聊天室制作过程分析
- js绑定事件和解绑事件
- 给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
- 解密ThinkPHP3.1.2版本之独立分组功能应用
- android隐式意图激活浏览器的实现方法
- jquery ajax属性async(同步异步)示例
- js实现浏览器倒计时跳转页面效果
- Android之采用execSQL与rawQuery方法完成数据的添删改查操作详解
- jquery 读取页面load get post ajax 四种方式代码写法
- jQuery插件bgStretcher.js实现全屏背景特效
- Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
- asp输出bmp
- java控制台输入示例分享
- Java中实现多线程关键词整理(总结)
- Java中byte、byte数组与int、long的转换详解
- Java使用join方法暂停当前线程