http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FExt_JS%2FAnimation
JavaScript DHTML/Ext JS/Animation - История изменений
2026-04-04T06:10:26Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Animation&diff=2396&oldid=prev
в 09:59, 26 мая 2010
2010-05-26T09:59:51Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:59, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Animation&diff=2397&oldid=prev
Admin: 1 версия
2010-05-26T07:21:22Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Animated window display==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
<br />
Ext.onReady(function(){<br />
<br />
var w = new Ext.Window({<br />
height: 500,<br />
width: 500<br />
});<br />
w.show("animTarget", function() { alert("alert"); }, this);<br />
});<br />
</script><br />
<body><br />
<div id="animTarget"><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: Move Div tag to a new position==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
var newX = 50;<br />
var newY = 10;<br />
<br />
myDiv1.moveTo(newX, newY, {<br />
callback : function() {<br />
var msgX = Math.ceil(this.getX());<br />
var msgY= Math.ceil(this.getY()); <br />
var msg = "X = " + msgX + " Y = " + msgY;<br />
this.update(msg);<br />
}<br />
});<br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Block and inline frame animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").frame("ff0000", 3);<br />
Ext.get("inline").frame("ff0000", 3);<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Fadein block and inline tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").fadeOut();<br />
Ext.get("inline").fadeOut();<br />
<br />
Ext.get("block").fadeIn();<br />
Ext.get("inline").fadeIn();<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Fade out block and inline tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").fadeOut();<br />
Ext.get("inline").fadeOut();<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Fly away ghost==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").ghost();<br />
Ext.get("inline").ghost("tr");<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Hide panel with slidein==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myButton = new Ext.Button({<br />
text : "hide me",<br />
handler : function() {<br />
myPanel.el.switchOff({<br />
callback : function() {<br />
myPanel.el.slideIn.defer(500, myPanel.el, []);<br />
}<br />
});<br />
} <br />
});<br />
myPanel = new Ext.Panel({<br />
width : 200,<br />
height : 100,<br />
title : "Title me",<br />
frame : true,<br />
renderTo : Ext.getBody(), <br />
items : myButton <br />
});<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Highlight block and inline tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").highlight();<br />
Ext.get("inline").highlight();<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Puff inline and block tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").puff();<br />
Ext.get("inline").puff();<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Scale animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").scale(50, 50);<br />
Ext.get("inline").scale(300, 20);<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Shift a tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").shift({x: 5, y: 300, width: 300, height: 200});<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Slide in animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").slideIn();<br />
Ext.get("inline").slideIn("tl");<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Slide out animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").slideOut();<br />
Ext.get("inline").slideOut("tl");<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Switchoff Animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<script type="text/javascript"><br />
Ext.onReady(function(){<br />
<br />
Ext.get("block").switchOff();<br />
Ext.get("inline").switchOff();<br />
});<br />
</script><br />
<body><br />
<div id="container"> <br />
<div id="block"><br />
<p>I Am A Block Element</p><br />
</div><br />
<span id="inline">I Am An Inline Element</span><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source></div>
Admin