Roam是一个基于JS的HTML UI(感觉是废话),或者叫做布局吧...不懂这东西.总之,它能让一行内放置多个容器,每次只有一个容器被展开,其他容器都处于收回状态,当用户将鼠标移到收回的容器时,该容器将会被展开,同时已展开的容器将会被收回.

我总是觉得这东西应该已经有很成熟的实现了,但总又找不到,所以只好赶鸭子上架似的硬着头皮写了一个...(如果真的有一个已有的实现的话,请务必告诉我,我会很高兴的...)

演示:http://www.hakugyokurou.net/test/roam1/example/

jQuery

在HTML头加入roam-[版本].min.js和roam-[版本].css的引用就行了,例如. <link rel="stylesheet" type="text/css" href="roam-0.1.css" /> <script type="text/javascript" src="roam-0.1.min.js" ></script> (别忘了加上jQuery的引用)

Roam目前有4个CSS Class,分别是roam-container,roam-block,roam-title和roam-content.未来将引入第5个:roam-context(暂时).

roam-container 即一个Roam区块容器,将roam-block放在容器内后才能使用.

现在需要加入width和height手动指定宽高,具体详见示例.

roam-block 即一个Roam区块,将其放入roam-container后,设置好参数就能用了.

目前它有3个参数:

min-width 收缩后的宽度

max-width 展开后的宽度

roam-toggle 默认是否处于展开状态,可选值为true或false

roam-title 是收回时显示的内容,可以理解为标题.roam-title无论在展开还是收回时都会限制.

参数:

position 显示在左下角还是右下角,可选值为left(左下角)和right(右下角)

roam-content 是展开后显示的内容,可以理解为正文.

参数:

position 显示在左上角还是右上角,可选值为left(左上角)和right(右上角)

其实这个库就是为了做自己的网站的首页用的...因此写的很艹,另外我本身就不是网页程序员,至少不是前端...所以自然是烂到猹.

• 关于未来的计划,目前计划要解决的问题是:
• 引入roam-context(上下文),即允许多个container中仅有一个block处于激活状态.
• 为roam-container引入layout或类似名字的参数,用于设定block布局(目前仅有线性布局).
• 尽量让width和height之类的参数自动计算...
• 改善roam-title和roam-content.
• 加入对触屏的优化和支持.

嘛...最宽松的MITLicence,愉快地拉去魔改吧.