--- /dev/null
+<!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>
projects / jquery-ui.git / commitdiff