mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-12-07 06:14:24 +00:00
131 lines
4.1 KiB
HTML
131 lines
4.1 KiB
HTML
|
<!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>
|