用 Exhibit 真正链接开放数据（3）设置页面
|
- UID
- 1066743
|
用 Exhibit 真正链接开放数据（3）设置页面
设置页面有了这些数据之后，Exhibit 让剩余的工作变得非常简单。(feed.html) 是一个用来显示此提要的基本 Web 页面。
清单 5 (feed.html). 基本 Web 页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
| <html>
<head>
<title>Open Clip Art Library--recent contributions</title>
<link href="feed.js" type="application/json" rel="exhibit/data" />
<script src="//static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
type="text/javascript"></script>
<script src="//static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"
type="text/javascript"></script>
<style>
#main { width: 100%; }
#timeline { width: 100%; }
.entry { border: thin solid black; width: 100%; }
#facets { padding: 0.5em; vertical-align: top; }
div.title { font-weight: bold; font-size: 150%; }
.updated { font-style: italic; }
.tags { color: purple; }
.label { display: none; }
</style>
</head>
<body>
<h1>Open Clip Art Library--recent contributions</h1>
<table id="main">
<tr>
<!-- The main display area for Exhibit -->
<td ex:role="viewPanel">
<div id="what-lens" ex:role="exhibit-view"
ex:viewClass="Exhibit.TileView"
ex:label="What">
<!-- Custom view ("lens") for the feed data -->
<table ex:role="lens" class="entry">
<!-- The tr acts as a template.
Each item object in the JSON generates one such tr -->
<tr>
<td><img ex:src-content=".logo" /></td>
<td>
<div ex:content=".label" class="label"></div>
<a ex:href-content=".link">
<div ex:content=".title" class="title"></div>
</a>
<div>
by <span ex:content=".author" class="author"></span>,
updated <span ex:content=".updated" class="updated"></span>
</div>
<div ex:content=".content" class="content"></div>
Tags: <div ex:content=".categories" class="tags"></div>
</td>
</tr>
</table>
</div>
<!-- Timeline view for the feed data -->
<div id="timeline" ex:role="view"
ex:viewClass="Timeline"
ex:label="When"
ex:start=".updated"
ex:colorKey=".author"
ex:topBandUnit="day"
ex:topBandPixelsPerUnit="200"
ex:topBandUnit="week">
</div>
</td>
<!-- Boxes to allow users narrow down their view of feed data -->
<td id="facets">
<div ex:role="facet" ex:facetClass="TextSearch"></div>
<div ex:role="facet" ex:expression=".author" ex:facetLabel="Author"></div>
<div ex:role="facet" ex:expression=".categories" ex:facetLabel="Tag"></div>
</td>
</tr>
</table>
</body>
</html>
|
头部的 script元素从 MIT 的公共服务中引入 Exhibit 代码。第二个只有在您想要使用 Exhibit 的时间线功能时才需要，这将在本节的稍后部分讨论。在第一个 td元素，您会注意到 Exhibit 的第一个特定指令属性 ex:role。该属性用来将 HTML 的构造函数影射到 Exhibit 的 JavaScript 的过程挂钩。第一个例子设立了完整的视图区域，Exhibit 在该区域内执行。在这个角色内还有若干不同角色的附加块。第一个为 Exhibit 设置默认视图，该视图只是此提要的内容表。我需要对数据如何在 HTML 内呈现进行严格控制，所以我使用了 lens。
借助 lens，可以表达这类愿望：“用数据内的 title属性的内容填充这个 span”。在本例中，我填充的是一个表，tr可充当显示每个条目的模板。我使用 ex:content指令生成元素内容。我使用 ex:href-content生成 href属性（用于超级链接），使用 ex:src-content生成 src属性（用于图像），以此类推。Exhibit 会自动将列表属性 categories转变成以逗号分隔的值。
我还用 ex:viewClass="Timeline"创建了一个视图。此视图设置 Exhibit 来生成一个十分整齐的时间线显示，这在本文下一节将会得到很好的展示。最后，Exhibit 提供了 facet，这是一组工具，可用来帮助用户搜索和缩小搜索范围以便找到他们所需的数据。这些工具在 的 facetsdiv 内定义。内有三个框，一个累加搜索字段。用户在框内开始键入时，框内所显示的输入的范围就会缩小到包含搜索文本的那些。另外两个框是属性列表（分别为作者和标记），用户可以对其进行选择，以便将输入进一步缩小范围到只包括匹配的那些。 |
|
|
|
|
|
