1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<?php sect('lock'); ?>
<h1>Locking sliders together</h1>
<section>
<div class="view">
<p>Two cross-updating sliders can be created using a combination of the <code>change</code> and <code>slide</code> events.</p>
<div class="example">
<div class="slider" id="slider1"></div>
<span class="example-val" id="slider1-span"></span>
<div class="slider" id="slider2"></div>
<span class="example-val" id="slider2-span"></span>
<button id="lockbutton" style="float: right; margin: 20px 0 0;">Lock</button>
<?php run('locked-setup'); ?>
<?php run('locked-sliders'); ?>
<?php run('locked-link'); ?>
<?php run('locked-crossupdate'); ?>
</div>
</div>
<div class="side">
<div class="viewer-header">Setup and button clicks</div>
<div class="viewer-content">
<?php code('locked-setup'); ?>
</div>
<div class="viewer-header">The <code>Crossupdate</code> function</div>
<div class="viewer-content">
<?php code('locked-crossupdate'); ?>
</div>
<div class="viewer-header">Initializing the sliders</div>
<div class="viewer-content">
<?php code('locked-sliders'); ?>
</div>
<div class="viewer-header">Linking the sliders together</div>
<div class="viewer-content">
<?php code('locked-link'); ?>
</div>
</div>
</section>
|
