- 軟件大?。?span>22KB
- 軟件語言:英文
- 軟件類型:國外軟件
- 軟件類別:免費軟件 / 編程工具
- 更新時間:2015-03-09 16:06
- 運行環(huán)境:WinAll, WinXP
- 軟件等級:
- 軟件廠商:
- 官方網(wǎng)站:http://www.portlandswalk.com
9.00M/中文/1.6
0KB/英文/10.0
10.33M/中文/5.0
261KB/中文/10.0
77KB/英文/10.0
Angular deckgrid 是一個數(shù)據(jù)網(wǎng)格用AngularJS的一部分,需要的朋友歡迎下載。該指令不依賴于視覺展示,所有的響應(yīng)和美觀都依賴于你的 CSS 文件。如果你現(xiàn)在選擇使用angular.js作為你的開發(fā)框架的話,實現(xiàn)類似masonry的網(wǎng)格布局效果將會變得更加簡單,今天介紹的輕量級類庫Angular-deckgrid能夠幫助你快速的生成類似的魔術(shù)布局效果。
一. 安裝
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>
定義數(shù)據(jù)結(jié)構(gòu):
$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>
為了更好的設(shè)計響應(yīng)式的頁面,你可以選擇使用如下來代碼來定義不同設(shè)備或者顯示器上的展示行為:
@media screen and (max-width: 480px){
.deckgrid[deckgrid]::before {
content: '1 .column.column-1-1';
}
.deckgrid .column-1-1 {
width: 100%;
}
}
0.6.0版本
打開:[修正]我們需要一個解決方案以防止結(jié)合的模型innerHTML模板
0.5.0版本
升級用AngularJS的依賴bower.json(v1.3.0)。
改變集合比較觸發(fā)重畫。
轉(zhuǎn)自美元的手表以watchcollection美元為了獲得更多的性能。
移植普通未定義檢查用AngularJS標(biāo)準(zhǔn)功能。
請描述您所遇到的錯誤,我們將盡快予以修正,謝謝!
*必填項,請輸入內(nèi)容