TreeSaver 使用教程整理——Step 1: Getting Started

Posted on 2011-07-11 16:50 蝈蝈俊阅读(1131) 评论(0) 编辑收藏举报

TreeSaver 介绍

Treesaver 是一个开源的JavaScript 框架，用来创建杂志风格的网页布局。

为何要整理这个系列的文章

下面的教程整理自： https://github.com/Treesaver/treesaver/wiki/Walkthrough ，也许是这个框架目前才刚刚起步，它的文档很成问题，文档中一些链接不能下载，源代码中欠缺一些必要的内容，导致源代码的例子无法运行等等。我在摸索这个框架时碰了很多弯路，整理这篇文档，就是为了避免后来人也碰弯路。

环境准备

1、下载 treesaver-0.9.2.js

TreeSaver 使用了Google的 Closure 工具包，这让我们编译TreeSaver的源码造成了很大复杂性，我就在这里花费了大量时间，结果还是没有弄好它的环境。

这里我们简单起见，先只用它预先编译好的脚本库，这个脚本库下载地址如下：
https://github.com/treesaver/treesaver/downloads

如上图所示， treesaver-0.9.2.js 是运行版本，treesaver.js 是带调试信息和注释的。按需下载你所需要的版本。这里我们使用的是：treesaver-0.9.2.js

为了随后演示的方便，我们的目录组织如下：

[Treesaver Walkthrough Directory]
|- treesaver-0.9.2.js
|- img/
|- step1/
|- step2/
   ...

treesaver-0.9.2.js 文件和通用图片目录我们放在外层，

每一步的演示我们一个目录存放对应的一些文件；这个目录一般会有下面三个文件：

文章内容文件，我们一般是 Index.html 文件；
定义布局的资源文件： resources.html
定义样式的样式文件： style.css

本文演示的是最简单TreeSaver的搭配，所以本文演示并没有通用图片。即上面的 img 目录是空的

index.html 文件的内容：

<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Sample Treesaver Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="resources" href="resources.html">
    <script src="../treesaver-0.9.2.js"></script>
  </head>
  <body>
    <article>
      <p>This markup is an example of a page using Treesaver for layout. It is not very exciting right now.</p>
    </article>
  </body>
</html>

说明：

确保 Treesaver 的 <script> 标签是在Treesaver的资源文件和样式文件之后。这么做是为了确保IE8能妥善的处理好HTML5的标签。此外这点也可以在脚本和资源文件下载上让用户体验比较好。
Make sure the Treesaver <script> tag is the final element in the <head>, after the link to the Resources file and any stylesheets. This is required in order to ensure the IE8 and below properly process HTML5 tags. Additionally, this improves the user experience by letting the library download scripts in resources in parallel.
即注意如下的先后顺序：

<link rel="stylesheet" href="style.css">
<link rel="resources" href="resources.html">
<script src="../treesaver-0.9.2.js"></script>

不要删除<meta name="viewport">标签，如果删除了，你在iPhone和Android上会看到比较怪异的结果。
Do not remove the <meta name="viewport">, otherwise you will end up with very strange results on iPhone and Android
最好使用HTML5 doctype定义:
Always Declare the HTML5 doctype: The XHTML doctype is also usable, as long as Quirks mode processing is not triggered
把我们的内容放在<article>标签之内，任何这个标签之外的都将被忽视，在最终显示上都将被删除。如果你的浏览器是不支持的旧浏览器，则可以借用这个特性来实现兼容旧浏览器。
Place content within an <article> tag: Any content outside the tag is ignored, and will be completely removed when performing layout. You can use that in order to present to content to older browsers, if desired (see Content Format for alternatives).

resources.html 文件的内容：

<!doctype html>
<html>
  <body>
    <div class="chrome">
      <div class="viewer"></div>
    </div>
    <div class="grid">
      <div class="column"></div>
    </div>
    <div class="loading">
      Loading
    </div>
    <div class="error">
      Error
    </div>
  </body>
</html>

说明：

<head>, <title> 等其他内容标签在模板文件上是可选的,Treesaver 不使用这些标签,你可以省略他们.
<head>, <title> and other contents are optional. They are not used by Treesaver and can be omitted completely.

style.css 文件的内容：

.treesaver body {
  /* Hide scrollbars */
  overflow: hidden;
  /* Use full body canvas */
  margin: 0;
  border: 0;
  padding: 0;
}
.chrome, .viewer, .grid, .column, .container {
  /* Manually position everything */
  position: absolute;
  /* Make sure seams aren't visible */
  overflow: hidden;
  /* Set the base vertical grid */
  line-height: 20px;
}
/* Stretch the viewer to fill the screen */
.viewer {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.grid {
  width: 300px;
  border: 1px solid #ccc;
  margin: 9px;
}
.column {
  width: 280px;
  top: 5px;
  bottom: 5px;
  left: 5px;
}