一款基于Prototype 1.6 的web布局管理器,使用起来非常方便。其基于Prototype 1.6 应用css classes,下图概括了如何使用其css:
大致就是,
- lm_top / lm_bottom ,顶部和底部 布局内容,可以无限增加
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() })
分享到:
相关推荐
"prototype1.6API;jquery1.4API;css2.0API;html5.0API" 提到了四个关键的工具和技术,它们在构建现代Web应用中发挥着核心作用。下面我们将深入探讨每个主题: 1. **Prototype 1.6 API**: Prototype 是一个...
以上方法只是Prototype.jscheatsheet1.6.0.2文档中的一部分,它们构成了使用Prototype框架进行高效Web开发的基础。通过理解和掌握这些API,开发者可以更加灵活地操作DOM元素,提高网页的交互性和动态性,同时简化...
资源中包括`prototype1.6-chm手册.chm`和`prototype.js 1.4.0 中文參考.chm`,这些都是Prototype的中文参考文档,帮助开发者理解和使用该框架。 2. **Ext** Ext JS是一个用于构建富互联网应用(RIA)的JavaScript...
Prototype是一个JavaScript框架,旨在简化动态Web应用程序的开发。该框架由Sam Stephenson创建,并于2005年2月作为开源项目发布。核心开发团队还包括Thomas Fuchs、Justin Palmer、Andrew Dupont、Dan Webb、Scott ...
"prototype-1.6.0.3"可能包含了该库的一个旧版本,对于那些习惯于Prototype语法的开发者来说,这是一个宝贵的参考资料。 "w3school"通常指的是一个在线学习平台,提供了HTML、CSS、JavaScript等Web技术的基础教程和...
1. `<waf:body>`标签的使用,指定`action`属性引入JavaScript库,如prototype-1.6.0.3.js。 2. 后台Action需实现`ITagAction`接口,覆盖`execute(PageContext context)`方法。 3. 在后台查询数据并推送到Scope中供...
知识点: 一、jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,由John Resig在...jQuery作为一个广泛使用的前端库,对现代Web开发有着重要影响,通过掌握它,开发者可以大大提高前端开发的效率和质量。
在移动端开发中,经常需要根据用户使用的设备类型(如Android、iPhone、iPad)来调整页面布局或功能。下面是一个简单的手机类型判断脚本: ```javascript var BrowserInfo = { userAgent: navigator.userAgent....