Skip to content

Commit b12d528

Browse files
scottgonzalezscottgonzalez
committed
Effects (toggle) demos: Coding standards.
1 parent a300658 commit b12d528

File tree

2 files changed

+41
-39
lines changed

2 files changed

+41
-39
lines changed

‎demos/toggle/default.html

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,54 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Effects - Toggle 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();
29+
// run the currently selected effect
30+
function runEffect() {
31+
// get effect type from
32+
var selectedEffect = $( "#effectTypes" ).val();
3333

34-
//most effect types need no options passed by default
34+
// most effect types need no options passed by default
3535
var options = {};
36-
//check if it's scale or size - they need options explicitly set
37-
if(selectedEffect == 'scale'){ options = {percent: 0}; }
38-
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
36+
// some effects have required parameters
37+
if ( selectedEffect === "scale" ) {
38+
options = { percent: 0 };
39+
} else if ( selectedEffect === "size" ) {
40+
options = { to: { width: 200, height: 60 } };
41+
}
3942

40-
//run the effect
41-
$("#effect").toggle(selectedEffect,options,500);
43+
// run the effect
44+
$( "#effect" ).toggle( selectedEffect, options, 500 );
4245
};
4346

44-
//set effect from select menu value
45-
$("#button").click(function() {
47+
// set effect from select menu value
48+
$( "#button" ).click(function() {
4649
runEffect();
4750
return false;
4851
});
49-
5052
});
5153
</script>
5254
</head>
@@ -82,10 +84,10 @@ <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
8284
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
8385
</div><!-- End demo -->
8486

85-
<div class="demo-description">
8687

87-
<p>Click the button above to preview the effect.</p>
8888

89+
<div class="demo-description">
90+
<p>Click the button above to preview the effect.</p>
8991
</div><!-- End demo-description -->
9092

9193
</body>

‎demos/toggle/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)