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

第2篇,Rico

Posted on 2006-11-24 16:17 Zou Ang 阅读(343) 评论(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>

只有注册用户登录后才能发表评论。
网站导航: