拼吾爱程序人生其他编程javascript 利用免费javascript框架构建强大web接口界面

1  /  1  页   1 跳转 查看:1335

利用免费javascript框架构建强大web接口界面

利用免费javascript框架构建强大web接口界面

现今,随着web应用方面提供了日益丰富的免费工具、代码等,构建web应用已经变得越来越流行。一些资源已经被开发出来,并经过测试,所以你可以用来快速地增加应用特性。一个典型的例子是script.aculo.us(或者scriptaculous)网站,该网站提供了用于构建强大web应用的javascript库,重要的是这些资源都是免费的。本周,我们将带你对该网站和它提供的资源进行亲密接触。
它是什么?
Scriptaculous是一种用于构建动态web 2.0接口的框架。它使用了另外一个称为prototype的免费框架。Scriptaculous简化了输入和输出以实现基于AJAX的web接口,允许你轻松地添加新的或传统的数据控件和工具用来和DOM及javaScript一起工作。
为什么使用它?
AJAX是一个重要的技术,但是构建基于AJAX的应用是件令人迷惑和费时的事情。Scriptsculous框架使得在应用中添加基于AJAX的特性更加容易可行,因为所有的开发和测试都已经完成,你可以将时间投入到更重要的任务中去。
开始使用
使用scriptaculous框架的第一步是下载和安装。下载的是一个压缩文件,该文件包含用于测试和演示的javascript文件和各种各样的HTML文件。Javascript源文件是最重要的,下面是各种源文件列表:
libprototype.js:用于原型javascript框架的源代码。
scrbulder.js:允许你轻松创建动态DOM对象。
srccontrols.js:包含和传统数据控件一起工作的核心组件。
srcdragdrop.js:提供使用传统数据控件实现拖放相关功能的代码。
srceffects.js:可视化效果库包含所有你需要添加到web应用的高价javascript新控件。 srcscriptaculous.js:实现sciptaculous框架的基代码库。
srcslider.js:提供实现滑动数据控件的代码。
前面的列表包含每个文件安装时的默认目录。你可以将这些javascript文件放到web服务器的任何位置,但是使用默认目录将会使得和示例一起工作更简单些。
你可能不理解为什么在一个web页头部包含这些文件。因为,全部库文件(列表中的所有文件)占用大约150KB空间,两个核心文件Prototype.js和scriptaculous.js总计达50KB,所有其它组合将会在50KB到150KB之间,这取决于你要使用的文件。
默认情况下,scriptaculous.js加载其它用于效果、拖放、滑动和所有其它scriptaculous特性的javascript文件。在加载scriptaculous 脚本文件时,你可以限制通过把脚本加入到逗号隔开的列表加载的其它脚本。

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [javascript] 的这些文章也感兴趣:

用javascript/css实现GridView行背景色交替、点击行变色  在客户端设置cooke和获取cooke的函数
全面理解javascript的caller,callee,call,apply概念  判断数字的正则表达式
JS实现图片的等比缩放  使用javascript动态调用样式表代码
使用JavaScript检测浏览器的相关特性  为JavaScript程序添加客户端不可见的注释
Dojo Toolkit的联合创建者Dylan Schiemann访谈录  调试javascript的好方法
用javascript 转换网站外部链接样式  Javascript实例教程(15) 日期函数
用javascript在客户端调用CRM Web Service  JavaScript方法和技巧大全
js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称  javascript弹出窗口问题总结
用JS得到字符串中出现次数最多的字母  技术摘要:如何编写安全的Java代码
Javascript实例教程(5) 在一个表单中设置和检查Cookies  一个很通用的javascript的下拉菜单
 

回复:利用免费javascript框架构建强大web接口界面

使用它

一旦你已经下载并安装了框架,就可以在网页中轻松使用它。第一步是在网页的头部连接到javascript源文件,见列表A(第三页)。

可以通过HTML标记来访问框架提供的各种函数。查看安装在框架中的一个示例文件你可以获得更好的理解。作为一个示例,我选择默认安装时testfunctional目录下的slider.html文件来说明,该文件的完整内容太大,,所以不能全部在这里列出,但是我们可以查看在一个页面上加载一个滑动控件的一部分。标准水平滑动控件为:

<script type="text/javascript">

// <![CDATA[

new Control.Slider('handle1','track1',{

sliderValue:0.5,

onSlide:function(v){$('debug1').innerHTML='slide: '+v},

onChange:function(v){$('debug1').innerHTML='changed! '+v}});

// ]]>

</script>

使用CDATA部分回避当在javascript中使用诸如<和>字符时面对的问题。代码用来创建一个新的滑动控件(通过控件类)并设置它的初始位置及添加滑动块句柄和改变事件。同时,框架函数可以通过单击事件轻松使用。

文档化

很多免费工具的一个缺陷是缺乏文档和示例。Scriptaculous框架通过它的wiki提供大量示例代码和简单文档。此外,一个快速Google搜索引擎域会更有帮助。一个很好的例子是各种各样的样式表可用来快速引用使用框架的表。

在test目录下的functional子目录中框架包含大量示例集,你可以更仔细地分析test文件,这样会对如何在web应用中使用框架函数有更好的理解。此外,scriptaculous网站的示例部分提供了大量的例子。

许可问题

使用免费或第三方工具的另一个问题是在商业产品中使用它们,这通常涉及到许可问题,但是使用这一工具不涉及此问题。简单说就是,你可以免费在任何地方使用scriptaculous框架,只要你的版权声明中没有删除javascript源代码文件。

谁使用它?

在网络中有大量的免费工具和库文件,你可以通过核查使用它们的用户和如何使用,以了解工具的可用性。Scriptaculous框架目前被各个网站以各种方式来使用,这些网站包括:Apple、The Globe and Mail newspaper、NBC News和Basecamp。

起点

当用户的期望增加时,项目开发时间继续在缩短,但是免费工具和框架使得添加新特性的应用变得更容易。Scriptaculous是一个使用框架的很好的例子,它允许简单的添加强大的基于AJAX用户接口特性到web 2.0应用中。在下周的文章中我会提供更多的使用示例。
 
1  /  1  页   1 跳转

快速回复帖子

标题
禁用 URL 识别
禁用表情
禁用 Discuz!NT 代码
使用个人签名
  [完成后可按 Ctrl+Enter 无刷新发布]  

版权所有 拼吾爱程序人生    在线留言

Powered by Discuz!NT 2.1.202   Copyright © 2001-2008 Comsenz Inc. 鄂ICP备07500843号
返顶部