`
floger
  • 浏览: 214392 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

     一款基于Prototype 1.6 的web布局管理器,使用起来非常方便。其基于Prototype 1.6 应用css classes,下图概括了如何使用其css:

大致就是,

  • 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() })
分享到:
评论

相关推荐

    prototype1.6API;jquery1.4API;css2.0API;html5.0API

    "prototype1.6API;jquery1.4API;css2.0API;html5.0API" 提到了四个关键的工具和技术,它们在构建现代Web应用中发挥着核心作用。下面我们将深入探讨每个主题: 1. **Prototype 1.6 API**: Prototype 是一个...

    prototype手册1.6.0.2版本

    以上方法只是Prototype.jscheatsheet1.6.0.2文档中的一部分,它们构成了使用Prototype框架进行高效Web开发的基础。通过理解和掌握这些API,开发者可以更加灵活地操作DOM元素,提高网页的交互性和动态性,同时简化...

    Ajax资源大全-prototype、ext、dojo、dwr等

    资源中包括`prototype1.6-chm手册.chm`和`prototype.js 1.4.0 中文參考.chm`,这些都是Prototype的中文参考文档,帮助开发者理解和使用该框架。 2. **Ext** Ext JS是一个用于构建富互联网应用(RIA)的JavaScript...

    prototype_1_6教程

    Prototype是一个JavaScript框架,旨在简化动态Web应用程序的开发。该框架由Sam Stephenson创建,并于2005年2月作为开源项目发布。核心开发团队还包括Thomas Fuchs、Justin Palmer、Andrew Dupont、Dan Webb、Scott ...

    html&js,JavaScript参考手册,css

    "prototype-1.6.0.3"可能包含了该库的一个旧版本,对于那些习惯于Prototype语法的开发者来说,这是一个宝贵的参考资料。 "w3school"通常指的是一个在线学习平台,提供了HTML、CSS、JavaScript等Web技术的基础教程和...

    waf开发案例.pdf

    1. `&lt;waf:body&gt;`标签的使用,指定`action`属性引入JavaScript库,如prototype-1.6.0.3.js。 2. 后台Action需实现`ITagAction`接口,覆盖`execute(PageContext context)`方法。 3. 在后台查询数据并推送到Scope中供...

    李炎恢JQuery合并版(全)

    知识点: 一、jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,由John Resig在...jQuery作为一个广泛使用的前端库,对现代Web开发有着重要影响,通过掌握它,开发者可以大大提高前端开发的效率和质量。

    精通JavaScript(中文清晰优化版)_OCR识别处理后可标注版2

    - **Firebug**:一个强大的Web开发工具,可以在Firefox浏览器中使用。 - **Venkman**:也是Firefox的一个插件,主要用于JavaScript的调试。 - **测试**:这部分提到了几种流行的JavaScript单元测试框架,如JSUnit...

    28个常用JavaScript方法代码块

    在移动端开发中,经常需要根据用户使用的设备类型(如Android、iPhone、iPad)来调整页面布局或功能。下面是一个简单的手机类型判断脚本: ```javascript var BrowserInfo = { userAgent: navigator.userAgent....

Global site tag (gtag.js) - Google Analytics