Skip to content

Commit fd0333b

Browse files
author
Scott Jehl
committed
added effect method folders / pages
1 parent 45d6a3c commit fd0333b

12 files changed

Lines changed: 397 additions & 0 deletions

File tree

‎demos/animate/default.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effect Methods - Animate Demo</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<link type="text/css" href="../demos.css" rel="stylesheet" />
9+
<style type="text/css">
10+
.toggler { width: 500px; height: 200px; }
11+
#button { padding: .5em 1em; text-decoration: none; }
12+
#animate { width: 240px; height: 135px; padding: 0.4em; background: #fff;}
13+
#animate h3 { margin: 0; padding: 0.4em; text-align: center; }
14+
</style>
15+
<script type="text/javascript">
16+
$(function() {
17+
$("#button").toggle(
18+
function() {
19+
$("#animate").animate({backgroundColor: '#aa0000', color: '#fff'}, 1000);
20+
},
21+
function() {
22+
$("#animate").animate({backgroundColor: '#fff', color: '#000'}, 1000);
23+
}
24+
);
25+
});
26+
</script>
27+
</head>
28+
<body>
29+
30+
<div class="demo">
31+
32+
<div class="toggler">
33+
<div id="animate" class="ui-widget-content ui-corner-all">
34+
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
35+
<p>
36+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
37+
</p>
38+
</div>
39+
</div>
40+
41+
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
42+
43+
</div><!-- End demo -->
44+
45+
<div class="demo-description">
46+
47+
<p>Click the button above to preview the effect.</p>
48+
49+
</div><!-- End demo-description -->
50+
51+
</body>
52+
</html>

‎demos/animate/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

‎demos/hide/default.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effect Methods - Hide Demo</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
9+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
<style type="text/css">
11+
.toggler { width: 500px; height: 200px; }
12+
#button { padding: .5em 1em; text-decoration: none; }
13+
#hide { width: 240px; height: 135px; padding: 0.4em; }
14+
#hide h3 { margin: 0; padding: 0.4em; text-align: center; }
15+
</style>
16+
<script type="text/javascript">
17+
$(function() {
18+
$("#button").click(function() {
19+
$('#hide').hide("bounce");
20+
});
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
26+
<div class="demo">
27+
28+
<div class="toggler">
29+
<div id="hide" class="ui-widget-content ui-corner-all">
30+
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
31+
<p>
32+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
33+
</p>
34+
</div>
35+
</div>
36+
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
37+
38+
</div><!-- End demo -->
39+
40+
<div class="demo-description">
41+
42+
<p>Click the button above to preview the effect.</p>
43+
44+
</div><!-- End demo-description -->
45+
46+
</body>
47+
</html>

‎demos/hide/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

‎demos/show/default.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effect Methods - Show Demo</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
9+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
<style type="text/css">
11+
.toggler { width: 500px; height: 200px; }
12+
#button { padding: .5em 1em; text-decoration: none; }
13+
#show { width: 240px; height: 135px; padding: 0.4em; }
14+
#show h3 { margin: 0; padding: 0.4em; text-align: center; }
15+
</style>
16+
<script type="text/javascript">
17+
$(function() {
18+
$("#button").click(function() {
19+
$("#show").show("bounce");
20+
});
21+
$('#show').hide();
22+
});
23+
</script>
24+
</head>
25+
<body>
26+
27+
<div class="demo">
28+
29+
<div class="toggler">
30+
<div id="show" class="ui-widget-content ui-corner-all">
31+
<h3 class="ui-widget-header ui-corner-all">Show</h3>
32+
<p>
33+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
34+
</p>
35+
</div>
36+
</div>
37+
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
38+
39+
40+
</div><!-- End demo -->
41+
42+
<div class="demo-description">
43+
44+
<p>Click the button above to show the effect.</p>
45+
46+
</div><!-- End demo-description -->
47+
48+
</body>
49+
</html>

‎demos/show/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

‎demos/switchClass/default.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effect Methods - Switch Class Demo</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<link type="text/css" href="../demos.css" rel="stylesheet" />
9+
<style type="text/css">
10+
.toggler { width: 500px; height: 200px; }
11+
#button { padding: .5em 1em; text-decoration: none; }
12+
#animate h3 { margin: 0; padding: 0.4em; text-align: center; }
13+
.first { width: 240px; height: 135px; padding: 0.4em; }
14+
.second { width: 480px; height: 135px; padding: 0.4em; font-size: 1.6em; }
15+
</style>
16+
<script type="text/javascript">
17+
$(function() {
18+
$("#button").toggle(
19+
function() {
20+
$("#animate").switchClass('first', 'second');
21+
},
22+
function() {
23+
$("#animate").switchClass('second', 'first');
24+
}
25+
);
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
31+
<div class="demo">
32+
33+
<div class="toggler">
34+
<div id="animate" class="first ui-widget-content ui-corner-all">
35+
<h3 class="ui-widget-header ui-corner-all">Switch Class</h3>
36+
<p>
37+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
38+
</p>
39+
</div>
40+
</div>
41+
42+
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
43+
44+
</div><!-- End demo -->
45+
46+
<div class="demo-description">
47+
48+
<p>Click the button above to preview the effect.</p>
49+
50+
</div><!-- End demo-description -->
51+
52+
</body>
53+
</html>

‎demos/switchClass/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

‎demos/toggle/default.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effect Methods - Toggle Demo</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
9+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
<style type="text/css">
11+
.toggler { width: 500px; height: 200px; }
12+
#button { padding: .5em 1em; text-decoration: none; }
13+
#toggle { width: 240px; height: 135px; padding: 0.4em; }
14+
#toggle h3 { margin: 0; padding: 0.4em; text-align: center; }
15+
</style>
16+
<script type="text/javascript">
17+
$(function() {
18+
$("#button").click(function() {
19+
$("#toggle").toggle("bounce");
20+
});
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
26+
<div class="demo">
27+
28+
<div class="toggler">
29+
<div id="toggle" class="ui-widget-content ui-corner-all">
30+
<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
31+
<p>
32+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
33+
</p>
34+
</div>
35+
</div>
36+
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
37+
</div><!-- End demo -->
38+
39+
<div class="demo-description">
40+
41+
<p>Click the button above to preview the effect.</p>
42+
43+
</div><!-- End demo-description -->
44+
45+
</body>
46+
</html>

‎demos/toggle/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)