Bug Tracker

Ticket #3205: slider-basic.html

File slider-basic.html, 2.9 KB (added by topbit, 14 years ago)

Source code with XHTML, CSS, JavaScript.

Line 
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
4<head>
5<meta http-equiv="Content-Type" content="application/xml+xhtml,text/html; charset=UTF-8" />
6<title>jQuery Slider Basic</title>
7<script type="text/javascript" src="../script/common/jquery-1.2.6.js"></script>
8<script type="text/javascript" src="../script/common/jquery-ui-1.5.2.js"></script>
9<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"></link>
10<style type="text/css" media="screen" lang="en">
11/* <!-- */
12* { padding: 0; border-width: 0; margin: 0; font-size: 100%; font-family: monospace; }
13label {width: 12em; margin-right: 0; display: inline; float: left; }
14input { border-width: 1px; display: block; }
15#main { width: 1000px; margin: 0 auto; }
16h1 { text-align: center; margin: 0 auto; }
17#platform { border: 1px solid black; margin-top: 50px; }
18.slider { border: 1px solid blue; }
19/* --> */
20</style>
21<script type="text/javascript">
22//<!--
23var widthSliderOptions =
24{
25  "handles":
26  [
27    { id: "width-slider", min: 20, max: 100, start: 20 }
28  ],
29  "slide": function(e, ui)
30  {
31    $("#width-value").each
32    (
33      function(index, element)
34      {
35        element.value = ui.value;
36      }
37    )
38  },
39  "min": 0,
40  "max": 200,
41  "startValue": 60
42};
43
44function initWidthSlider()
45{
46  $("#width-slider").slider(widthSliderOptions);
47}
48
49function onWidthValueChanged(e)
50{
51  var value = parseInt(this.value);
52  value = value<widthSliderOptions.handles[0].min?widthSliderOptions.handles[0].min:value;
53  value = value>widthSliderOptions.handles[0].max?widthSliderOptions.handles[0].max:value;
54  $("#width-slider").slider("moveTo", value.toString(), 0);
55}
56
57function initWidthValue()
58{
59  $("#width-value").blur(onWidthValueChanged);
60}
61
62function init()
63{
64  initWidthSlider();
65  initWidthValue();
66}
67
68jQuery(init);
69
70//-->
71</script>
72</head>
73<body>
74<div id="main">
75  <h1>jQuery Slider Basic</h1>
76  <div id="platform">
77    <div id="width-slider" class="slider"></div>
78    <div id="height-slider" class="slider"></div>
79  </div>
80  <div id="control-bar">
81    <label accesskey="e" for="enable">Enable the slider</label>
82    <input id="enable" type="checkbox" checked="checked" onchange="javascript: $('#width-slider').slider(this.checked?'enable':'disable');"></input>
83    <br />
84    <label accesskey="v" for="value">The value is</label>
85    <input id="width-value" type="text" value="60"></input>
86    <br />
87    <label accesskey="c" for="create">Create/Destroy</label>
88    <input id="create" type="checkbox" checked="checked" onclick="javascript: $('#width-slider').slider(this.checked?widthSliderOptions:'destroy');"></input>
89  </div>
90</div>
91</body>
92</html>