User:Vinoo/2014Design6

From 2014.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
<html>
<html>
-
<style type="text/css">
+
<head>
-
#button {
+
<meta charset="utf-8" />
-
padding: .5em 1em;
+
<title>Demo</title>
-
text-decoration: none;
+
</head>
-
}
+
<body>
-
#effect {
+
<a href="http://jquery.com/">jQuery</a>
-
position: relative;
+
<script src="jquery.js"></script>
-
width: 240px;
+
-
height: 135px;
+
-
padding: 0.4em;
+
-
}
+
-
#effect h3 {
+
-
margin: 0;
+
-
padding: 0.4em;
+
-
text-align: center;
+
-
}
+
-
</style>
+
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
-
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+
<script>
<script>
-
$(function() {
+
// Your code goes here.
-
// run the currently selected effect
+
-
function runEffect() {
+
-
// get effect type from
+
-
var selectedEffect = $( "#effectTypes" ).val();
+
-
// most effect types need no options passed by default
+
-
var options = {};
+
-
// some effects have required parameters
+
-
if ( selectedEffect === "scale" ) {
+
-
options = { percent: 0 };
+
-
} else if ( selectedEffect === "size" ) {
+
-
options = { to: { width: 200, height: 60 } };
+
-
}
+
-
// run the effect
+
-
$( "#effect" ).toggle( selectedEffect, options, 500 );
+
-
};
+
-
// set effect from select menu value
+
-
$( "#button" ).click(function() {
+
-
runEffect();
+
-
return false;
+
-
});
+
-
});
+
</script>
</script>
-
 
+
</body>
-
<div class="toggler">
+
-
<div id="effect" class="ui-widget-content ui-corner-all">
+
-
<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
+
-
<p>
+
-
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
 
+
-
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
</html>
</html>

Revision as of 16:51, 27 January 2014

Demo jQuery