Angular Deckgrid(专用仿Masonry布局的类库) v0.6.0 官方最新版

Angular deckgrid 是一个数据网格用AngularJS的一部分,需要的朋友欢迎下载。该指令不依赖于视觉展示，所有的响应和美观都依赖于你的 CSS 文件。如果你现在选择使用angular.js作为你的开发框架的话，实现类似masonry的网格布局效果将会变得更加简单，今天介绍的轻量级类库Angular-deckgrid能够帮助你快速的生成类似的魔术布局效果。

 

安装教程

 

一. 安装

 

1. bower install --save angular-deckgrid

 

2. 添加代码到你的HTML

 

<script src="<your-bower-components>/angular-deckgrid/angular-deckgrid.js"></script>

 

3. 添加到你的angular模块中：

 

angular.module('your.module', [

 

'akoenig.deckgrid'

 

]);

 

使用教程

 

定义声明：

 

<div deckgrid source="photos" cardTemplate="templates/deckgrid-card.html" class="deckgrid"></div>

 

定义数据结构：

 

$scope.photos = [

 

id: 'p1', 'title': 'A nice day!', src: "http://lorempixel.com/300/400/",

 

id: 'p2', 'title': 'Puh!', src: "http://lorempixel.com/300/400/sports",

 

id: 'p3', 'title': 'What a club!', src: "http://lorempixel.com/300/400/nightlife"

 

];

 

定义cardtemplate：

 

<div class="a-card">

 

<h1>{{card.title}}</h1>

 

<img src="" data-ng-src="{{card.src}}">

 

</div>

 

为了更好的设计响应式的页面，你可以选择使用如下来代码来定义不同设备或者显示器上的展示行为：

 

@media screen and (max-width: 480px){

 

.deckgrid[deckgrid]::before {

 

content: '1 .column.column-1-1';

 

}

 

.deckgrid .column-1-1 {

 

width: 100%;

 

}

 

}

 

更新日志

 

0.6.0版本

 

打开：[修正]我们需要一个解决方案以防止结合的模型innerHTML模板

 

0.5.0版本

 

升级用AngularJS的依赖bower.json（v1.3.0）。

 

改变集合比较触发重画。

 

转自美元的手表以watchcollection美元为了获得更多的性能。

 

移植普通未定义检查用AngularJS标准功能。

其他精品绿色应用软件推荐

Microsoft Office Access 2010 官方免费完整版_Access数据库

MicrosoftOfficeAccess是由微软发布的关联式数据库管理系统。它结合了MicrosoftJetDatabaseEngine和图形用户界面两项特点，是MicrosoftOffice的系统程式之一。Access系列软件功能介绍：一、用来进行数据分析：access有强大的数据处理、统计分析能力，利于access的查

本站提供绿色免费软件《Microsoft Office Access 2010 官方免费完整版_Access数据库 》最新版免费下载，适用于WinAll, Win7，软件大小272.00M，下载火软件网提供免费下载安装！