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.οnlοad=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.
上班时间少些一些,未完待续。