TreeSaver 使用教程整理——Step 2: Adding Basic UI

请首先阅读前一篇教程：

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

Step 2: Adding Basic UI

我们上一步实现的网页有了一个最最简单的功能，这一步我们将在上一步基础上添加切换分页的按钮以及显示当前页面信息。

请Copy上一步的内容，并对下面文件做如下修改：

 

对资源文件（resources.html）的修改

资源文件的 chrome 区域修改成如下信息：

<div class="chrome">

  <div class="viewer">

  </div>

  <div class="controls">

    <div class="pagewidth">

      <span class="pagenumbers">

        <span data-bind="pagenumber">1</span> /

        <span data-bind="pagecount">5</span>

      </span>

      <button class="prev">Prev</button>

      <button class="next">Next</button>

    </div>

  </div>

</div>

说明：

我们在 step1的下面代码基础上，增加了如下功能： 显示内容区域下增加了两个功能：

    <div class="chrome">

      <div class="viewer"></div>

    </div>

• 分页信息，我们通过数据绑定了当前页数和总页数。
  Page numbers: Adding data-bind="pagenumber" to an element will cause it to be automatically updated with the current page number (use data-bind="pagecount" for the total number of pages).
• 我们增加了前一页和后一页的功能按钮。
  Previous & Next Buttons: Adding a CSS class of next or prev automatically adds page turning ability to any element when clicked.

对于样式 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: 40px;

  left: 0;

  right: 0;

}

.grid {

  width: 300px;

  border: 1px solid #ccc;

  margin: 9px;

  opacity: .25

}

.column {

  width: 280px;

  top: 5px;

  bottom: 5px;

  left: 5px;

}

#currentPage {

  opacity: 1;

}

.controls {

  position: absolute;

  bottom: 10px;

  left: 0;

  right: 0;

  height: 30px;

  line-height: 30px;

  font-family: Helvetica, Sans-Serif;

}

.pagenumbers {

  display: block;

  text-align: center;

  color: #999;

  font-size: 12px;

  font-weight: bold;

}

.controls .pagewidth {

  margin: 0 auto;

  position: relative;

}

.controls .next {

  position: absolute;

  right: 0;

  top: 0;

}

.controls .prev {

  position: absolute;

  left: 0;

  top: 0;

}

说明：

• 我们把 .viewer 的 bottom 设置成 40px; 这个区域用于显示我们的分页信息与分页按钮，
  The CSS here is fairly straightforward, the most important part is that we changed the .viewer clause to have bottom: 40px. Treesaver places all pages within this element, using the current dimensions in order to calculate the amount of space available for layout. We needed to adjust the bottom in order to give space for the buttons and page numbers.
• 我们把 .grid  的不透明特性：opacity设置成 .25 。同时当前选择的不透明特性设置成 1，这使得整个页面突出显示了当前页面。
  The CSS also sets opacity: .25 on any .grid, while setting opacity: 1 on #currentPage. This makes the next and previous pages translucent, making the current page more prominent.
• 我们把增加的按钮等给了CSS属性，如下就是新增的CSS属性：
  We finish this step off by adding a bit of styling to the buttons, using the CSS3 button styling by ubuwaits:
  

#currentPage {

  opacity: 1;

}

.controls {

  position: absolute;

  bottom: 10px;

  left: 0;

  right: 0;

  height: 30px;

  line-height: 30px;

  font-family: Helvetica, Sans-Serif;

}

.pagenumbers {

  display: block;

  text-align: center;

  color: #999;

  font-size: 12px;

  font-weight: bold;

}

.controls .pagewidth {

  margin: 0 auto;

  position: relative;

}

.controls .next {

  position: absolute;

  right: 0;

  top: 0;

}

.controls .prev {

  position: absolute;

  left: 0;

  top: 0;

}

这时候的演示效果如下：

多了导航按钮和当前页面信息，同时突出显示当前页面

参考资料：

https://github.com/Treesaver/treesaver/wiki/Walkthrough