posts - 32, comments - 153, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

第2篇,Rico

Posted on 2006-11-24 16:17 Zou Ang 阅读(328) 评论(0)  编辑  收藏 所属分类:
下午尝试使用Rico,实现了渐变和拖拽.主要是比较在意它的效果功能..没太多了解对Ajax的支持.下面是渐变的代码
Open Rico:OpenRico.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="../Rico/prototype.js"></script>
<script language="javascript" src="../Rico/rico.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Fade</title>
<style type="text/css">
#fademe
{
position
:absolute;
top
:0px;
left
:0px;
background-color
:#0066FF;
height
:200px;
width
:200px;
}

#fademe h1
{
text-align
:center;
}

#fademe button
{
position
:absolute;
top
:180;
left
:90px;
text-align
:center;
}

#status
{
position
:absolute;
top
:0px;
left
:0px;
background-color
:#FF9966;
text-align
:center;
font-size
:10pt;
font-family
:Verdana, Arial, Helvetica, sans-serif;
visibility
:hidden;
}

</style>
<script language="javascript">
    
var isFaded = false;
    
function toggleEffect(){
        
var t;
        
if(isFaded){
            t 
= 1;
        }
else{
            t 
= 0;
        }

        
new Rico.Effect.FadeTo('fademe',t,500,10,{complete:function(){ showStatus();}});
    }

    
function showStatus(){
        
var status = document.getElementById('status');
        
if(isFaded){
            status.style.visibility
="hidden";
            isFaded 
= false;
        }
else{
            status.style.visibility
="visible";
            status.innerHTML
="<input type='button' value='重试' onclick='toggleEffect();'/>";
            isFaded 
= true;
        }

    }

</script>
</head>
<body>

    
<div id="fademe">
        
<h1>
            Fade Me!
        
</h1>
        
<div id="button">
            
<input type="button" value="Fade" onclick="toggleEffect();";/>
        
</div>
    
</div>
    
<div id="status">
        
<h3>
            完成
        
</h3>
    
</div>
</body>
</html>

只有注册用户登录后才能发表评论。


网站导航: