floger 发表于 2013-2-7 15:02:32

一款基于Prototype 1.6 的web布局管理器

     一款基于Prototype 1.6 的web布局管理器,使用起来非常方便。其基于Prototype 1.6 应用css classes,下图概括了如何使用其css:
http://blog.xilinus.com/assets/2007/9/30/layout2
大致就是,

[*]lm_top / lm_bottom ,顶部和底部 布局内容,可以无限增加


[*]lm_left / lm_right ,左右内容


[*]lm_center, 中间内容
html代码如下书写:
<div class="lm_container">    <div class="lm_top"></div><div class="lm_left"></div><div class="lm_center"></div>    <div class="lm_right"></div>    <div class="lm_bottom"> </div> </div>当然需要引入Prototype 和 layout_manager   js库,如下:head部分加入<script type="text/javascript" src="prototype.js"></script><script type="text/javascript" src="layout_manager.js"></script>另:还有几个比较让人欣喜的功能!1.布局也支持嵌套,代码类似如下:<div class="lm_container">    <div class="lm_top"></div><div class="lm_left"></div><div class="lm_center">    <div class="lm_container">      <div class="lm_top"></div>      <div class="lm_left"></div>      <div class="lm_center"></div>      <div class="lm_right"></div>      <div class="lm_bottom"> </div>   </div></div>    <div class="lm_right"></div>    <div class="lm_bottom"> </div> </div>2.异步更新布局内容,你可以如此调用:layoutManager.add('your_element_id');layoutManager为一全局变量,js库中如此声明:var layoutManager = null;Event.observe(window, "load", function() { layoutManager = new LayoutManager() })
页: [1]
查看完整版本: 一款基于Prototype 1.6 的web布局管理器