aboutsummaryrefslogtreecommitdiffstats
path: root/demos/real-world/range-interface
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2008-12-23 13:36:42 +0000
committerRichard Worth <rdworth@gmail.com>2008-12-23 13:36:42 +0000
commit731bff8bcbfe686d12bb7b3b89c0224c1af4ffd3 (patch)
tree6470ed15dee3bf442b6fc5b4eea12088871ae278 /demos/real-world/range-interface
parent2b21245cd01e91b9b3114d06ba5b45650cf63ec6 (diff)
downloadjquery-ui-731bff8bcbfe686d12bb7b3b89c0224c1af4ffd3.tar.gz
jquery-ui-731bff8bcbfe686d12bb7b3b89c0224c1af4ffd3.zip
demos: removed legacy demos folders - functional, real-world
Diffstat (limited to 'demos/real-world/range-interface')
-rw-r--r--demos/real-world/range-interface/index.html130
1 files changed, 0 insertions, 130 deletions
diff --git a/demos/real-world/range-interface/index.html b/demos/real-world/range-interface/index.html
deleted file mode 100644
index ce9a5f1e6..000000000
--- a/demos/real-world/range-interface/index.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!doctype html>
-<html 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-1.2.6.js" type="text/javascript" charset="utf-8"></script>
-<link rel="stylesheet" href="../../../themes/default/ui.all.css" type="text/css" charset="utf-8" />
-<script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.blind.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.bounce.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.clip.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.drop.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.explode.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.fold.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.pulsate.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.scale.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.shake.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/effects.slide.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../../ui/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>
-<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(event, 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>