1
0
mirror of https://github.com/owncloudarchive/contacts.git synced 2024-12-11 22:24:32 +01:00
OwncloudContactsOfficial/vendor/ui-multiselect/demos/animations.htm
LEDfan 8c3d7ccdba install multi-select and combobox via bower
Remove old combobox

user bower for onfontresize

Add jcrop + md5

Add files to scrutinizer ignore list

Remove misplaced text

Selected the right MultiSelect library via bower

Move bower dependencies to correct location
2014-11-18 12:54:33 +01:00

68 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript">
$(function(){
$("#test-1").multiselect({
show: ["bounce", 200],
hide: ["explode", 1000]
});
$("#test-2").multiselect({
show: "bounce",
hide: "explode"
});
});
</script>
</head>
<body onload="prettyPrint();">
<h2>Show/hide with Animation</h2>
<p>Using animations with the show and hide parameters. Either pass an array with the effect name and the speed, or just specify the name of an effect. If you don't
specify a speed, the default of 400ms will be used.</p>
<h3>Specifying different show and hide speeds</h3>
<pre class="prettyprint">
$("#test-1").multiselect({
show: ["bounce", 200],
hide: ["explode", 1000]
});
</pre>
<select id="test-1" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<h3>Only passing the name of an effect</h3>
<pre class="prettyprint">
$("#test-2").multiselect({
show: "bounce",
hide: "explode"
});
</pre>
<select id="test-2" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
</body>
</html>