`
jetway
  • 浏览: 483804 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Script.Aculo.us

    博客分类:
  • ajax
阅读更多

Script.Aculo.us 

1. 概述 

官方主页:http://script.aculo.us/
官方WIKI:http://wiki.script.aculo.us/scriptaculous/show/Usage

Scriptaculous是基于Prototype.js框架的JS效果。

1.1 下载&安装:

Scriptaculous包含了6个.js,scriptaculous.js是主文件。

把这6个文件放于同一个目录下,引入scriptaculous.js,会默认把其他5个都都引入了(原理见本文最后)
 
<head>中引入如下:

<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

如果只需要引入其中一部分,可以通过以下方式:

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

2.Effective 

Effective 是 scriptaculous 最主要的功能之一, 可以直接以html 的 element_id为参数调用API, 比如:

<script type="text/javascript" language="javascript">
      Effect.Appear('element_id');
 </script>

也可以通过事件机制

  ---- 层的开关效果:

<div onclick="new Effect.SwitchOff(this)">
    Click here if you've seen enough.
  </div>

  ---- 帘幕上拉效果
 

<div onclick="new Effect.BlindUp(this, {duration: 16})">
    Click here if you want this to go slooooow.
  </div>

  通过 duration(持续事件),fps(每秒帧数),delay(延迟)之类的参数,可以实现更多效果。
 

  更多Demo查看scriptaculous  wiki上的Demos

Dom Builder

与语法超简洁的Builder相比,W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子,用Builder就够了。

Builder很有Ruby的风格,请看下面一句

foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)

第1个参数是element类型,第2个是可选的attribbute,第3个是节点内的子节点。

如果要换成W3c的Dom函数写法,善哉善哉。

下面这段更明显直接照元素的页面顺序来生成对象,而不是像W3C Dom Builder很逻辑抽象的,先生成对象,然后append到父元素。

div = Builder.node('div',{className:linkDiv},[
             Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
       ]);

当然了,还是没有JS Template清晰,所以Builder只作为html片断非常短时使用。

评论

相关推荐

    Prototype.and.script.aculo.us.Dec.2007.pdf

    《Prototype与script.aculo.us:深入理解与应用》一书为读者提供了全面而深入的JavaScript框架知识,尤其针对Prototype和script.aculo.us两大框架。本书不仅涵盖了基础概念,还深入探讨了高级编程技巧,旨在帮助...

    prototype and script.aculo.us框架

    script.aculo.us框架是构建在prototype之上的JavaScript脚本库,它的定位就是帮助开发人员快速有效地创建页面展示及操作的特效。 对于中小型的Ajax应用项目应用项目而言,prototype+script.aculo.us是一个非常不错的...

    《Prototype and script.aculo.us终极揭秘》

    《Prototype和script.aculo.us终极揭秘》是一本深入探讨JavaScript库Prototype和script.aculo.us的专业书籍,旨在帮助开发者掌握这两个强大的工具,提升Web应用程序的用户体验和交互性。这本书的试读样章为我们提供...

    Practical.Prototype.and.script.aculo.us.Jun.2008

    《实用的Prototype与script.aculo.us》一书由核心团队开发者安德鲁·杜邦(Andrew Dupont)撰写,深入探讨了Prototype与script.aculo.us这两个JavaScript库的关键方面,为读者提供了一次全面且深入的学习体验。...

    script.aculo.us

    **script.aculo.us框架详解** `script.aculo.us`是一个基于JavaScript库的用户界面效果和交互框架,它在Web开发领域扮演着重要角色,尤其在增强用户体验方面。这个框架是AJAX(Asynchronous JavaScript and XML)...

    script.aculo.us实现googleSuggest用例

    **script.aculo.us库介绍** `script.aculo.us`是一个基于JavaScript的库,它扩展了浏览器的HTML元素,为Web开发者提供了丰富的用户界面组件和动态效果。这个库是Prototype JavaScript框架的一部分,它使得创建交互...

    Prototype and script.aculo.us: You Never Knew JavaScript Could Do This

    在提供的Pragmatic.Prototype.and.script.aculo.us.Dec.2007.pdf文件中,你将找到关于这两个库的详细教程和案例研究,包括如何导入和初始化库,如何使用它们提供的各种API,以及如何解决可能遇到的问题。这份资料...

    Practical Prototype and script.aculo.us

    《实用原型与script.aculo.us》(Practical Prototype and script.aculo.us)是一本由安德鲁·杜邦(Andrew Dupont)编写的关于JavaScript框架Prototype和其扩展库script.aculo.us的专业书籍。该书于2008年出版,是...

    Pragmatic.Prototype.and.script.aculo.us.Dec.2007

    《Pragmatic Prototype and script.aculo.us Dec.2007》是一份关于JavaScript和Prototype库的教程资料,发布于2007年12月。这个资源旨在帮助开发者更高效地利用这两种技术来创建交互式的Web应用。JavaScript是一种...

    Apress.Practical.Prototype.and.script.aculo.us.Jun.2008.pdf

    ### 实践指南:Prototype与script.aculo.us #### 书籍概览 《实践指南:Prototype与script.aculo.us》是一本由安德鲁·杜邦(Andrew Dupont)编写的书籍,出版于2008年6月。本书旨在帮助读者全面掌握Prototype和...

    Prototype and script.aculo.us

    ### Prototype.js 和 Script.aculo.us 知识点详解 #### 一、Prototype.js 概述 **Prototype.js** 是一个非常优雅的 JavaScript 基础类库,它为原生 JavaScript 提供了大量的扩展,使开发者能够更加高效地进行 Web ...

    Javascript框架Script.aculo.us的英文文档

    ### JavaScript框架Script.aculo.us知识点概述 #### 一、简介 Script.aculo.us是一个功能强大的JavaScript库,专注于提供丰富的用户界面交互效果与控制组件。它最初是为Ruby on Rails项目设计的,但其灵活的设计使...

    Script.Aculo.Us开发系列教程

    Script.Aculo.Us开发系列教程,来自CnBlog的文章,本人搜集,下载,打包,o(∩_∩)o...

    PHP and script.aculo.us Web 2.0 Application Interfaces.pdf.rar

    解压密码在:http://www.pin5i.com/showtopic-php-and-script.aculo.us-web-2.0-application-interfaces.html

    PracticalPrototypeAndScript.aculo.us

    ### Practical Prototype and Script.aculo.us:深入学习JavaScript框架Prototype #### 概述 《Practical Prototype and script.aculo.us》是一本由Prototype框架的作者Andrew Dupont编写的书籍,主要介绍如何利用...

    script.aculo.us web 2.0 javascript

    基于Prototype框架的一个非常优秀的开源Ajax框架,封装了许多控件:AotuComplete,Accordion,Slider等,很多的动画效果,还有拖拽,DOM Utility等等 刚才在Download里面Search了一下好像没有,所以传上来一个,这个...

    前端项目-scriptaculous.zip

    **前端项目-scriptaculous.zip** 是一个包含script.aculo.us库的压缩文件,这是一个历史悠久的JavaScript库,专门用于提升Web应用程序的用户界面效果。在Web开发领域,前端项目通常是涉及HTML、CSS和JavaScript的...

    ajax特效框架

    Script.aculo.us是基于JavaScript库Prototype的一个扩展,主要提供了一系列丰富的动态效果和用户界面组件。它非常适合中小型企业使用,因为它的引入可以极大地提升网站的交互性和用户体验,同时保持较低的开发成本。...

Global site tag (gtag.js) - Google Analytics