http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FMochkit%2FEffect
JavaScript DHTML/Mochkit/Effect - История изменений
2026-04-04T15:28:51Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Mochkit/Effect&diff=3270&oldid=prev
в 10:00, 26 мая 2010
2010-05-26T10:00:07Z
<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;">Версия 10:00, 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/Mochkit/Effect&diff=3271&oldid=prev
Admin: 1 версия
2010-05-26T07:25:25Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Demo of MochiKit Visual Elements==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
MochiKit is dual-licensed software. It is available under the terms of the<br />
MIT License, or the Academic Free License version 2.1. The full text of<br />
each license is included below.<br />
--><br />
<!-- Code revised from MochiKit demo code --><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<title>Demo of MochiKit Visual Elements</title><br />
<style type="text/css"><br />
h1 { background: darkgreen; color: yellow; text-align: center; }<br />
h2 { background: darkgreen; color: yellow; padding-top: 0.25em;}<br />
.invisible { display: none; }<br />
<br />
<br />
</style><br />
<script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script><br />
<script type="text/javascript"><br />
var roundedCornersOnLoad = function () {<br />
swapDOM("visual_version", SPAN(null, MochiKit.Visual.VERSION));<br />
roundClass("h1", null);<br />
roundClass("h2", null, {corners: "bottom"});<br />
};<br />
addLoadEvent(roundedCornersOnLoad);<br />
// rewrite the view-source links<br />
addLoadEvent(function () {<br />
var elems = getElementsByTagAndClassName("A", "view-source");<br />
var page = "rounded_corners/";<br />
for (var i = 0; i < elems.length; i++) {<br />
var elem = elems[i];<br />
var href = elem.href.split(/\//).pop();<br />
elem.target = "_blank";<br />
elem.href = "../view-source/view-source.html#" + page + href;<br />
}<br />
});<br />
<br />
</script><br />
</head><br />
<body><br />
<h1>MochiKit.Visual <span id="visual_version"></span></h1><br />
<h2>Rounded Corners</h2><br />
<p><br />
This example demonstrates the rounded corners functionality of <br />
<a href="http://mochikit.ru">MochiKit</a>"s<br />
<a href="../../doc/html/lib/MochiKit/Visual.html">MochiKit.Visual</a>.<br />
</p><br />
<p><br />
The heading at the top of this page should have all four corners<br />
rounded. The heading for this section should just have the bottom<br />
corners rounded.<br />
</p><br />
View Source:<br />
<ul><br />
<li><a href="rounded_corners.js" class="view-source">rounded_corners.js</a></li><br />
<li><a href="index.html" class="view-source">index.html</a></li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Full Effects Test Suite==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
MochiKit is dual-licensed software. It is available under the terms of the<br />
MIT License, or the Academic Free License version 2.1. The full text of<br />
each license is included below.<br />
--><br />
<!-- Code revised from MochiKit demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Full Effects Test Suite</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<link rel="stylesheet" href="MochiKit-1.4.2/include/css/documentation.css" type="text/css" /><br />
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script><br />
<style type="text/css"><br />
#demo {<br />
}<br />
#demo li {<br />
color: #8ba726;<br />
font-size: 1.2em;<br />
}<br />
#democontainer {<br />
margin: 30px 5px 0px 5px;<br />
}<br />
#demoall {<br />
position: absolute;<br />
top: 250px;<br />
left: 400px;<br />
font-size: 20px;<br />
background: #f3f3f3;<br />
color: #1C1D1F; <br />
text-align: center;<br />
border: 1px solid #ccc;<br />
width: 150px;<br />
height: 150px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="document"><br />
<div class="section"><br />
<h1>Full Effects Test Suite</h1><br />
<ul id="demo"><br />
<li onclick="setStyle("demoall", {"display": "block"});fade("demoall")">fade</li><br />
<li onclick="setStyle("demoall", {"display": "none"});appear("demoall")">appear</li><br />
<li onclick="setStyle("demoall", {"display": "block"});puff("demoall")">puff</li><br />
<li onclick="blindDown("demoall")">blindDown</li><br />
<li onclick="setStyle("demoall", {"display": "block"});blindUp("demoall")">blindUp</li><br />
<li onclick="switchOff("demoall")">switchOff</li><br />
<li onclick="slideDown("demoall")">slideDown</li><br />
<li onclick="slideUp("demoall")">slideUp</li><br />
<li onclick="setStyle("demoall", {"display": "block"});dropOut("demoall", {"distance": 500})">dropOut</li><br />
<li onclick="setStyle("demoall", {"display": "block"});shake("demoall")">shake</li><br />
<li onclick="setStyle("demoall", {"display": "block"});pulsate("demoall")">pulsate</li><br />
<li onclick="setStyle("demoall", {"display": "block"});squish("demoall")">squish</li><br />
<li onclick="setStyle("demoall", {"display": "block"});fold("demoall")">fold</li><br />
<li onclick="grow("demoall")">grow</li><br />
<li onclick="setStyle("demoall", {"display": "block"});shrink("demoall")">shrink</li><br />
<li onclick="setStyle("demoall", {"display": "block"});Highlight("demoall", {startcolor: "#ffff33"})">Highlight</li><br />
<li onclick="setStyle("demoall", {"display": "block"});Morph("demoall", {"style": {"font-size": "3px"}, "queue": "start"});Morph("demoall", {"style": {"font-size": "20px"}, "queue": "end"});">Morph font</li><br />
<li onclick="setStyle("demoall", {"display": "block"});Morph("demoall", {"style": {"background-color": "red"}, "queue": "start"});Morph("demoall", {"style": {"background-color": "#f3f3f3"}, "queue": "end"});">Morph color</li><br />
<li onclick="toggle("demoall", "blind")">toggle (blind)</li><br />
<li onclick="toggle("demoall", "slide")">toggle (slide)</li><br />
<li onclick="toggle("demoall", "appear")">toggle (appear)</li><br />
<li onclick="toggle("demoall", "size")">toggle (size)</li><br />
</ul><br />
<div id="demoall"><br />
<div id="democontainer">Click on one of the left to see the effect</div><br />
</div><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Test Effects==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
MochiKit is dual-licensed software. It is available under the terms of the<br />
MIT License, or the Academic Free License version 2.1. The full text of<br />
each license is included below.<br />
--><br />
<!-- Code revised from MochiKit demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Test Effects</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<style type="text/css"><br />
<br />
h3 {<br />
clear: both;<br />
}<br />
.example {<br />
font-size: 1.0em;<br />
float: left;<br />
margin-right: 10px;<br />
margin-bottom: 10px;<br />
width: 112px;<br />
height: 112px;<br />
border: 4px solid #669;<br />
background-color: #ccf;<br />
text-align: center;<br />
padding: 1em 0.2em 0.2em 0.2em;<br />
}<br />
.demo {<br />
clear: both;<br />
}<br />
</style> <br />
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script><br />
<script src="MochiKit-1.4.2/lib/MochiKit/Position.js" type="text/javascript"></script><br />
<script src="MochiKit-1.4.2/lib/MochiKit/Visual.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
function showEffect() {<br />
f = document.forms[0];<br />
v = f["effect"].value;<br />
if (v.substring(0, 1) == "+") {<br />
v = "MochiKit.Visual.toggle("demo-all","" + v.substring(1) + """;<br />
} else {<br />
v = "MochiKit.Visual." + v + "("demo-all"";<br />
}<br />
if (f["slow"].checked) {<br />
v += ",{duration:4}";<br />
}<br />
v += ")";<br />
var v = eval(v);<br />
}<br />
function resetBox() {<br />
e = MochiKit.DOM.getElement("demo-all");<br />
MochiKit.Visual.appear(e);<br />
MochiKit.Style.setStyle(e, {});<br />
}<br />
</script><br />
</head><br />
<body><br />
<h3>Here are demos of all combination effects:</h3><br />
<div class="demo"><br />
<div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear("demo-effect-fade")"><br />
<span>Click for Visual.appear demo</span><br />
</div><br />
<div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)"><br />
<span>Click for Visual.fade demo</span><br />
</div><br />
<div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)"><br />
<span>Click for Visual.puff demo</span><br />
</div><br />
<div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)"><br />
<span>Click for Visual.blindDown demo</span><br />
</div><br />
<div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)"><br />
<span>Click for Visual.blindUp demo</span><br />
</div><br />
<div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)"><br />
<span>Click for Visual.switchOff demo</span><br />
</div><br />
<div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"><br />
<span>Click for Visual.slideDown demo</span><br />
</div><br />
<div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"><br />
<span>Click for Visual.slideUp demo</span><br />
</div><br />
<div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)"><br />
<span>Click for Visual.dropOut demo</span><br />
</div><br />
<div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)"><br />
<span>Click for Visual.shake demo</span><br />
</div><br />
<div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)"><br />
<span>Click for Visual.pulsate demo</span><br />
</div><br />
<div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)"><br />
<span>Click for Visual.squish demo</span><br />
</div><br />
<div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)"><br />
<span>Click for Visual.fold demo</span><br />
</div><br />
<div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)"><br />
<span>Click for Visual.grow demo</span><br />
</div><br />
<div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)"><br />
<span>Click for Visual.shrink demo</span><br />
</div><br />
<div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)"><br />
<span>Click for Visual.Highlight demo</span><br />
</div><br />
</div><br />
<h3>Here are all demos on one single element:</h3><br />
<div id="demo-all" class="example" onclick="showEffect()"><br />
<span>Click to see the selected effect</span><br />
</div><br />
<form action="" style="margin-left:140px;height:150px;"><br />
<fieldset style="border:none;"><br />
<select name="effect" size="1"><br />
<optgroup label="Single effects"><br />
<option value="appear">appear</option><br />
<option value="fade">fade</option><br />
<option value="puff">puff</option><br />
<option value="blindDown">blindDown</option><br />
<option value="blindUp">blindUp</option><br />
<option value="slideDown">slideDown</option><br />
<option value="slideUp">slideUp</option><br />
<option value="switchOff">switchOff</option><br />
<option value="dropOut">dropOut</option><br />
<option value="shake">shake</option><br />
<option value="pulsate">pulsate</option><br />
<option value="squish">squish</option><br />
<option value="fold">fold</option><br />
<option value="grow">grow</option><br />
<option value="shrink">shrink</option><br />
<option value="Highlight">Highlight</option><br />
</optgroup><br />
<optgroup label="Toggle effects"><br />
<option value="+appear">appear</option><br />
<option value="+blind">blind</option><br />
<option value="+slide">slide</option><br />
<option value="+size">size</option><br />
</optgroup><br />
</select><br />
&nbsp;<br />
<input type="checkbox" name="slow"/> in slow-motion<br />
</fieldset><br />
<fieldset style="border:none;"><br />
<input type="button" name="show" value="Click to show effect" onclick="showEffect()"/><br />
<input type="button" name="show" value="Click to reset box" onclick="resetBox()"/><br />
</fieldset><br />
</form><br />
<div class="demo"><br />
<h3>Links to other samples:</h3><br />
<ul style="float:left;margin-top:0;"><br />
<li><a href="effects_bigslide.html">Big slide effects</a></li><br />
<li><a href="effects_slide.html">Slide effects</a></li><br />
<li><a href="effects_blind.html">Blind effects</a></li><br />
<li><a href="effects_blindslide.html">Blind/Slide effects</a></li><br />
<li><a href="effects_fadeappear.html">Fade/Appear effects</a></li><br />
</ul><br />
<ul style="float:left;margin-top:0"><br />
<li><a href="effects_onload.html">Onload effects</a></li><br />
<li><a href="effects_scroll.html">Scroll effects</a></li><br />
<li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li><br />
<li><a href="effects_queue.html">Queue effects</a></li><br />
<li><a href="effects_queue_limit.html">Queue limit effects</a></li><br />
</ul><br />
</div><br />
<div class="demo"/><br />
</body><br />
</html><br />
<br />
</source></div>
Admin