diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-06-07 17:35:27 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-06-07 17:35:27 +0000 |
| commit | 3524ef0c26f8760615c01217045c72f9bb20dde9 (patch) | |
| tree | d7fa5208fb99d2f7d074706f1eed86a6a4b53acd /demos/real-world/range-interface/index.html | |
| parent | 2ac4aa61e5167d9aa427b70fc5f1ad9b934fdf3c (diff) | |
| download | jquery-ui-3524ef0c26f8760615c01217045c72f9bb20dde9.tar.gz jquery-ui-3524ef0c26f8760615c01217045c72f9bb20dde9.zip | |
removed extra level ui folder
Diffstat (limited to 'demos/real-world/range-interface/index.html')
| -rw-r--r-- | demos/real-world/range-interface/index.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/demos/real-world/range-interface/index.html b/demos/real-world/range-interface/index.html new file mode 100644 index 000000000..bb8554fa3 --- /dev/null +++ b/demos/real-world/range-interface/index.html @@ -0,0 +1,130 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head> +<meta http-equiv="Content-Language" content="en" /> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<title>Slider Test Page</title> +<script src="../../../../jquery/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> +<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="no title" charset="utf-8"> +<script src="../../../source/ui.core.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/ui.slider.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.core.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.blind.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.bounce.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.clip.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.drop.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.explode.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.fold.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.highlight.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.pulsate.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.scale.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.shake.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.slide.js" type="text/javascript" charset="utf-8"></script> +<script src="../../../source/effects.transfer.js" type="text/javascript" charset="utf-8"></script> + +<style type="text/css" media="all"> +#wrap { + width: 900px; + margin: 0 auto; +} +#col-1 { + width: 220px; + border: 1px solid #ccc; + padding: 20px; + float: left; +} +#col-2 { + width: 500px; + float: left; +} +#col-2 div { + width: 100px; + height: 100px; + background: #ccc; + border: 1px solid #000; + margin: 20px; + float: left; + text-align: center; + font-size: 150%; +} +.label-1 { position: absolute; left: 0; top: -1.1em; } +.label-2 { position: absolute; right: 0; top: -1.1em; } +</style> +</head> +<body class="flora"> +<div id="wrap"> + <h1>Slider Interface Example</h1> + <div id="col-1"> + <div id="slider1" class="ui-slider-2"> + <div class="ui-slider-handle"></div> + <div class="ui-slider-handle"></div> + <span class="label-1">0</span> + <span class="label-2">100</span> + </div> + <br /> + <select id="effects"> + <option>fade</option> + <option>drop</option> + <option>fold</option> + <option>highlight</option> + <option>explode</option> + <option>slide</option> + <option>clip</option> + <option>shake</option> + <option>scale</option> + <option>pulsate</option> + <option>bounce</option> + </select> + </div> + + <div id="col-2"> + <div>0</div> + <div>10</div> + <div>20</div> + <div>30</div> + <div>40</div> + <div>50</div> + <div>60</div> + <div>70</div> + <div>80</div> + <div>90</div> + <div>100</div> + </div> +</div> +<script type="text/javascript"> +$(function(){ + $('#slider1').slider({ + stepping: 10, + min: 0, + max: 100, + range: true, + change: function(e, ui) { + var minValue = $('#slider1').slider('value', 0); + var maxValue = $('#slider1').slider('value', 1); + $('#col-2 div').each(function(){ + var value = parseInt($(this).html(), 10); + if (value < minValue || value > maxValue) { + var effect = $('#effects').val(); + switch (effect) { + case 'fade' : + $(this).fadeOut(); + break; + case 'drop' : + $(this).hide('drop', { direction: 'down' }); + break; + default : + $(this).hide(effect); + } + } else + $(this).fadeIn(); + }); + }, + handles: [ + {start: 0, min: 0, max: 100}, + {start: 100, min: 0, max: 100} + ] + }); +}); +</script> +</body> +</html> |