`
wutao8818
  • 浏览: 608449 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

scriptaculous.js (1) demo

    博客分类：
  • js
JavaScriptDWRprototypeHTMLXML 
阅读更多
js 代码
  1.   
  2.   function changeColor(_selfnode){   
  3.        
  4.     if(_selfnode.checked==true){   
  5.         _selfnode.parentNode.parentNode.bgColor='white';   
  6.     }   
  7.     else{   
  8.         _selfnode.parentNode.parentNode.bgColor=_selfnode.parentNode.parentNode.parentNode.bgColor;   
  9.     }   
  10.         
  11. }   
  12.   
  13. function init(){   
  14.   new Draggable('revertbox1',{scroll:window,handle:'handle1'});   
  15.   new Draggable('revertbox2',{scroll:window,handle:'handle2'});   
  16.     _div=Builder.node('div',{id:'sub_revertbox1'});   
  17.     _table=Builder.node('table',{id:'_table'});   
  18.     _tbody=Builder.node('tbody',{id:'_tbody'});   
  19.     var cellFuncs = [   
  20.     function(data) {   
  21.         return Builder.node('input',{type:'checkbox',value:data,onclick:'changeColor(this)'})},   
  22.     function(data){   
  23.         return Builder.node('span',data);   
  24.     }   
  25.     ];   
  26.     dwr.util.addRows($(_tbody),[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe', 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ],cellFuncs);   
  27.     _table.appendChild($(_tbody));   
  28.     _div.appendChild($(_table));   
  29.     $("revertbox1").appendChild($(_div)) ;   
  30.   }   
  31.      
  32.   
  33.   window.onload=init;   
xml 代码
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  4. <script src="lib/prototype/prototype.js" type="text/javascript">  
  5. script>  
  6. <script src="lib/scriptaculous/scriptaculous.js" type=   
  7. "text/javascript">  
  8. script>  
  9. <script src="lib/util.js" type="text/javascript">script>  
  10. <script src="lib/display.js" type="text/javascript">  
  11. script>  
  12.   
  13.         <title>title>  
  14.     head>  
  15.   
  16.     <body>  
  17.         <div id="revertbox1" class="box1" style=   
  18.         "opacity:1;z-index:1000;width:150px;background:#bfb;">  
  19.             <span class="handle1" id="title_span" style=   
  20.             "background:#bbb;width:150px;">titlespan><br>  
  21.               
  22.         div>  
  23.     
  24.         <div id="revertbox2" class="box" style=   
  25.         "opacity:1;z-index:1001;width:150px;height:150px;background:#abc;">  
  26.             <span id="handle2">drag herespan><br>  
  27.         div>  
  28.             
  29.     body>  
  30. 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,最近竟然要用这个啦
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics