root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/slider/slider-vertical.html @ 26899

Revision 26899, 1.4 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Slider - Vertical slider</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.core.js"></script>
9    <script src="../../ui/jquery.ui.widget.js"></script>
10    <script src="../../ui/jquery.ui.mouse.js"></script>
11    <script src="../../ui/jquery.ui.slider.js"></script>
12    <link rel="stylesheet" href="../demos.css">
13    <style>
14    #demo-frame > div.demo { padding: 10px !important; };
15    </style>
16    <script>
17    $(function() {
18        $( "#slider-vertical" ).slider({
19            orientation: "vertical",
20            range: "min",
21            min: 0,
22            max: 100,
23            value: 60,
24            slide: function( event, ui ) {
25                $( "#amount" ).val( ui.value );
26            }
27        });
28        $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
29    });
30    </script>
31</head>
32<body>
33
34<div class="demo">
35
36<p>
37    <label for="amount">Volume:</label>
38    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
39</p>
40
41<div id="slider-vertical" style="height:200px;"></div>
42
43</div><!-- End demo -->
44
45
46
47<div class="demo-description">
48<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
49</div><!-- End demo-description -->
50
51</body>
52</html>
Note: See TracBrowser for help on using the browser.