example.html - jscancer - Javascript crap (relatively small)
HTML git clone git://git.codemadness.org/jscancer
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
example.html (5322B)
---
1 <html>
2 <head>
3 <title>Example</title>
4 </head>
5 <body>
6
7 <style type="text/css">
8 label {
9 font-weight: bold;
10 }
11 input:invalid {
12 border-color: #ff0000 !important;
13 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.3) !important;
14 }
15 </style>
16
17 <form autocomplete="off">
18
19 <h2>Example: basic example</h2>
20
21 <table class="filterslider" data-from="filter_number_from[0]" data-to="filter_number_to[0]" data-label-from="filter_number_from_value[0]" data-label-to="filter_number_to_value[0]">
22 <tr>
23 <td class="label"><label for="filter_number_from[0]">From:</label></td>
24 <td class="input"><input class="slider" type="range" step="1" value="0" name="filter_number_from[0]" id="filter_number_from[0]" min="0" max="1000" /></td>
25 <td class="value"><span id="filter_number_from_value[0]">0</span></td>
26 <td class="measure">meter</td>
27 </tr>
28 <tr>
29 <td class="label"><label for="filter_number_to[0]">Through:</label></td>
30 <td class="input"><input class="slider" type="range" step="1" value="1000" name="filter_number_to[0]" id="filter_number_to[0]" min="0" max="1000" /></td>
31 <td class="value" id="filter_number_to_value[0]">1000</td>
32 <td class="measure">meter</td>
33 </tr>
34 </table>
35
36 <hr/>
37
38 <h2>Example: basic example with ticks</h2>
39
40 <p>
41 <i>A datalist is used for ticks and snapping to values.</i>
42 </p>
43
44 <table class="filterslider" data-from="filter_number_from[1]" data-to="filter_number_to[1]" data-label-from="filter_number_from_value[1]" data-label-to="filter_number_to_value[1]">
45 <tr>
46 <td class="label"><label for="filter_number_from[1]">From:</label></td>
47 <td class="input"><input class="slider" type="range" step="1" value="0" name="filter_number_from[1]" id="filter_number_from[1]" min="0" max="1000" list="filter_values_1" /></td>
48 <td class="value"><span id="filter_number_from_value[1]">0</span></td>
49 <td class="measure">meter</td>
50 </tr>
51 <tr>
52 <td class="label"><label for="filter_number_to[1]">Through:</label></td>
53 <td class="input"><input class="slider" type="range" step="1" value="1000" name="filter_number_to[1]" id="filter_number_to[1]" min="0" max="1000" list="filter_values_1" /></td>
54 <td class="value" id="filter_number_to_value[1]">1000</td>
55 <td class="measure">meter</td>
56 </tr>
57 </table>
58 <datalist id="filter_values_1">
59 <option value="0" label="0"></option>
60 <option value="250" label="250"></option>
61 <option value="500" label="500"></option>
62 <option value="650" label="650"></option>
63 <option value="1000" label="1000"></option>
64 </datalist>
65
66 <hr/>
67
68 <h2>Example: with decimals</h2>
69
70 <p>
71 <i>The step attribute must be set to "any" for some browsers for decimal values.</i>
72 </p>
73
74 <table class="filterslider" data-decimals="datalist" data-from="filter_number_from[2]" data-to="filter_number_to[2]" data-label-from="filter_number_from_value[2]" data-label-to="filter_number_to_value[2]">
75 <tr>
76 <td class="label"><label for="filter_number_from[2]">From:</label></td>
77 <td class="input"><input class="slider" type="range" step="any" value="0" name="filter_number_from[2]" id="filter_number_from[2]" min="0" max="1" list="filter_values_2" /></td>
78 <td class="value"><span id="filter_number_from_value[2]">0</span></td>
79 <td class="measure">meter</td>
80 </tr>
81 <tr>
82 <td class="label"><label for="filter_number_to[2]">Through:</label></td>
83 <td class="input"><input class="slider" type="range" step="any" value="1" name="filter_number_to[2]" id="filter_number_to[2]" min="0" max="1" list="filter_values_2" /></td>
84 <td class="value" id="filter_number_to_value[2]">1</td>
85 <td class="measure">meter</td>
86 </tr>
87 </table>
88 <datalist id="filter_values_2">
89 <option value="0.0" label="0"></option>
90 <option value="0.25" label="0.25"></option>
91 <option value="0.50" label="0.50"></option>
92 <option value="0.65" label="0.65"></option>
93 <option value="0.90" label="0.9"></option>
94 <option value="1.00" label="1.0"></option>
95 </datalist>
96
97 <hr/>
98
99 <h2>Example: example allowing also manual input</h2>
100
101 <table class="filterslider" data-from="filter_number_from[3]" data-to="filter_number_to[3]" data-label-from="filter_number_from_value[3]" data-label-to="filter_number_to_value[3]">
102 <tr>
103 <td class="label"><label for="filter_number_from[3]">From:</label></td>
104 <td class="input"><input class="slider" type="range" step="1" value="0" name="filter_number_from[3]" id="filter_number_from[3]" min="0" max="1000" list="filter_values_3" /></td>
105 <td class="value"><input id="filter_number_from_value[3]" type="number" value="0" step="1" min="0" max="1000" /></td>
106 <td class="measure">meter</td>
107 </tr>
108 <tr>
109 <td class="label"><label for="filter_number_to[3]">Through:</label></td>
110 <td class="input"><input class="slider" type="range" step="1" value="1000" name="filter_number_to[3]" id="filter_number_to[3]" min="0" max="1000" list="filter_values_3" /></td>
111 <td class="value"><input id="filter_number_to_value[3]" type="number" value="1000" step="1" min="0" max="1000" /></td>
112 <td class="measure">meter</td>
113 </tr>
114 </table>
115 <datalist id="filter_values_3">
116 <option value="0" label="0"></option>
117 <option value="250" label="250"></option>
118 <option value="500" label="500"></option>
119 <option value="650" label="650"></option>
120 <option value="1000" label="1000"></option>
121 </datalist>
122
123 </form>
124
125 <script type="text/javascript" src="filter.js"></script>
126
127 </body>
128
129