Skip to content

Commit 99b71a5

Browse files
scottgonzalezscottgonzalez
committed
Effects (show): coding standards.
1 parent 0351763 commit 99b71a5

File tree

2 files changed

+50
-49
lines changed

2 files changed

+50
-49
lines changed

‎demos/show/default.html

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,63 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Effects - Show Demo</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
14-
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
15-
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
16-
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
17-
<script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
18-
<script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
19-
<script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
20-
<link type="text/css" href="../demos.css" rel="stylesheet" />
21-
<style type="text/css">
22-
.toggler { width: 500px; height: 200px; }
23-
#button { padding: .5em 1em; text-decoration: none; }
24-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
25-
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.effects.core.js"></script>
9+
<script src="../../ui/jquery.effects.blind.js"></script>
10+
<script src="../../ui/jquery.effects.bounce.js"></script>
11+
<script src="../../ui/jquery.effects.clip.js"></script>
12+
<script src="../../ui/jquery.effects.drop.js"></script>
13+
<script src="../../ui/jquery.effects.explode.js"></script>
14+
<script src="../../ui/jquery.effects.fold.js"></script>
15+
<script src="../../ui/jquery.effects.highlight.js"></script>
16+
<script src="../../ui/jquery.effects.pulsate.js"></script>
17+
<script src="../../ui/jquery.effects.scale.js"></script>
18+
<script src="../../ui/jquery.effects.shake.js"></script>
19+
<script src="../../ui/jquery.effects.slide.js"></script>
20+
<link rel="stylesheet" href="../demos.css">
21+
<style>
22+
.toggler { width: 500px; height: 200px; }
23+
#button { padding: .5em 1em; text-decoration: none; }
24+
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
25+
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2626
</style>
27-
<script type="text/javascript">
27+
<script>
2828
$(function() {
29+
// run the currently selected effect
30+
function runEffect() {
31+
// get effect type from
32+
var selectedEffect = $( "#effectTypes" ).val();
2933

30-
//run the currently selected effect
31-
function runEffect(){
32-
//get effect type from
33-
var selectedEffect = $('#effectTypes').val();
34-
35-
//most effect types need no options passed by default
34+
// most effect types need no options passed by default
3635
var options = {};
37-
//check if it's scale or size - they need options explicitly set
38-
if(selectedEffect == 'scale'){ options = {percent: 100}; }
39-
else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; }
40-
41-
//run the effect
42-
$("#effect").show(selectedEffect,options,500,callback);
36+
// some effects have required parameters
37+
if ( selectedEffect === "scale" ) {
38+
options = { percent: 100 };
39+
} else if ( selectedEffect === "size" ) {
40+
options = { to: { width: 280, height: 185 } };
41+
}
42+
43+
// run the effect
44+
$( "#effect" ).show( selectedEffect, options, 500, callback );
4345
};
44-
46+
4547
//callback function to bring a hidden box back
46-
function callback(){
47-
setTimeout(function(){
48-
$("#effect:visible").removeAttr('style').hide().fadeOut();
49-
}, 1000);
48+
function callback() {
49+
setTimeout(function() {
50+
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
51+
}, 1000 );
5052
};
51-
52-
//set effect from select menu value
53-
$("#button").click(function() {
53+
54+
// set effect from select menu value
55+
$( "#button" ).click(function() {
5456
runEffect();
5557
return false;
5658
});
57-
58-
$("#effect").hide();
59+
60+
$( "#effect" ).hide();
5961
});
6062
</script>
6163
</head>
@@ -90,13 +92,12 @@ <h3 class="ui-widget-header ui-corner-all">Show</h3>
9092

9193
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
9294

93-
9495
</div><!-- End demo -->
9596

96-
<div class="demo-description">
9797

98-
<p>Click the button above to preview the effect.</p>
9998

99+
<div class="demo-description">
100+
<p>Click the button above to preview the effect.</p>
100101
</div><!-- End demo-description -->
101102

102103
</body>

‎demos/show/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Effects Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

0 commit comments

Comments
 (0)