scriptaculous.js (1) demo - 要耐得住寂寞 - ITeye博客

`

wutao8818

浏览: 618729 次
性别:
来自: 杭州

最近访客更多访客>>

KevinTeng

malson

rapin

shi007

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

koreajapan03：楼主啊，好人啊，帮我解决了问题，谢谢
自定义过滤器时，不能再使用<sec:authorize url="">问题
snailprince：请问有同一页面，多个上传实例的例子吗
webuploader用java实现上传
wutao8818：姚小呵写道如何接收server返回的参数呢？例如你返回的是“ ...
webuploader用java实现上传
姚小呵：如何接收server返回的参数呢？例如你返回的是“1”，上传的 ...
webuploader用java实现上传
zycjf2009：你好，我想用jplayer做一个简单的播放器，但是因为对js不 ...
jplayer 实战

scriptaculous.js (1) demo

博客分类：

js

JavaScript DWR prototype HTML XML

阅读更多

js 代码

function changeColor(_selfnode){
if(_selfnode.checked==true){
_selfnode.parentNode.parentNode.bgColor='white';
}
else{
_selfnode.parentNode.parentNode.bgColor=_selfnode.parentNode.parentNode.parentNode.bgColor;
}
}
function init(){
new Draggable('revertbox1',{scroll:window,handle:'handle1'});
new Draggable('revertbox2',{scroll:window,handle:'handle2'});
_div=Builder.node('div',{id:'sub_revertbox1'});
_table=Builder.node('table',{id:'_table'});
_tbody=Builder.node('tbody',{id:'_tbody'});
var cellFuncs = [
function(data) {
return Builder.node('input',{type:'checkbox',value:data,onclick:'changeColor(this)'})},
function(data){
return Builder.node('span',data);
}
];
dwr.util.addRows($(_tbody),[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe', 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ],cellFuncs);
_table.appendChild($(_tbody));
_div.appendChild($(_table));
$("revertbox1").appendChild($(_div)) ;
}
window.onload=init;

xml 代码

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="lib/prototype/prototype.js" type="text/javascript">
script>
<script src="lib/scriptaculous/scriptaculous.js" type=
"text/javascript">
script>
<script src="lib/util.js" type="text/javascript">script>
<script src="lib/display.js" type="text/javascript">
script>
<title>title>
head>
<body>
<div id="revertbox1" class="box1" style=
"opacity:1;z-index:1000;width:150px;background:#bfb;">
<span class="handle1" id="title_span" style=
"background:#bbb;width:150px;">titlespan><br>
div>
<div id="revertbox2" class="box" style=
"opacity:1;z-index:1001;width:150px;height:150px;background:#abc;">
<span id="handle2">drag herespan><br>
div>
body>
html>

scriptaculous.js 1年前就听到这个名字，一直没用过。最近一个项目里用到拖拽，不会写。所以就想到这个包。用起来真方便。

new Draggable('revertbox1',{scroll:window,handle:'handle1'});
new Draggable('revertbox2',{scroll:window,handle:'handle2'});

这样就声明了2个可拖拽对象。结束。是不是特方便? 还有拖拽感应。不过要用到另一个对象。这个例子用没有用到

Builder.node('div',{id:'sub_revertbox1'});创建对象。类似createElement.

上班时间少些一些，未完待续。

分享到：

理解多线程编程的含义 | vba,最近竟然要用这个啦

2007-09-19 14:25
浏览 2638
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

scriptaculous.js: Scriptaculous是基于prototype.js框架的JS效果。 Scriptaculous包含了6个.js,scriptaculous.js是主文件.

.prototype.and.scriptaculous.taking.the.pain.out.of.javascript: 《.prototype.and.scriptaculous.taking.the.pain.out.of.javascript》是一本专注于使用Prototype和Scriptaculous库简化JavaScript开发的资源，对于那些希望通过AJAX技术提升网页交互体验的开发者来说，这本书无疑是...

Scriptaculous.chm: Scriptaculous.js是一个基于JavaScript的视觉效果库，它为Web开发者提供了丰富的动态效果和用户交互功能。这个库是JavaScript社区中的一个亮点，尤其在网页动态化和增强用户体验方面表现突出。本文将深入探讨...

scriptaculous-js-1.7.1_beta3.zip: Scriptaculous.js是一款基于JavaScript的库，专为与Prototype框架协同工作而设计，旨在提供丰富的动态效果和交互性。它为开发者提供了许多易于使用的Ajax特效，使得网页应用的用户体验更加生动和吸引人。在本文中，...

Manning.Prototype.and.Scriptaculous.in.Action: 1. **Prototype**: Prototype是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作，提供了许多实用的函数和方法，如元素选择、事件处理和Ajax通信等。Prototype的核心是其强大的类系统，它引入了类的概念到...

scriptaculous-js-1.8.1.rar: 《Scriptaculous.js 1.8.1：Ajax与JavaScript框架的魅力解析》 Scriptaculous.js，一个在JavaScript世界中颇具影响力的库，以其强大的动画效果和丰富的用户交互功能，为Web开发带来了革命性的变化。这个名为...

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

Manning - Prototype.and.Scriptaculous.in.Action: 这本书主要介绍了两个重要的 JavaScript 库：Prototype 和 Scriptaculous。这两个库在 Web 开发领域扮演着非常重要的角色，尤其是在 AJAX 技术的应用方面。 **Prototype** 是一个轻量级的 JavaScript 框架，它的...

scriptaculous-js-1.8.2 最近完整打包下载: scriptaculous 　它是在javascrīpt程序库prototype之上构建的,能提供Ajax支持,主要致力于提供高交互性的可视化组件,提升Ajax应用的层次.在HTML页面中需要引用prototype和scrīptaculous程序库。　视觉特效　...

orange.js 1.01: 这个库可能是基于其他几个知名的JavaScript框架和库构建的，如Prototype、Scriptaculous以及Rico.js，这些都在压缩包的文件列表中有所体现。让我们逐一深入了解一下这些文件及其相关知识点。 1. **Prototype.js**：...

摘《谈谈scriptaculous动画效果库effect.js(原理和使用)》: 在Web开发中，动态效果是提升用户体验的重要手段，而JavaScript库scriptaculous中的effect.js模块则是实现这些效果的利器。本文将深入探讨effect.js的工作原理及使用方法，帮助开发者更好地理解和应用这个强大的工具...

scriptaculous-js-1.7.0.tar.gz(part2): **Scriptaculous JavaScript框架** Scriptaculous是一款基于 Prototype JavaScript 库的动态效果和用户界面库。这个框架的主要目标是提供一套简单易用的API，帮助开发者轻松创建丰富的用户体验和交互式网页应用。在...

JS写的图片局部动态截取: 例如，`cropper.js`是一个流行的JavaScript库，它提供了这些功能并简化了实现过程。你可以下载提供的"JS-cropper"压缩包，查看里面的代码示例，学习如何使用这样的库来实现更高级的图片截取功能。总结起来，...

scriptaculous-js-1.8.2.tar.bz2: scriptaculous-js-1.8.2.tar.bz2 scriptaculous-js-1.8.2.tar.bz2 scriptaculous-js-1.8.2.tar.bz2 scriptaculous-js-1.8.2.tar.bz2scriptaculous-js-1.8.2.tar.bz2 scriptaculous-js-1.8.2.tar.bz2

scriptaculous-js-1.9.0: 总的来说，Scriptaculous-js-1.9.0是为网页开发提供动态效果和交互性的一站式解决方案，它与Prototype的结合使得JavaScript编程变得更加简单且功能强大。无论是新手还是经验丰富的开发者，都可以借助这个库快速构建...

scriptaculous-js-1.7.0.tar.bz2: scriptaculous-js-1.7.0.tar.bz2 scriptaculous框架第三部分

scriptaculous-js-1.8.3: 1. **源代码文件**：包含.js文件，如scriptaculous.js和prototype.js，这是核心库的文件，提供基础的Ajax功能和动画效果。开发人员可以直接在网页中引用这些文件来使用Scriptaculous的功能。 2. **特效和组件**：...

scriptaculous-js-1.8.2 类库: Prototype.js是Scriptaculous的基础，是一个强大的JavaScript框架，主要目标是简化DOM操作，提高代码可读性和可维护性。它提供了许多实用的工具函数，如元素选择、事件处理、对象扩展等。Prototype.js还引入了类的...

Global site tag (gtag.js) - Google Analytics