/
demo.html
55 lines (49 loc) · 1.77 KB
/
demo.html
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
53
54
55
<html>
<head>
<script type="text/javascript" src="https://github.com/dcrec1/j6/raw/master/lib/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/dcrec1/j6/raw/master/lib/jquery-ui.js"></script>
<script type="text/javascript" src="https://github.com/dcrec1/j6/raw/master/lib/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="https://github.com/dcrec1/j6/raw/master/src/j6.js"></script>
<link rel="stylesheet" href="https://github.com/dcrec1/j6/raw/master/lib/themes/vader/jquery.ui.all.css" />
<link rel="stylesheet" href="https://github.com/dcrec1/j6/raw/master/src/css/j6.css" />
<style type="text/css" media="screen">
input {
border: 1px solid #BBBBBB;
margin: 0.5em 0;
padding: 5px;
}
</style>
</head>
<body>
<ol>
<li class="swapable">
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li class="swapable">
<label for="email">Email</label>
<input type="text" id="email" />
</li>
<li>
<label for="city">City</label>
<input type="text" id="city" />
</li>
<ol>
<a href="#sign_in" class="trigger">Sign in</a>
<div id="sign_in" class="dialog" style="width:500px;height:600px">Sign in here</div>
<a href="#options" class="trigger">Options</a>
<ul id="options" class="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<a class="filter" href="#users .active">Active</a>
<a class="filter" href="#users > .new">New</a>
<div id="users">
<span class="active"></span>
<span class="inactive"></span>
<span class="active"></span>
<span class="inactive"></span>
</div>
</body>
</html>