-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
145 lines (125 loc) · 4.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!-- Flickr demo for Fuel UX Datagrid -->
<!-- https://github.com/adamalex/fuelux-dgdemo -->
<!-- Copyright (c) 2012 Adam Alexander -->
<!-- Demo source released to public domain. -->
<!DOCTYPE html>
<html class="fuelux" lang="en"> <!-- Fuel UX css class -->
<head>
<meta charset="utf-8">
<title>Fuel UX Datagrid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fuel UX CDN link to core css -->
<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Fuel UX CDN link to responsive css -->
<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- PAGE HEADER -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Fuel UX Datagrid</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Demo</a></li>
<li><a href="https://github.com/ExactTarget/fuelux">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h1>Fuel UX Datagrid demo</h1>
<p>Enter a search into the Datagrid below to search Flickr for some photos.</p>
<!-- DATAGRID MARKUP -->
<table id="MyGrid" class="table table-bordered datagrid">
<thead>
<tr>
<th>
<span class="datagrid-header-title">Flickr Search</span>
<div class="datagrid-header-left"></div>
<div class="datagrid-header-right">
<div class="input-append search">
<input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
</div>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="datagrid-footer-left" style="display:none;">
<div class="grid-controls">
<span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
<select class="grid-pagesize"><option>5</option><option>10</option></select>
<span>Per Page</span>
</div>
</div>
<div class="datagrid-footer-right" style="display:none;">
<div class="grid-pager">
<button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
<span>Page</span>
<div class="input-append dropdown combobox">
<input class="span1" type="text">
</div>
<span>of <span class="grid-pages"></span></span>
<button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
<!-- END DATAGRID MARKUP -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<!-- Fuel UX CDN link to its javascript library -->
<script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script>
<!-- Data Source for Flickr API -->
<script src="datasource.js" type="text/javascript"></script>
<!-- Logic for Datagrid -->
<script>
$('#MyGrid').datagrid({
dataSource: new FlickrDataSource({
// Column definitions for Datagrid
columns: [{
property: 'image',
label: 'Image',
sortable: false
},{
property: 'title',
label: 'Title',
sortable: false
}],
// Create IMG tag for each returned image
formatter: function (items) {
$.each(items, function (index, item) {
item.image = '<img src="' + flickrUrl(item) + '"></a>';
});
}
})
});
// Returns image URL for an image returned from Flickr API
function flickrUrl(image) {
return 'http://farm' + image.farm + '.staticflickr.com/' + image.server + '/' + image.id + '_' + image.secret + '_t.jpg';
}
</script>
</body>
</html>