随笔 - 934, 文章 - 0, 评论 - 247, 阅读 - 344万

导航

< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8

随笔分类 -  TreeSaver框架

摘要:Grid的体验 我们先用Firebug来定位一下模板的一些信息: 我们要分析的模板效果图: 使用Firebug看到这时候这个模板的CSS: 注意,我们是看得id=”currentPage”的这个div,它的class=“grid w9col feature1 page-2” 我们在资源文件 resources.html 中搜索,“grid w9col feature1 page-2” 这时我们看到... 阅读全文

posted @ 2011-08-01 15:56 蝈蝈俊 阅读(505) 评论(0) 推荐(0) 编辑

摘要:简单来说,TreeSaver有个函数:treesaver.layout.Grid.best = function(content, grids, breakRecord) { 这个函数根据内容,选择最合适的模板。 这个函数的逻辑就是TreeSaver的模板匹配算法。 下面是对这个函数以及调用他的分析: 对于一篇文章来说,分页运算的逻辑在下面文件的 treesaver.ui.Article.pro... 阅读全文

posted @ 2011-08-01 10:46 蝈蝈俊 阅读(477) 评论(0) 推荐(0) 编辑

摘要:Treesaver 是浏览器大小尺寸敏感(size-sensitive)的,会就着当前的浏览器尺寸(browser size),选用不同的分栏表格(grid)做排版。 初始化 TreeSaver.js 框架的入口源代码在后面可以看到:https://github.com/Treesaver/treesaver/blob/master/src/init.js 这里的代码用到了Google开发的JS库... 阅读全文

posted @ 2011-07-28 17:00 蝈蝈俊 阅读(754) 评论(0) 推荐(0) 编辑

摘要:Treesaver 是浏览器大小尺寸敏感(size-sensitive)的,会就着当前的浏览器尺寸(browser size),选用不同的分栏表格(grid)做排版。不同排版效果下,图片出现的位置有啥规律,这就是本文要分析的内容: 一些典型的图片出现的规律: 首先我们看一些图片出现的规律: 一、当显示的区域只有两栏时,显示另外一个能贯穿两栏的图片,而不是之前贯穿三栏的图片。 这时候的图片相关CS... 阅读全文

posted @ 2011-07-27 17:18 蝈蝈俊 阅读(744) 评论(1) 推荐(0) 编辑

摘要:首先你需要先搭配出”Win7环境下TreeSaver 例子环境的搭配”然后才能继续下一步编译环境。 例子环境搭配后, 你可以在源代码目录下执行 paver 命令,搭配例子测试环境,也可以执行 paver debug 生成带调试注释信息的 treesaver 脚本, 当然也可以使用 paver clean 删除生成的文件。 这些可以运行的命令效果如下: E:\Projects\treesaver>p... 阅读全文

posted @ 2011-07-15 10:03 蝈蝈俊 阅读(426) 评论(0) 推荐(0) 编辑

摘要:TreeSaver 绝大多数情况下,我们只需要下载预先编译好的,比如后面地址的这两个链接:https://github.com/Treesaver/treesaver/downloads 这两个一个是编译好的 0.9.2 版本的, 另外一个是带调试信息以及注释的版本。 如果我们想研究 TreeSaver的工作原理,这时候可能我们就需要搭配TreeSaver的开发环境了, 实话实说,这个环境搭配起... 阅读全文

posted @ 2011-07-14 11:58 蝈蝈俊 阅读(825) 评论(0) 推荐(0) 编辑

摘要:原理 Treesaver 的原理是用绝对定位(absolute position)的方法,帮你自动排好分栏(column)、figure (heading、图片)。Treesaver 是浏览器大小尺寸敏感(size-sensitive)的,会就着当前的浏览器尺寸(browser size),选用不同的分栏表格(grid)做排版,而这些grid、column等都已经在resources.html和s... 阅读全文

posted @ 2011-07-13 17:45 蝈蝈俊 阅读(606) 评论(0) 推荐(0) 编辑

摘要:请首先阅读前几篇教程,才能对本篇文章了解比较深入: TreeSaver 使用教程整理——Step 1: Getting Started TreeSaver 使用教程整理——Step 2: Adding Basic UI TreeSaver 使用教程整理——Step 3: Creating Grids TreeSaver 使用教程整理——Step 4: Using a Title Figure Tr... 阅读全文

posted @ 2011-07-12 17:30 蝈蝈俊 阅读(493) 评论(0) 推荐(0) 编辑

摘要:请首先阅读前几篇教程,才能对本篇文章了解比较深入: TreeSaver 使用教程整理——Step 1: Getting Started TreeSaver 使用教程整理——Step 2: Adding Basic UI TreeSaver 使用教程整理——Step 3: Creating Grids TreeSaver 使用教程整理——Step 4: Using a Title Figure 我们... 阅读全文

posted @ 2011-07-12 17:15 蝈蝈俊 阅读(1003) 评论(0) 推荐(0) 编辑

摘要:请首先阅读前几篇教程,才能对本篇文章了解比较深入: TreeSaver 使用教程整理——Step 1: Getting Started TreeSaver 使用教程整理——Step 2: Adding Basic UI TreeSaver 使用教程整理——Step 3: Creating Grids 我们在第二步的基础上,copy到 step4 作为我们 step4 初始的基础。 Step 4:... 阅读全文

posted @ 2011-07-12 10:47 蝈蝈俊 阅读(540) 评论(0) 推荐(0) 编辑

摘要:请首先阅读前几篇教程,才能对本篇文章了解比较深入: TreeSaver 使用教程整理——Step 1: Getting Started TreeSaver 使用教程整理——Step 2: Adding Basic UI 我们在第二步的基础上,copy到 step3 作为我们 step3 初始的基础。 Step 3: Creating Grids 模板文件 resources.html 的变化 在... 阅读全文

posted @ 2011-07-11 17:48 蝈蝈俊 阅读(582) 评论(0) 推荐(0) 编辑

摘要:请首先阅读前一篇教程: TreeSaver 使用教程整理——Step 1: Getting Started Step 2: Adding Basic UI 我们上一步实现的网页有了一个最最简单的功能,这一步我们将在上一步基础上添加切换分页的按钮以及显示当前页面信息。 请Copy上一步的内容,并对下面文件做如下修改: 对资源文件(resources.html)的修改 资源文件的 chrome 区域... 阅读全文

posted @ 2011-07-11 17:20 蝈蝈俊 阅读(615) 评论(0) 推荐(0) 编辑

摘要:TreeSaver 介绍 Treesaver 是一个开源的JavaScript 框架,用来创建杂志风格的网页布局。 为何要整理这个系列的文章 下面的教程整理自: https://github.com/Treesaver/treesaver/wiki/Walkthrough , 也许是这个框架目前才刚刚起步,它的文档很成问题,文档中一些链接不能下载,源代码中欠缺一些必要的内容,导致源代码的例子无法... 阅读全文

posted @ 2011-07-11 16:50 蝈蝈俊 阅读(1133) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示